Search code examples
vue.jsnuxt.jsserver-side-rendering

How does Nuxt.js Server Side Rendering Work?


I mostly work with Next.js for web projects. Work demands I work on a project that uses Nuxt.js (v2).

I got up to reading on Nuxt. From pouring over the documentation for the last couple of days, there are a few questions that still linger.

  1. Static-Site Generation: I did dabble in it a few months back, but ended up not using it for anything substantial. It seemed fairly straightforward, not much different from using Next.js for purely static-sites using getStaticProps() exclusively for fetching data at build time. Dynamic data fetching and authentication can happen at the client-side very much like it would happen for an SPA. Static data at build time ensures good SEO.

  2. Server-Side Rendering (on Next): For Next.js this was simple as well, every time a page is requested getStaticProps() will block it from rendering until it can resolve with the props data on the server itself. A completely rendered page is returned to the client, from there on out, the client can still call our api routes for immediate dynamic data using XHR.

  3. Server-Side Rendering (on Nuxt): Reading the documentation on Nuxt.js and working out a small sample project, Nuxt.js it seems works differently in SSR (universal), only the first request produces a server-rendered page, here on out, both data-fetching functions, asyncData() and fetch() run on the client-side (javascript bundles for the pages are preloaded using the Nuxt Router).

My question is, what is the benefit of this approach? This will not help out with SEO, secrets can not be stored on the server because the code can execute on the browser. Is there something I am missing? I searched the docs and could not find anything that makes pages render on the server for every request, as a server-rendered application should.


Solution

  • I'm working with Nuxt 3 and as far as I know you can use useAsyncData() and useFetch() in both client and server. Nuxt 3 SSR universal works fine with SEO because crawlers not cache files so every request is separate, so crawlers get every time SSR HTML file from server. You can use secrets if beside web page you want to create API calls from "server" folder, this is separate functionality to make API calls it not marge with web page. Calling this API will send user only for example JSON file, not whole code from a server/*.js files.