Next.js: How to disable ssr simply and gracefully？

[zhaoyao91]

next.js offers many great features besides ssr, but ssr is the most challenging part. for me, ssr is less important so I wanna disable it to reduce the complexity of my app.

is there an official way to disable it so every page is ensured to be mounted and get initial props in client, and the server will not do any useless rendering at all?

[timneutkens]

There is currently no way to do this. Everything's currently tightly coupled to SSR, so we're not planning to change this in the short term 👌

[zhaoyao91]

Well, thanks, that's fine. But some initialization works should and should only be done in client, for example, retrieve the user id saved in localstorage. Where the first time page was loaded is on the server, and the getInitialProps of this page will not be called on the client, so I don't have any point to hook in to do such initialization. Is there any way to do something on the client even for the initial server rendered page?

[sergiodxa]

Instead of getInitialProps use componentDidMount to get the user id and fetch data.

[zhaoyao91]

Hi, thanks, it's very helpful. But I am not clear about the effect of these methods in next.js.

Will componentDidMount be called twice (one on server and another on client) for the first page ? How about getInitialProps?

[sergiodxa]

React only calls componentDidMount client side. Next.js call getInitialProps only server side for the first render and client side for client side navigation.

[zhaoyao91]

Inspiring! I thought my problem could be solved with these knowledges. Maybe some other people have similar questions, so it would be helpful to put the comparison in readme :)

[sergiodxa]

The getInitialProps behavior is documented here, the componentDidMount behavior is documented in the React docs.

[frol]

If you don't need SSR, you don't need Node running on your server at all -- just use next.js export feature and serve static files with Nginx/Apache/Lighttpd (you can even configure custom routing with rewrite rules if necessary)

[zhaoyao91]

@frol thanks. Yes I could export next app as static files, but how about the development? I can't re-export for every code change.

[sergiodxa]

@frol next export require you to know the possible routes and you can't have dynamic routes, eg. if you have a blog with next export you must need to export again after each post change or new post. Also next export will generate HTML files with the pages server rendered.

[frol]

@sergiodxa you don't need to export every possible URL, you just need to configure the rewrite rules on Nginx/Apache/Lighttp (/posts/(.*) -> /posts/details/?id=$1). To avoid unnecessary server rendered HTML saved in the exported files, just wrap your content components with a "client-only" guard component.