Web Rendering Explained | CSR, SSR, SSG and ISR

I'll be the first to admit that I've long been ignorant to experimenting with various web rendering techniques. Having only worked primarily at organisations whose tech stacks only consist of single-page application frameworks that implement Client-Side Rendering I've been locked into thinking that the features and reactivity of all these modern frontend web frameworks such as Vue, Angular etc. far outweigh the benefits that any other rendering technique could ever possibly provide.

Oh how wrong I was... As always is the case with software development the landscape around us is forever changing and I've been left behind. Recently, I addressed an issue with a lot of my projects which included them using a suboptimal rendering technique for the use case. I did some research into the various methods being used today to render web applications and here are my findings on the main ones.

Client-Side Rendering (CSR)

Client-Side Rendering (CSR) renders pages on the user's device in the browser using JavaScript. When the user requests a page on the site, a static HTML response is served, containing the minimum amount of HTML required to render the application, usually including stylesheets and scripts.

Once the initial HTML has been parsed, JavaScript takes over and retrieves any data for the application, rendering the page. CSR shifts the rendering workload from the server to the browser, perfect for emulating a native app-like feel with faster transitions between pages. However, it typically results in a slower initial load and first contentful paint.

Advantages:

• Reduced Server Load: Shifts the rendering workload to the client, which can reduce server load.
• Great for Interactive Apps: CSR excels in applications with complex client-side interactions.

Disadvantages:

• Slower Initial Load: The initial page load may take longer due to the time required to fetch and render content.
• SEO Limitations: As content is rendered after the initial HTML load, search engines may struggle to index it correctly.

Use Cases: CSR is best suited for applications that require high interactivity or a native app-like feel where SEO is less critical. E-commerce and dashboard applications are good examples.

Server-Side Rendering (SSR)

Server-Side Rendering (SSR) renders pages on the server at request time. When a user requests a page, the server processes the request and fully renders the HTML for that page, including any updated data. This HTML is then returned to the browser.

Once this HTML has been parsed, the page content is displayed, and if there are any script tags, they will execute, initiating client hydration and making the app interactive.

Advantages:

• Fresh Content: The latest dynamic values are rendered into the HTML response.
• SEO-Friendly: Fully rendered HTML is sent to the client, which search engines can crawl effectively.
• Improved First Contentful Paint: When the browser receives the HTML response, it can immediately begin rendering it, reducing the time to First Contentful Paint.

Disadvantages:

• Slower Initial Load: Without an effective caching policy or poor implementation, rendering pages on the server for each request can result in slow page load times.
• Increased Server Load: The server must render HTML for every page, which can increase server load.

Use Cases: SSR is ideal for applications requiring dynamic data where SEO is crucial, such as news and social media applications.

Static-Site Generation (SSG)

Static Site Generation (SSG) renders pages at build time before they are deployed to a web server. When a user requests a page, the server instantly returns a pre-rendered static HTML response.

Once this HTML has been parsed, the page content is displayed, and if there are any script tags, they will execute, initiating client hydration and making the app interactive.

Advantages:

• Fast Initial Load Times: No server processing time; pages load instantly from a CDN.
• Scalable: Pre-generated files are easy to cache, making this approach highly scalable.
• SEO-Friendly: Fully pre-rendered HTML is sent to the client, which search engines can crawl effectively.
• Improved First Contentful Paint: When the browser receives the HTML response, it can immediately begin rendering it, reducing the time to First Contentful Paint.

Disadvantages:

• Limited Real-Time Updates: Content updates require a new build, which can delay the display of the latest information.

Use Cases: SSG is best suited for applications with content that rarely updates. Documentation sites and blogs are prime examples.

Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) combines the speed of SSG with the flexibility of SSR. It allows pages to be pre-rendered and then re-rendered at request time at specific intervals or through manual revalidation. When the user requests a page, the server responds with a pre-rendered HTML response. If it's time to revalidate, the server will re-render the page in the background so that the next user receives fresh content.

Once this HTML has been parsed, the page content is displayed, and if there are any script tags, they will execute, initiating client hydration and making the app interactive.

Advantages:

• Periodic Updates: The page can be re-rendered with the latest dynamic values and then cached.
• Fast Initial Load Times: The server responds instantly with a pre-rendered HTML response, improving page load times.
• SEO-Friendly: Fully pre-rendered HTML is sent to the client, which search engines can crawl effectively.
• Improved First Contentful Paint: When the browser receives the HTML response, it can immediately begin rendering it, reducing the time to First Contentful Paint.

Disadvantages:

• Eventual Consistency: Changes may not be immediate, as updates rely on the revalidation interval.

Use Cases: ISR can be used in any application that employs SSR or SSG. Applications that would benefit from the performance of SSG with the dynamic behaviour of SSR, like blogs with multiple new posts each day, can take advantage of ISR without needing to rebuild and deploy for every new post.

Comparison

Final Thoughts

Each rendering strategy has unique advantages and disadvantages, making it essential to evaluate the specific needs of your application. Choosing the right approach can enhance user experience, optimise server resources, and improve overall site performance. With a clear understanding of CSR, SSR, SSG and ISR developers can explore and implement a diverse toolkit to create responsive, performant web applications suited to their users' needs.