Nuxt3 - SSG for specific pages?

Question

I want to know can we use server-side rendering for specific page in nuxt.

This is what I want to achieve

Rendered on Server

www.example.com/foo

Rendered on Client

www.example.com/bar

Please clarify, SSR or SSG? Also, do you want some of them to be SPA-only + SSR/SSG or do you want to have some with SSR and other with SSG example? [This one](https://github.com/nuxt/framework/discussions/560) may be a good starting point. Your updated example doesn't make a lot of sense, since you're sharing a path change. — kissu, Nov 07 '22 at 23:32
Accidently delete this Question xD. Actually, I want to edit this question, but I Accidently click + enter on delete. Anyways I actually want my whole site rendered in the browser except for few pages — Waleed Tariq, Nov 07 '22 at 23:42

kissu · Accepted Answer · 2022-11-08T00:36:29.060

I gave an answer here regarding the same use-case.
In Nuxt3, it is still available under this exclude key.

You can achieve some pages in SSG (/ in our case) and some other in SPA (/about in our case)

/pages/index.vue

<template>
  <div>
    index default page, seen even without JS
  </div>
</template>

/pages/about.vue

<template>
  <div>
    about page only available when JS is enabled
  </div>
</template>

nuxt.config.js

export default defineNuxtConfig({
  ssr: true,
  generate: {
    exclude: [
      /^\/about/
    ]
  }
})

You can disable your JS thanks to browser's devtools or inspect the source code to see that the /about page doesn't have any statically generated content (and only works with JS enabled).

At some point, the syntax will be as shown here aka

export default defineNuxtConfig({
  routes: {
    '/': { prerender: true }, // Once per build (via builder)
    '/blog/*': { static: true }, // Once on-demand per build (via lambda)
    '/stats/*': { swr: '10 min' }, // Once on-demand each 10 minutes (via lambda)
    '/admin/*': { ssr: false }, // Client-Side rendered
    '/react/*': { redirect: '/vue' }, // Redirect Rules
  }
})

But this is still in the works and not fully done yet as far as I know. In the meantime, I'm proposing the "old way" of doing such things.

Nuxt3 - SSG for specific pages?

1 Answers1