Nuxt.js: Disable server side rendering in layouts / pages / configuration

[ggn06awu]

Putting this in so it's not lost and / or for anyone has any further thoughts. After an earlier discussion with @Atinux on Gitter.

The change

Allow us to turn off server side rendering for selected areas of our applications, configured in a similar way to middleware, via nuxt.config.js, layout or pages.

Why?

For us, it's related to JWT token authentication. At present it's not possible to re-hydrate our Vuex User and related stores after the users refreshes, until after the application has rendered (forcing the user through middlewares that cannot see they're authenticated and kicking them out). If we attempt to force the store population on the client side before the application is rendered, the HTML between the server and client is different and we understandably receive:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.

This means it's not currently possible to support JWT easily in Nuxt. I'm pretty certain there'll be other legitimate use cases for forcing SSR: false on selected areas of an application.

_{This feature request is available on Nuxt.js community (#c432)}

[marcpaskell]

+1 - this would be really useful

[aymenpeak]

@ggn06awu Meanwhile is there any solution to keep the user logged in after refresh?

i tried this

but doesn't work with middlewares...

[cretueusebiu]

You might want to take a look at the auth0 example. You can have a global middleware that checks for the token in cookie and adds it to the store.

I integrated Nuxt with Laravel, and I have a middleware like that that checks for the JWT token then fetches the user from my Laravel app and by the time the app is rendered the user is already in the store.

[Atinux]

Related to #240

[aymenpeak]

@cretueusebiu i did that too but i have a little bug on reloading on the nav bar, some time it desappear showing this error

knowing that its content depends on the state of the store

[aymenpeak]

it worked for me guys , it was an error in my default layout.

thanks for helping :peace_symbol:

[max-schu]

+1 from me,
just wanted to create this question.
Many modules are not compatible with ssr. if you know you'll be hosting static and use some of these modules, it would be create to be able to just globally ssr: false in nuxt config so it doesnt bother you anymore.

[ggn06awu]

@max-schu it's true some things aren't compatible, however I wouldn't encourage the use of ssr: false in the broader sense, isomorphic rendering is a (the?) primary reason to use Nuxt in the first place.

[Atinux]

Exactly, you won't have any advantage for SEO.

But I believe Nuxt.js can be more than only SSR, using Vue files, middleware, layouts, ES6, code-splitting and all the best practices can be also a great experience for developing static web applications too.

[max-schu]

@ggn06awu i get your point, but there are many different use cases for nuxt.js. If you use nuxt.js to develop a webapp i'm totally on your side. However using nuxt.js as a static site generator to build simple websites such as blogs/portfolios etc, ssr is obsolete because in most cases it will be hosted static and the generated build is prerendered (SEO) anyway.

Telling you how I use it at the moment: for some projects it's a better version of vue-cli webpack template for me as it saves me the effort of defining routes, components and making things easier overall. However the more modules are used in combination with nuxt, the likelier it is you have to build workarounds because of ssr. Then simplifying things in fact makes it more complicated.

[ausir0726]

I like SSR more than prerender .
prerender need more time to render it , and you must know that userAgent you want feed prerender page .
so , for my personal view , I recommend use SSR ( I know it have obsolete problem ) , some thing not generate page use prerender .

but I still want page ssr:false , like user page ... etc ... that really don't need SSR .

by the way , I also use nuxt.js develop static website ( no backend ) , SSR is awesome

[lewebsimple]

Global (router) middleware works great for authentication, in fact it's the only solution that I've seen working in my case (Feathers+Nuxt.js). See https://github.com/lewebsimple/feathers-nuxt for implementation details. I still have to experience the [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content warning, I will report back if I encounter this.

Not sure if offering the option to turn off SSR is necessary, maybe it would be simpler to have nuxtServerInit (or another similar action like nuxtClientInit) be run on both the client and/or server side.

[Atinux]

Closing it since https://github.com/nuxt/nuxt.js/issues/240 is open

[wayz-of-chang]

I ran into a similar issue with \ tags. By adding inline-template (e.g. \

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.