Websites can be loaded and displayed in various ways depending on the chosen rendering technique. In this article, we discuss four major techniques: Client Side Rendering (CSR), Server Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Generation (ISR). Additionally, we explain some related terms and compare the advantages and disadvantages of each method.

Key Terms

• CSR: Client Side Rendering – the browser loads an empty HTML page and fills it with content via JavaScript.

• SSR: Server Side Rendering – the server delivers a fully rendered HTML page to the browser.

• SSG: Static Site Generation – all pages are pre-rendered during the build process.

• ISR: Incremental Static Generation – specific pages are periodically re-rendered when the content changes.

• CDN: Content Delivery Network – a network of servers that quickly deliver static files.

• CI: Continuous Integration – a method to automatically build and test code with every change.

Client Side Rendering (CSR)

In Client Side Rendering, the browser receives an empty HTML page with a link to JavaScript and CSS files. The browser connects to the backend, retrieves data, and dynamically builds the page.

Advantages

• Flexible and suitable for dynamic content.
• Less dependent on server capacity during the initial render.

Disadvantages

• Can be heavy on the database with many users.
• The website’s speed depends on both the server and network speed

Server Side Rendering (SSR)

In Server Side Rendering, the full HTML page is generated on the server and sent to the browser. This means the browser directly receives a fully rendered page.

Examples

Technologies like PHP and Django use SSR. Many websites adopt this method for its stability.

Advantages

• Good SEO because the content is immediately available to search engines.
• Suitable for dynamic content.

Disadvantages

• Requires a hosting platform like Netlify or Vercel.
• Longer load time for the user due to server processing.

Static Site Generation (SSG)

In Static Site Generation, all pages are pre-rendered during the build phase. The result is a static website that is easy and fast to host.

Advantages

• Super-fast performance for end users.
• Easy to host on platforms like GitHub Pages.

Disadvantages

• Content cannot be updated immediately; a new build is required.
• Not suitable for highly dynamic applications.

Incremental Static Generation (ISR)

In Incremental Static Generation, specific pages are periodically re-rendered. This means only changed content is regenerated, while the rest remains untouched.

Advantages

• Ideal for semi-dynamic websites.
• Reduces the need for full rebuilds.

Disadvantages

• Not widely supported yet.
• Not always available in live environments.

Comparison

To compare these four techniques, we will consider following metrics.

• Build time - Less value the better.
• Suitable for Dynamic Content - If this value is high, that technique is more suitable for applications with lot of dynamic content.
• Search Engine Optimization - Most cases, it is best to have a good value for SEO.
• Page Serve/Render Time - How long it takes to render the full page in the web browser. Less value the better.
• Most Recent Content - Indication that it always delivers the latest content. More value the better.
• Static Server / App Server - Does this technique need to have a static server or an app server. Normally static servers consume lot less resources than the app servers.

Conclusion

Each rendering technique has its own advantages and disadvantages depending on your project’s needs. For dynamic applications, CSR and SSR are often the best choices. If speed and simplicity are important, SSG and ISR offer excellent solutions. Understand your project requirements well before choosing a method!