React is an open-source, front-end, JavaScript library for building user interfaces or UI components. As it’s a library it can be integrated with the existing application by adding relevant scripts and we can enable it.
React is a great library and is being widely used. When it comes to building applications like eCommerce most important factor is SEO. As the best place to hide a dead body is page two of google [a bit sarcastic term :-) ], So everyone wants to list their website on the top in the google search results to have more reach to their customers and generate more sales.
For listing the application on the top in google search results, google crawlers should be able to fetch the content of the website ( meta info, etc). so that it can present to the customers the relevant search results. For example, if some customer is searching for T-Shirts, google should know your eCommerce application has T-Shirts listed on it, and here comes in the picture the content rendering mechanism. Basically, there are two types of rendering client-side rendering [CSR] and server-side rendering [SSR].
In client side rendering (CSR) server sends the empty html and js bundles which actually renders on the client’s browser rather than on the website’s server while Server side rendering (SSR) follows the mechanism where server sends a fully packed html, css and js file which means that a website’s JavaScript is rendered on the website’s server.
Think of client-side rendering like ordering a cup of milk tea and getting hot water, tea bag, powder milk and sugar cube(s), etc and you need to make the tea by yourself. While server-side rendering is the case where we are getting the tea itself and just need to have a sip :-) ( i love tea btw)
As in CSR content renders on the browser and needs JavaScript enabled environment to render the content, so this is the reason google crawlers do not have information readily available and read it as the empty page ( though Google has made some changes in the crawling algorithms, but yet not that effective). Here are the examples of HTML content delivered by the server per rendering mechanism.
Client-side Rendering
Server-side Rendering
Though each rendering mechanism has its own pros and cons, It depends based on the requirement to choose the right one. Here are a few pros and cons for both.
Client-side rendering pros:
- Fast render after initial load
- Faster navigation
- Lower server load
- Remarkable for web apps
Client-side rendering cons:
- slower initial load
- unpredictable performance — you never know if your user will open and ‘compile’ your website on a mobile device with a very slow internet connection or not updated browser
- Client-side routing solutions can delay web crawling.
- SEO — if you not implement correctly
- Initial req loads the page, CSS, layout, js,
Server-side rendering pros:
- SEO friendly — SSR guarantees your pages are easily indexable by search engines
- Better performance for the user — User will see the content faster
- Social Media Optimization: When people try to post your link on Facebook, Twitter, etc. then a nice preview will show up with the page title, description, and image.
- Shared code with backend node
- User-machine is less busy
- Best for static sites
Server-side rendering cons:
- TTFB (Time to first byte) is slower; your server has to spend some time to prepare HTML for your page instead of sending almost empty HTML doc with a link to javascript
- The server will be busier, can execute fewer request per second
- HTML doc will be bigger
- The page is viewable sooner, but it’s not interactive and in the beginning, a user has to wait until react will be done executing
- Full page reload after routes change
Hope you have got some insights about CSR and SSR, in the next one we will discuss how Next.JS helps us in building applications having SSR features using React and deployment on node.js using custom server config.
Please write to me @ info.anishgarg@gmail.com for any queries.
Signing off for the day, Thanks a ton !! Have a nice time ahead.
