19

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?

piemekanika
  • 375
  • 2
  • 5
  • 14

6 Answers6

23

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/

Juho Rutila
  • 2,316
  • 1
  • 25
  • 40
Aldarund
  • 17,312
  • 5
  • 73
  • 104
13

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.

some-user
  • 3,888
  • 5
  • 19
  • 43
AlxTheRed
  • 505
  • 6
  • 23
9

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

Ahmed Shendy
  • 1,424
  • 15
  • 28
7

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

Chirag Joshi
  • 409
  • 1
  • 4
  • 13
0

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 }
]
fafa.mnzm
  • 561
  • 7
  • 17
-9

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

Toheeb Ojuolape
  • 1
  • 1
    This is set the whole application to SPA. https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-ssr/ – mhrabiee Nov 29 '20 at 13:09