CODEWITHSUNDEEP
javascriptnuxt.jsserver-side-rendering
Victor
Victor

Reputation: 5353

How does SSR works after the initial load in NuxtJS?

In pure VueJS application we have a <div id="app"></div> container, where VueJS puts all the stuff which needs to be rendered.

Thus, if we open the source code in browser, we will not see any rendered content.

So, if we use Nuxt capabilities of SSR, on the first initial load all the components are rendered on the server, ad we see some HTML stuff.

But, what happens when we navigate through the site, when it works in "spa mode" (using <nuxt-link>). When I click on a link, the site is not fully reloaded. I cannot see any requests in chrome dev tools, non XHR non others. And even if we got fully rendered content from the backend, it is being inserted through javascript, like in <div id="app"></div>" case, since we do not reload the page.

But I can see in the source code that everything works as SEO needs: all the html is present in source code after navigation to some other routes. But how this happens?

Upvotes: 2

Views: 1793

Answers (1)

Borjante
Borjante

Reputation: 10487

The process is called Hydration.

Note that in SPA mode everthing gets rendered on the client. When using SSR the first render happens on the server, therefore you can see the HTML in the source code.

Once on the client, VueJS will "hydrate" it's state, meaning that it will set the App's state to what came from the server. If you then use <nuxt-link> it will navigate in SPA mode. On the other hand, using a normal <a> won't.

This is perfect for all use cases, as Google and other search engines don't have Javascript enabled they will just do a completely new request to all your links, but your users will have the feeling of an SPA page.

Upvotes: 5

Related Questions