Make the dev-server also support client side rendering with output: export

[vaibhavshn]

Goals

When you have output: export set in next.config.js, the dev-server should client side render all components by default, instead of server rendering them.

Non-Goals

No response

Background

Since the new react.dev docs suggest using Next instead of CRA, this will be helpful for beginners in React as they don't have to deal with hydration errors when just starting to learn React. Also if you just want a client side app, you don't have to write a lot of boilerplate code.

Proposal

While creating a fully static client side app is possible in Next by setting output:export, you still have to tell Next to disable SSR for every component with the dynamic() function, and you have to keep writing that everywhere - or you can do something like this in _app.jsx so all components are client side rendered:

const Comp = dynamic(() => Promise.resolve(Component), { ssr: false });

return <Comp {...pageProps} />

I think a CSA mode will be amazing, it can be enabled when you have output: export set which is already there in next's config and you can make the dev server client side render all components.

Let me know what you folks think about this.

[dcorb]

Same issue here, pure SPA app. I think your work-around works for/pages/, but how to work-around this issue in the new experimental /app sites?
I want to disable SSR and avoid all those ReferenceError: window is not defined error messages.

[vaibhavshn]

Also to clarify: any config other than output: export also works as far as I don't have to write extra boilerplate code every time.

[stychu]

Wouldn't wrapping root layout in

const Comp = dynamic(() => Promise.resolve(Component), { ssr: false });

return <Comp {...pageProps} />

Make the whole app client side rendered?

[vaibhavshn]

Yes. Although the requirement here is: if final output (which is an SSG SPA app) is already set via output: export, why should the dev-server act differently and try to server render everything?

[dcorb]

That doesn't work sadly. You can't use dynamic() in the root (layout or page). It has to be done one more level down, in a sub component.
https://twitter.com/rickhanlonii/status/1649175657627222022

[vaibhavshn]

That doesn't work sadly. You can't use dynamic() in the root (layout or page). It has to be done one more level down, in a sub component.

https://twitter.com/rickhanlonii/status/1649175657627222022

I have tried it in pages directory and it worked for me before though. Not sure about the new app router.