Rendering Strategies

Translated from German using DeepL.

Date: March 2025
Reading time: 3 minutes

There are various ways to generate markup from code, which is presented to the user in the browser. Four common strategies are described below.

The following information is based on research and in particular on an article in the Vercel blog "How to Choose the Best Rendering Strategy for Your App" (opens in a new tab). The most important points have been extracted and summarized as a cheat sheet.

🚧 Build Server
🧠 Cache
👨🏻‍💻 Client
📄 Code
🗄️ Data
📁 Network server

Static Site Generation (SSG)

Restaurant analogy: ready meals

During the build, static HTML files are created, which are later delivered efficiently.

Architecture

📄 -----------> 🚧 (Build)
				🚧 -----------> 🗄️ (Fetch)
				🚧 <----------- 🗄️ (cache)
				🚧 -----------> 📁 (Deploy)

👨🏻‍💻 -----------> 📁 (Request)
👨🏻‍💻 <----------- 📁 (Response)

Advantages

• Efficient
• Performant
• SEO optimized
• Low server load

Disadvantages

• Long build time for large sites
• New build and new deployment with every content adjustment

Area of application

For static content.

• Performance-critical pages
• Pages with a small build

Incremental Static Regeneration (ISR)

Restaurant analogy: warming up cold dishes

Data is not yet taken into account during the build, but is only loaded with the first client request and then saved in the cache.
This solves the problem of SSG scalability, as specific pages can be updated.

Architecture

📄 -----------> 🚧 (Build)
				🚧 -----------> 📁 (Deploy)

👨🏻‍💻 -----------> 📁 (Request)
				📁 -----------> 🧠 (Fetch)
								🧠 -----------> 🗄️ (Fetch)
								🧠 <----------- 🗄️ (Cache)
				📁 <----------- 🧠 (Response)
👨🏻‍💻 <----------- 📁 (Response)

👨🏻‍💻 -----------> 📁 (Request)
				📁 -----------> 🧠 (Fetch)
				📁 <----------- 🧠 (Response)
👨🏻‍💻 <----------- 📁 (Response)

Advantages

• Performance
• Updated content without entire rebuilds
• Scalability
• Cost efficiency compared to SSR (in some cases)

Disadvantages

• Performance of the first request
• (Cache invalidation must be carefully configured)

Area of application

For regularly updated content (or if build times are too long with SSG).

• E-commerce product pages
• Large content pages

Server-Side Rendering (SSR)

Restaurant analogy: cooking the dish when the order is received

Page is generated for each individual request.

Architecture

📄 -----------> 🚧 (Build)
				🚧 -----------> 📁 (Deploy)

👨🏻‍💻 -----------> 📁 (Request)
				📁 -----------> 🗄️ (Fetch)
				📁 <----------- 🗄️ (Cache)
👨🏻‍💻 <----------- 📁 (Response)

Advantages

• Up-to-date data
• (Better performance than client-side fetches)
• (Better for SEO than client-side fetches)

Disadvantages

• Performance
• Server load

Area of application

For real-time data and personalized content.
(If you need too much new data for ISR).

• Dashboards
• Social media
• Real-time data visualizations

Client-Side Rendering (CSR)

Restaurant analogy: Customer receives ingredients, but cooks himself JS is used to render dynamic content in the browser.

Architecture

CSR can be used in combination with the previous strategies to extend parts of a page with dynamic functionality.

Advantages

• Interactivity
• Seamless transitions

Disadvantages

• Performance
• SEO

Area of application

Interactive elements where CSR offers a faster response than a server request.

• Interactions with direct feedback
• Background tasks (e.g. content synchronization)
• Real-time data visualizations

Comparison

* First request like SSR, then like SSG.
** Can be improved with CSR.

Conclusion

Rendering strategies each offer specific advantages and challenges that must be taken into account depending on the application and requirements. There are a variety of established methods, and new approaches are constantly emerging, such as Partial Prerendering (PPR) (opens in a new tab), which offer additional possibilities. It is crucial to select the appropriate strategy and remain flexible in order to optimize performance and user experience. Often different approaches can be combined to achieve the best possible results.