Nuxt3 - SSG for specific pages?-CodePudding

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

CodePudding user response：

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.