How can I turn off SSR for only certain pages in Nuxt.js to use them as SPA application?

Question

I want to develop an application with Nuxt.js that uses SSR for only certain pages (like artist page user page), so the pages without SSR will be used like an SPA. Is it possible to do it using Nuxt.js?

Ium

nuxtjs.org/api/components-no-ssr#the-lt-no-ssr-gt-component – Asteria

Answer 1

Starting with Nuxt 3.11, you can add the .client or .server suffix to the file of a page and restrict where it would be rendered. Some examples:

• comments.client.vue;
• artist.server.vue

Penultimate

Answer 2

You could do that via server middleware. Add following file under ~/server-middleware/check-spa.js, for example. Do not use middleware directory as it is for route middleware and gets copied to the client code.

export default function(req, res, next) {
  const paths = ['/', '/a']

  if (paths.includes(req.originalUrl)) {
    // Will trigger the "traditional SPA mode"
    res.spa = true
  }
  // Don't forget to call next in all cases!
  // Otherwise, your app will be stuck forever :|
  next()
}

Then, in nuxt.config.js enable serverMiddleware like this

serverMiddleware: ['~/server-middleware/check-spa']

More info here: https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/

https://blog.lichter.io/posts/nuxt-dynamic-ssr-spa-handling/

Udine

Answer 3

For Nuxt3 disabling ssr on particular page or other rendering option you can use,

export default defineNuxtConfig({
  routeRules: {
    // Static page generated on-demand, revalidates in background
    '/blog/**': { swr: true },
    // Static page generated on-demand once
    '/articles/**': { static: true },
    // Set custom headers matching paths
    '/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } },
    // Render these routes with SPA
    '/admin/**': { ssr: false },
    // Add cors headers
    '/api/v1/**': { cors: true },
    // Add redirect headers
    '/old-page': { redirect: '/new-page' },
    '/old-page2': { redirect: { to: '/new-page', statusCode: 302 } }
  }
})

This is subject to change so keep looking at their documentation, if changes https://nuxt.com/docs/guide/concepts/rendering#cons-1

Hemato

Answer 4

Wrap the contents of the component you don't want to render server side in a <client-only></client-only> tag (<no-ssr></no-ssr> for nuxt version < 2.9.0).

@DenisTsoi's link should give you more information on how it works.

Telemachus

As one of the answers below says: If your Nuxt version >v2.9.0, then use <client-only> instead of <no-ssr> – Merry

Answer 5

If your Nuxt version >v2.9.0, then use <client-only> instead of <no-ssr>.

Here is an example:

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </client-only>
  </div>
</template>

The Loading... is used as a placeholder until the component(s) within <client-only> is mounted on client-side.

You can learn more about this here: Nuxt API - The <client-only> Component

Cental

The question concerns Nuxt pages, not component templates – Businesslike

Answer 6

If it is a component that is inserted in another component, wrap it in <no-ssr> <your-component /> </no-ssr> tags. (it used to be <client-only> </client-only>)

If it is a plugin or a mixin which is inserted in nuxt.connfig file, you can change it to

  plugins:[
   { src: your-plugin, ssr: false }
]

Circumfluous

Answer 7

Just go to your nuxt.config.js, search for mode and change it fro

Koenraad

This is set the whole application to SPA. nuxtjs.org/docs/2.x/configuration-glossary/configuration-ssr – Buenrostro