How to prevent hydration of Nuxt when using SSR?

Question

We are using this approach to rendering content:

<div id="full-article" v-html="content"></div>
this.content = api.response.data

In this approach, "content" is retrieved from an API, but because we also use Server-Side-Rendering (SSR), the final HTML is turned into this:

<div id="full-article">$real_html_content</div>
this.content = $real_html_content

This approach means that the content is repeated, once as rendered HTML, and once as a javascript variable. But in this scenario we are not using the javascript content variable. The fact that it's still included in the final HTML page means that the page size is twice as big as necessary. How can we prevent this? Is there some way of hiding/removing javascript content that has already been rendered by SSR?

Alternatively, maybe it would be better to deal with this content differently, perhaps insert it at a later stage and not involve Nuxt or SSR?

Conley

Answer 1

This is what you're looking for: https://github.com/maoberlehner/vue-lazy-hydration
Created by Markus Oberlehner who was seeking to avoid shipping to much JS to the frontend, especially when this was not needed.

You do have several options but this is how it can be used

<lazy-hydrate never>
  <article-content :content="article.content"/>
</lazy-hydrate>

In this case, the hydration (injecting JS into static content) will never happen. There are other interesting options that can be used too!

Keep in mind that this was more of a proof of concept, hence why Markus still considers it as beta-ish. This project will probably die at some point because Vue3/Nuxt3 will be able to do this in an official way.

Still, even if I did not tried it yet, you can totally use it as of right now and enjoy a JS-light experience, it should work!

Update: nowadays you should probably give a try to this one https://github.com/nuxt/nuxt/issues/24242

Taliataliaferro

Sadly this library doesn't work with Nuxt 2... Nuxt is using async imports differently and components wrapper in lazy-hydrate still hydrates. I just tested it and got disappointed the PR to make it work for Vue framework has never been merged. More info: github.com/maoberlehner/vue-lazy-hydration/issues/20 – Oilstone

@Oilstone damn, it does not work in any way? Let's hope to see it shipped soon! – Taliataliaferro

Answer 2

I've an alternative but painful way to implement this on nuxt3. First, setup middleware that inform Pinia that this is client side rendering, adding a 200ms delayed to prevent client side hydration. Use useAsyncData to hydrate data on server, but allow client side rendering after the 200ms on browser end.

Make use of useState to store sync data between server and client. My finding is that by default, useState does not work with custom data like objectid, so I'm using superjson with extension.

And on client side hydration, empty the useState to prevent it from showing last server renderred data.

Full code here: https://gist.github.com/u007/0fd4b01296b0bda43e0015397ed2d90c

Constantine

Not sure what you tried to achieve here, but give this one a try IMO: roe.dev/blog/nuxt-server-components – Taliataliaferro

This looks useful, but the post contained a number of case and spelling errors. Would you install a spell checker? Stack Overflow is meant to be like documentation, rather than a chatroom or a forum. – Macdougall