Send HTML snippet in the generated page or in JavaScript and then load on the page?

In an application, a user stores some HTML snippets in the DB. Later when the user requests a resource, a snippet need to be part of the representation. There are two approaches: 1. Insert the snippet into the representation when generating it on the server, and send the page to the client 2. Leave the node empty when generating, but put it into the JavaScript variable. The page then fill the snippet in the node on the client side

I like the first more, because it is easy to cache the page. It is kind of ugly to have a JS viable with a long HTML snippet in the second. The processing of the page has to wait until the snippet loads.

Is there any general good practice guideline for this? Or what is your thinking?

Thanks.