Which Is Faster: SSR, CSR, SSG or ISR? You’ll Be Surprised

There are different types of websites, such as multi-page websites, single-page applications, and static sites. Each type renders differently for various reasons.

Website rendering relies on strategies that determine how sites load their content. Some sites use the same rendering methods, and these strategies are important for performance, search engine optimization, scalability, and more.

Different rendering strategies are used depending on the type of website. For example, in an e-commerce website, the server often generates HTML content before sending it to the browser, which can result in faster loading.

In this article, we’ll discuss the different rendering strategies used for displaying web content.

What is a Rendering Strategy?

Rendering strategies are used to control how the contents of a web page are displayed when a user visits a website. They provide different methods for serving a website.

The browser typically displays a page by doing the following:

• Create Document Object Model (DOM) and CSS Object Model (CSSOM): When the page is being loaded, the web server sends all relevant files (HTML, CSS, and JavaScript files) to the client's browser.

• Parse HTML into the DOM: The browser converts data into characters, which are parsed into tokens, and then into nodes. The nodes are linked together to form a tree-like structure called the Document Object Model (DOM), which represents all elements on the page

• Parse CSS into CCSOM: In the same way, the browser processes CSS files and converts them into a structure called the CSS Object Model (CSSOM)

• Render Tree: The browser combines DOM and CSSOM into a Render tree that contains every information the browser needs to display content on the screen.

There are different rendering strategies and we will go through four common ones.

• Client-Side Rendering (CSR)

• Server-Side Rendering (SSR)

• Static Site Generation (SSG)

• Incremental Static Regeneration (ISR)

Let's explore each one to understand its significance.

What is Static-Site Generation?

This rendering strategy generates all HTML pages at build time and serves them when they are requested by the user.

The server doesn't need to generate page content during each request instead, it deliver pre-built HTML files.

An example of a website that uses Static Site Generation is a blog where each blog post is pre-built as an HTML page. This causes the site to load fast and also reduces the need for server-side processing.

Benefits and Limitations of Static Site Generation

Benefits of Static Site Generation

Fast and high-performing site: HTML pages are pre-built and served directly from the server, resulting in fast load times. This is great for websites where content does not change often, e.g., blogs

No need for Backend: Static sites often does not require a backend but when they do, they might rely on backend services or APIs for dynamic features or content when needed. Static websites are lightweight and do not require the server to perform a lot of tasks because they only serve pre-built HTML files.

Limitations of Static Site Generation

No Dynamic Content: SSG cannot be used for dynamic content that frequently changes.

Delayed Build Time for Large Sites: For static website containing thousands of pages, building the site can become slow which causes delay in publishing or updating content.

What is Server-Side Rendering

Server-side rendering is a technique where web content is generated on the server before it's sent to the browser to display.

When you visit a webpage, your request is processed by the server. The server generates the HTML content for the web page and also send the JavaScript code that applies dynamic styles or fetch data from a different server or APIs.

In simpler terms, the server sends the generated content to the user's browser, and the browser displays it, which is what you see on your screen. SSR use cases include; websites with real-time data, social media field, user dashboard, etc.

Server-side rendering is used in different cases, including:

Websites with heavy content: Some websites have a lot of content, so content is generated and fully prepared on the server first before is sent to the browser. This reduces the amount of JavaScript the browser needs to run, helping the website load faster.

SEO Optimization: Using SSR improves how search engine index a website which can enhance the search ranking and increase the number of visitors to the website.

Benefits and Limitations of Server-Side Rendering

Benefits of Server-Side Rendering

Key benefits of server-side rendering include:

Performance Optimization: Server-side rendering can improve the performance of a website by reducing the task or workload the browser has to handle.

Since the server is responsible for rendering the content before sending it to the browser, it causes the web page to load faster. This causes a smooth and seamless user experience.

Improved User Experience: Server-side rendering generates a fully rendered page when a user visits a website, which improves how fast content is displayed and provides a better browsing experience for users.

Search Engine Optimization: For a website to be visible in search results, search engines use web crawlers to index and rank pages. SSR generates server-rendered HTML, making it easy for web crawlers to index the website. This improves the website's visibility and ranking.

Limitations of Server-Side Rendering

The Downside of Server-side rendering

Increased Load for Large Applications: Large and complex applications can increase the server load because the server generates HTML for each request, which can lead to longer loading times.

Slow Navigation: SSR can cause navigation between pages feel slow because every request reloads or refreshes the entire page. Meanwhile, client-side applications can update parts of a page without reloading the entire page.

Slow Interactivity: SSR can cause delay with certain interactive features, like buttons or other dynamic elements. The reason is interactivity may not work except JavaScript is first downloaded and executed on the client-side.

Client-Side Rendering

With client-side rendering, the server doesn't serve the page in full; it sends a basic HTML file, while the browser loads the actual content using JavaScript to deliver a responsive and interactive web page.

When a user requests a webpage, the server receives the request, and sends the initial HTML file. The browser then parses the HTML file and constructs a DOM tree, which represents the structure of the web page. Afterwards, the browser sends any other request to the server to download the CSS and JavaScript resources.

The browser renders the web page using the DOM tree and the CSS files. It executes JavaScript code, adding interactive and dynamic contents to the page (e.g. animations), and re-renders parts of the web page in response to the user's action.

The updated DOMs dynamic data is rendered by the browser, giving the user an interactive and dynamically updated webpage.

Benefits and Limitations of Client-Server Rendering

Benefits of Client-Server Rendering

Interactive User Experience: CSR allows pages update more dynamically, which can improve user experience by making the content of the web page interactive.

Server Load Reduction: The browser handles building and displaying the content of the web page, while the server may only send some minimal HTML content, and important data. Since the server handles very few tasks it's not strained reducing load time. However, servers may still handle API in larger applications.

Smooth Transition: The browser doesn't reload the entire web page with CSR; it only updates parts that changes. This results in smooth and quick navigation between pages.

Real-time Interactions: CSR uses JavaScript to update users in real time without reloading the page. This could be in form of updating content while scrolling or showing real-time data.

Resource Loading: In CSR when the initial content of the web page is loaded, other resources can be loaded in the background and fetched only when needed. This can improve performance and reduce load time for complex applications.

Limitations of Client-Side Rendering

Poor SEO: Bots and crawlers that search engines use to crawl websites; index server-side rendered sites better than client-side websites.

Websites rendered on the client-side may not be discovered in a search, which can reduce visibility or ability to generate organic traffic which is important for blogs, ecommerce or websites that rely on visibility for client conversion.

Increase in Page Load Time: Client-side rendering can increase page load times because the browser is in charge of downloading all content and executing JavaScript files before rendering the entire web page.

Incremental Static Regeneration (ISR)

This is a rendering strategy used in Next.js, a popular React framework for building web applications.

Using the ISR technique, some pages are generated as static HTML at build time, while others can be regenerated in the background upon a user's request. This allows the content to update without requiring full rebuild of the entire site.

The process is simply as follows;

• Static page is generated during the build process

• When a user requests a page, the initial static HTML page is displayed.

• Depending on how it is set up, if the time set for updating has expired, Next.js will regenerate the page behind the scenes and display the updated version on future requests.

Use cases for ISR include product pages, and websites with large content like documentation platforms, or blogs.

Importance and Limitations of Incremental Static Regeneration

Importance of Incremental Static Regeneration

Performance: Users experience faster load times because the ISR server pre-renders static pages and regenerates them only when updates are necessary.

Scalability: ISR improves scalability by reducing server load as it serves static pages initially and regenerates them only when necessary.

Limitations of ISR

Not Ideal for Real Time Applications: ISR is not suitable for applications that require instant updates, as it only generates pages in the background when a user requests a resource.

Complex Cache: Managed cache can be complex when your site runs in different locations simultaneously. Updates need to be coordinated and kept in sync so that users don't see outdated content.

Summary

Websites are rendered differently based on the purpose they serve. SSR, CSR, ISR, and SSG are rendering strategies are used in web development.

These strategies affect how a website performs in terms of scalability, performance, SEO, and user experience. For example, SSG and ISR strategies serve pre-built pages, making websites load faster reducing server load, while SSR generates content on the server which can improve SEO.

In summary, these strategies help web applications deliver content efficiently, improving performance and user experience. Therefore, choosing the right rendering strategy depends on the type of app you want to build.

Frequently Asked Questions