The evolution of the web has given rise to many innovative ways through which servers render and deliver web pages to the browser. some of which include server-side rendering(SSR), client-side rendering(CSR), server-side generation(SSG) and incremental Static regeneration/revalidation(SSR).while most of these techniques have brought immense improvement in website load/delivery speed, they also have their use cases, pros, and cons. In this article, we dive a little bit deeper, taking a behind-the-scenes look at how these techniques work and when to use them.
Client-side rendering (CSR)
With client-side rendering, when a request is made to the server, the server responds with a blank HTML file and a javascript bundle. the javascript now builds the Dom(HTML elements) from scratch based on some virtual Dom(React virtual Dom) in a case where the app is built with react. hence depending on the bundle size returned to the browser, the user usually will see a blank screen for some seconds before the website information is then displayed.
steps involved in client-side rendering
The user makes a request to the server
The server returns a blank HTML page
The browser fetches and downloads the JS bundle
JS constructs HTML UI and makes it interactive(attaches necessary event handlers)
Any request to 3rd party API's are made
Users can now fully interact with web page
when to use client-side rendering
Client-side rendering is best used in web applications with large complex features and pages.
pros
Reduced server-side workload
Reduced server cost
A better client experience
cons
Poor SEO, since the initial page sent to the browser, is empty, web crawlers can't index the content of the page
Slow initial load due to the fact that the dom is being constructed on the client side.
Server-side rendering(SSR)
With Server side rendering, when a request is made to the server for a page, the server fetches relevant data for that page from the backend, constructs the full HTML page, and sends it back to the browser which will now become visible.
Note: even if javascript is disabled in our browser, we still see the full page, but can't interact with it.
Hence with server-side rendering, we construct the full HTML page on the server and return it to the browser.
when to use server-side rendering
SSR can be used on websites in which SEO is crucial. or in situations where each user has unique content shown on the initial load
pros
Easy indexing by search engines
Fast load times especially in case of a slow connection
cons
High server load, since the server has to build the page on every request
Slower transition between pages in the application
Server side generation(SSG)
This is also called Static site generation. with SSG, the server builds our website page together with its static assets once and serves it on a CDN(content delivery network). any subsequent request for a web page is served from the CDN.In SSG, pages are usually generated during application build time
when to use server-side generation
SSG can be used for websites whose content does change very often e.g blogs
pros
High-performance thanks to CDN caching
The static HTML page will always be served even if the backend is down
cons
- The content of the page served by the CDN can easily get outdated in case of rapidly changing content.
Incremental static regeneration(ISR)
This concept is mostly popular with Nextjs. ISR is very similar to SSG, they work basically the same, but ISR goes an extra step. After the static page is served on the CDN, and after some interval, the page on the CDN is then invalidated and a new version of the page is regenerated with fresh data. with this, we can use SSG with data that is frequently changing.
when to use incremental static regeneration
we can use ISR with websites where we want to get fresh updates delivered to the customer per page basis without having to redeploy the site and with the benefits of SSG.
pros
Less server load
content delivery is very fast
rebuilding/deploying the website to display fresh content is not needed.
cons
- Might need extra configuring steps
These page rendering techniques are used in different situations and have several pros and cons. most modern applications will often make use of more than one e.g SSG + CSR or ISR + CSR.combining these techniques provide an amazing way of getting the best of both worlds, be it website performance or SEO.