Next.js: Optimize the performance bottleneck of react's server rendering

[lenny0702]

Firstly I have to say, this is a great framework. Originally, we have to the server rendering of react from bottom to up. This framework save us a lot of time and it's so convenient, thanks!

But as we know, there is a serious performance issue of react's server render, which will cause cost a lot of time to render when the server facing hight concurrent requests.

But I saw a very cool idea of Walmart labs which kind of solve this issue perfectly. Git link is https://github.com/walmartlabs/react-ssr-optimization

I'm wondering if it's possible to combine this idea to next.js? That will make the server render far more useful. Looking forward to your response

[arunoda]

I think this is totally doable with our custom server API.
See: https://github.com/zeit/next.js#custom-server-and-routing

I'd also like to have an example using this project. Also show how to benchmark it.

[epiqueras]

I've seen that after ~100 concurrent users it becomes significantly more efficient to run server renders on child processes. This + caching provides the best performance.

[gcpantazis]

See also #2279

[timneutkens]

Going to close this since it's been open for over a year, since then React 16 was released, and we want to eventually support stream rendering.

[devcorpio]

Hi @epiqueras,

Could you show how run server renders in nextjs on child processes?

[epiqueras]

@devcorpio There's a few libs that do it for you, but with React 16 you can use streams.

See https://zeit.co/blog/streaming-server-rendering-at-spectrum.

[devcorpio]

Thanks for your answer @epiqueras.

Could I use that feature with nextjs? Or I'm blocked until the framework use that feature internally?

Kind regards

[epiqueras]

Next.js supports custom servers. See https://github.com/zeit/next.js/#custom-server-and-routing.