I'm working on a project that involves React, Redux and some other frontend libraries. I have read lots of good thing for server side rendering and it sounds cool. So I implemented both the server side rendering and client side rendering. I did a performance comparison between those 2 and I'm having a performance issue with server side rendering, not sure I did anything wrong. I found that server side rendering requires lots of CPU/mem resources and it greatly slows down my server. Even on a simple page it will have to process complex react, redux logic that involves store initialization, virtual dom, css extraction for every request. This become even worse when traffic is high, and sometimes it stops responding. My project is complex and the page has lots of components with lots of reducers, middlewares. I know we can mitigate this by using cache, but in my project I have thousands of pages and the content needs to be dynamically rendered based on url parameters and can't be stale so cache is not a viable solution. Even with cache, the page is rendered faster than client side rendering if it hit cache. Once cache expire, the server become slow again. Also I feel that the experience is a little weird since the time it takes from the content start to render until finish is much longer than client side rendering. Overall the client side rendering feels much smoother. Any idea why?
1 Answers
React used purely as a client side (CSR) library is effectively offloading your server from doing anything else than serving files. All of the computation happens on the clients (browsers) using their CPU (parsing & executing JavaScript, rendering React trees) and network resources (fetching API endpoints, parsing responses). Please note that even if the traffic increases, all the work is still well distributed between all of the clients and the server only needs to keep up with serving files.
Moreover, CSR solutions have at least one more advantage that might be easily overlooked. Once the initial JavaScript bundle is executed and the resources are discovered, browser can still parse and execute the rest of the code while fetching network resources (like images). This way, code-stream and data-stream are executed (kinda) in parallel.
This changes dramatically on server. To render a component tree (ReactDOMServer.renderToString/.renderToNodeStream) you need to first fetch all the resources needed for the initial render (introducing latency) and inject them at the top of your app. Otherwise, React will only render parts of the app that don't depend on any data. Rendering large component tress is CPU-bounded task. What is more, injected state should be serialised and transferred to the client alongside rendered HTML so that React can hydrate. This requires more data to be sent over the wire to the clients.
To sum up, with SSR enabled, your server is doing much more work than it does with CSR only.
Related