What is CSR/SSR in React?
What is Server-side Rendering?
SSR (Server-side Rendering) is method or concept when HTML is build on server rather than in the browser (client).
There are two primary reasons why you should consider using Server-side rendering:
- Search engine optimization (SEO).
- Perceived performance.
What is Client-side Rendering?
CSR (Client-side rendering), happens when a empty HTML file is first served to the browser and then HTML is build on the browser and the painting is started.
Based on the architecture, CSR has also many advantages over SSR:
- CSR must be considered for static pages/content to reduce time taken First Meaningful Paint.
- CSR, can be chosen when there is a strong tendency to use mobile web.
Client-side Rendering vs Server-side Rendering
Let’s see the stages of both CSR and SSR for loading content on the browser:
CSR (Client-side Rendering)
- Browser requests a page
- Blank index.html loaded
- Browser requests linked JS bundle
- React app loads
- Content visible to the user (because HTML is build in browser)
- User can interact with app
- Request API data
- Re-render React app with new data
SSR (Server-side Rendering)
- Browser requests a page
- Content visible to the user (because HTML is build on server)
- Browser requests linked JS bundle
- React app loads
- User can interact with app
- Request API data
- Re-render React app with new data
Reasons you should move to the server side
Server-side rendering initially means every page is rendered and loaded from the server. The initial page is rendered from the server, meaning the subsequent pages load directly from the client.
Suppose, you want to share a link on social networking site, which reads the information from your link and the content on that link is dynamic then you must go for SSR rather than CSR.
React SSR Framework
I would recommend picking up a framework like Next.js if you want to render React on the server side. Alternatively, you may also turn your creat-react-app for server-side rendering.
Next.js
Next.js is a great framework with a great community around it. With Next.js, you don’t have to worry about bundling, minification or hot reloading, you get a lot of features out of the box.
