How to combine static and client side rendered pages in Nuxt.js?

Question

When people enter the website I want the /home, /about etc. pages to be static. However, when they login I want the new pages to be rendered from the client. How can this be achieved with Nuxt?

Answer 1

This is already the default behavior if you have target: static.

Your pages will be generated as static during the build time (yarn generate), then it will be available for the user. On initial render, it will load the static generated code, then hydrate the page and transform it into an SPA.
Hence, Nuxt is isomorphic (can be called Universal App) because of the SSR/SSG + SPA client side afterwards.

As of today, you can somehow disable the client side hydration but it's not baked in, and it's also the default behavior.

---

If you want to disable the generation of specific paths during the yarn generate step, you can follow this answer: https://stackoverflow.com/a/66472634/8816585

---

The nuxt/auth module does it out of the box btw.
For routes that do not require any login, you can set auth: false and those will bypass the auth middleware.