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