Different Frontend Rendering Strategies

When a user loads a web page, several rendering strategies can be used depending on performance, interactivity, and server cost requirements. This article details the different approaches, explaining how they work from the initial request to JavaScript execution and the activation of user interactions.

The strategies covered include:

• Static Rendering (SSG - Static Site Generation)
• Server-Side Rendering (SSR)
• Client-Side Rendering (CSR)
• Incremental Static Regeneration (ISR)
• Stale While Revalidate (SWR)
• Hybrid Rendering

Each strategy is characterized by how the page is served (pre-generated or rendered on the fly), the role of JavaScript in the final output, and how user interactions are managed once the page is loaded.

1. Static Rendering (SSG - Static Site Generation)

Principle

Pages are generated at build time and served as-is to users. The server or CDN simply returns a ready-to-use HTML/CSS/JS file.

Technical Process

• Site Build: Each page is pre-generated during deployment.
• CDN Storage: The content is distributed across a network of servers.
• User Request: The user receives the ready-made HTML file immediately.
• JavaScript Execution: Once the page is displayed, JavaScript executes to activate interactions.

Advantages

• Extremely fast due to direct delivery from the CDN.
• Low server load, as everything is pre-generated.
• SEO-friendly, as content is immediately accessible to search engines.
• Ideal for static sites (blogs, documentation, landing pages).

Disadvantages

• Cannot personalize content based on the user at load time.
• Updating data requires a complete site rebuild.

2. Server-Side Rendering (SSR)

Principle

The server dynamically generates the HTML page for each request before sending it to the client.

Technical Process

• User Request: The user accesses a URL.
• Server Rendering: The server creates a complete HTML page based on dynamic data.
• Response Delivery: The pre-filled page is sent to the user.
• JavaScript Execution: JavaScript runs to activate interactions.

Advantages

• SEO-friendly, as content is immediately accessible to search engines.
• Suitable for sites with personalized dynamic content (dashboards, SaaS applications).
• Provides a faster initial page load compared to pure Client-Side Rendering.

Disadvantages

• Higher server load since each request requires server-side rendering.
• Increased latency compared to a static site due to on-the-fly HTML generation.

3. Client-Side Rendering (CSR)

Principle

The server sends a minimal HTML file, and JavaScript builds the interface on the client side.

Technical Process

• User Request: The user receives a basic HTML file containing a minimal container.
• JavaScript Execution: JavaScript retrieves data via APIs and generates the interface.

Advantages

• Highly dynamic, ideal for rich, complex applications.
• Low server load, as everything is managed on the client side.

Disadvantages

• Longer initial load time while waiting for JavaScript execution.
• Less SEO-friendly without pre-rendering or a hybrid approach.

4. Incremental Static Regeneration (ISR)

Principle

An enhanced version of SSG that allows on-the-fly regeneration of static pages without a full site rebuild.

Technical Process

• User Request: If a page already exists, it is served from the CDN. If not, it's like SSR.
• Expiration and Regeneration: Once the page's expiration time is reached (e.g., 1 hour), a new version is generated in the background.
• Silent Update: The new version silently replaces the old one.
• JavaScript Execution: JavaScript executes to activate interactions on the updated version.

Advantages

• Fast delivery via the CDN.
• Updates data without needing a complete rebuild.

Disadvantages

• The first request after expiration may briefly display an outdated version.

5. Stale While Revalidate (SWR)

Principle

This strategy handles data fetching on the client side: cached data is displayed immediately, and new data is fetched in the background.

Technical Process

• Immediate Display: Cached data is shown instantly.
• Background Fetching: New data is loaded silently in the background.
• Interface Update: The display updates as soon as the updated data is available.

Advantages

• Perceived as almost instantaneous loading.
• Enhances user experience for applications with constantly changing data.

Disadvantages

• May briefly display outdated data.

6. Hybrid Rendering

Principle

A combined approach that integrates multiple strategies:

• SSG for static content,
• SSR for dynamic content,
• CSR for specific interactions,
• ISR/SWR for data updates.

This method maximizes performance by leveraging the advantages of each approach.

You can also combine in the same page SSG with CSR.

Conclusion

The choice of rendering strategy depends on the specific context and requirements of the project. A simple showcase website might rely solely on SSG, while a dynamic SaaS application could benefit from a hybrid rendering approach that combines SSR, ISR, and SWR.

The goal remains to optimize user experience while reducing server load and page load times, ensuring efficient JavaScript execution to activate interactions.