CSR vs SSR vs SSG vs ISR: Web Rendering Explained

What is a webpage rendering approach?

Four fundamental techniques govern how and when a webpage's HTML is generated: Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR). This choice determines how quickly a web page loads and how well it performs. CSR is when the browser builds the page using JavaScript after the initial request. The server sends a minimal HTML shell and a JavaScript file. The browser then downloads and runs the JavaScript, fetches necessary data, and constructs the page on the user's device. This method is ideal for highly interactive applications, but the initial load can feel slow because the browser has to do more work. SSR, on the other hand, has the server generate the HTML for each request. When a user requests a page, the server queries the database, renders the HTML, and sends the complete page to the browser. This approach delivers meaningful content quickly and is beneficial for dynamic pages needing fresh data and good SEO. However, it requires the server to handle rendering for every visitor, which can be demanding. SSG generates pages before any user requests them. During deployment, the framework renders all possible pages into static HTML files. When a user visits, the Content Delivery Network (CDN) serves the pre-generated file with almost no computation required, making SSG extremely fast. But content updates require rebuilding the entire site, which can be costly and time-consuming. ISR is a more efficient version of SSG. It generates static pages ahead of time but allows for selective regeneration. After a set period or revalidation, the framework can regenerate specific pages in the background without rebuilding the entire site. This approach balances the speed of SSG with the dynamic capabilities of SSR and CSR.

The shift towards hybrid rendering

The evolution of web development frameworks has led to a hybrid approach, where different rendering techniques are used within the same application. Modern frameworks like Next.js allow developers to mix and match these methods based on the needs of different pages. For instance, a dynamic dashboard might use SSR, static marketing pages might use SSG, a product catalog might use ISR, and highly interactive components might still rely on CSR within the same codebase. This flexibility is a significant advantage because it allows developers to optimize performance and user experience, tailoring the rendering strategy to the specific needs of each page.

Four paths to HTML

The Welcome Screen

When the small HTML shell plus the JavaScript come to your browser, user interaction with the app becomes a waiting game. The browser downloads that JavaScript, runs React, fetches the data, and builds the page on the user's device. For users, the initial load in CSR can feel slower because the browser has more work to do. The trade-off is that once the page is loaded, it can be more interactive and responsive to user actions.

The Server-Side Workflow

When a user requests a page in SSR, the server generates the HTML first. It might query a database, render the page, and then send the finished HTML to the browser. This approach ensures that users receive meaningful content immediately, which is useful for dynamic pages that need fresh data and good SEO. The trade-off is that the server has to do rendering work for every incoming request, which can be computationally expensive.

The Static Site Lifecycle

In SSG, the framework renders all possible pages into static HTML files during deployment. When a user visits, a CDN can just serve the already generated file. This makes SSG extremely fast, as there is almost nothing to compute on the server side. However, if the content changes, the entire site needs to be rebuilt, which can be costly and time-consuming.

The Incremental Advantage

Incremental Static Regeneration (ISR) builds on the strengths of SSG by allowing for selective regeneration. Imagine a product page generated at 10 a.m. Users keep receiving the fast cached version, and then the product price changes. ISR can generate a fresh version of that specific page without rebuilding every page on the site. This approach balances the speed of SSG with the dynamic capabilities of SSR and CSR, making it a practical choice for many web applications.

Where to start

For developers diving into these rendering techniques, consider the following:

• Assess your needs: Determine if your application requires highly interactive components, dynamic content, or static pages. Your choice of rendering technique will depend on these requirements.
• Explore frameworks: Modern web frameworks like Next.js offer built-in support for CSR, SSR, SSG, and ISR, making it easier to implement these techniques in your application.
• Test and iterate: Experiment with different rendering techniques and measure their impact on performance and user experience. Use tools like Lighthouse to audit your site's performance and make data-driven decisions.
• Consider hybrid approaches: Don't be afraid to mix and match rendering techniques within the same application. This can help you optimize performance and user experience for different parts of your site.

Foresight

Consider the future of web development, where rendering techniques will continue to evolve. Stay informed about the latest developments in web frameworks and rendering technologies, and be prepared to adapt your strategies as new techniques emerge. One way to consider rendering types is to think about the lifecycle from building to deployment time. Once you know the needs of your future app or site, rendering choices become clearer. With these insights, you can make informed decisions about when and where to generate HTML for your web pages, ensuring optimal performance and user experience.