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

You could do that via server middleware

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()
}

https://blog.lichter.io/posts/selectively-enable-ssr-or-spa-mode-in-a-nuxtjs-ap


Wrap the contents of the component you don't want to render server side in a <no-ssr></no-ssr> tag.

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


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