Supporting partial rehydration on server side rendered pages

The problem

While SSR in NextJS works well with hybrid pre-rendering targets by page, it would be much more effective if this option was available on a component level rather than just by page.

Consider the following scenario: A page includes a large number of components. The majority of those components don’t have much need to be interactive on the client side after being rendered on the server while a minority of those components (say 10%) will need to re-hydrate to be interactive and have their JS loaded on the client.

In such a case, I’d have no option but to SSR the whole page and all the components involved in order to make sure that 10% of the components are gonna be interactive. At the same time, the 90% will also have to get re-hydrated, and I’d have a really bloated __NEXT_DATA__ with state and values that are not entirely needed, that will end up being evaluated and processed by the browser.

Proposed solution

Instead of doing SSR on all components and then sending the entire application to the client to be re-hydrated, I’d have the option of marking specific components to not hydrate on the client which would signal to NextJS that the component will be statically generated and potentially prevent any related data to be sent via __NEXT_DATA__ back to the client. At the same time, the components that need to be re-hydrated would get re-hydrated normally.

This could potentially bring big savings for the case mentioned above in terms of cutting down on unneeded JS that will have to be evaluated and executed by the browser.

Is this something that has been discussed before or currently on the roadmap ? Is it something that I could potentially build myself on top of NextJS ? Would really appreciate any pointers around how I could potentially solve this problem in case there are no plans for official support on it.

This post seems to be proposing a solution to the problem, I’d really love to hear your thoughts on this approach and whether you’re looking into officially supporting it.

Thanks!

[timneutkens]

It’s on the roadmap and something we’re collaborating on with the React and Chrome team, we’ll share more information when possible.

Overall it’s currently not possible to do this besides following what’s described in the article.

Definitely something we plan on tackling eventually!

There’s a bunch of issues around this already so I’ll close this one.

[bramvbilsen]

Is there any timeframe or priority level compared to other features? We are also really looking forward to this feature!