Introduction

In today’s web development landscape, multiple rendering strategies compete to strike the perfect balance between initial load speed and interactive responsiveness, while maintaining strong SEO and minimizing the amount of JavaScript downloaded. In this post, we’ll cover five core approaches—CSR, SSG, SSR, ISR, and PPR—as well as the Prerendered SPA model.

1. What Is CSR (Client-Side Rendering)

• Definition: The entire interface is built in the browser after downloading a minimal HTML shell and JavaScript bundles.
• How It Works:
  1. The server sends a mostly empty HTML page with links to JavaScript files.
  2. In the browser, those scripts run to construct the DOM and update content in response to user interactions (e.g., clicks or form inputs).
• Advantages:
  • Seamless SPA experience.
  • Full control over application state.
• Drawbacks:
  • Slow initial load, especially on low-powered devices.
  • SEO challenges unless you implement prerendering or dynamic rendering.

2. What Is SSG (Static Site Generation)

• Definition: HTML pages are pre-rendered into static files at build time.
• How It Works:
  1. During the build process, modern frameworks invoke special data-fetching functions to generate final HTML pages.
  2. Those static HTML files are then deployed to a CDN.
• Use Cases:
  • Blogs and documentation sites.
  • Marketing landing pages.
• Advantages:
  • Extremely fast loading (served directly from CDN).
  • Predictable content, easy to cache.
• Drawbacks:
  • Content updates require a full rebuild (unless you use ISR).

3. What Is SSR (Server-Side Rendering)

• Definition: HTML is generated on the server for each incoming request.
• How It Works:
  1. On each page request, frameworks call specified data-fetching functions to build dynamic HTML on the server.
  2. The server returns fully rendered HTML to the browser.
• Advantages:
  • SEO-friendly, since complete HTML is delivered.
  • Always fresh content without rebuilds.
  • Users see ready-to-go content instead of an empty shell.
• Drawbacks:
  • Higher server response time due to on-the-fly rendering.
  • Increased server load under heavy traffic.

4. What Is ISR (Incremental Static Regeneration)

• Definition: A hybrid of SSG and SSR, allowing static pages to be regenerated incrementally without a full site rebuild.
• How It Works:
  1. Pages are generated at build time.
  2. After a specified revalidate interval, the next request triggers a background regeneration of the page.
• Advantages:
  • Combines SSG speed with SSR freshness.
  • Reduces overhead of full rebuilds.
• Drawbacks:
  • The first visitor after expiration may see the stale version while regeneration runs in the background; subsequent visitors get the updated page.

5. What Is PPR (Partial Pre-Rendering)

• Definition: A modern approach that pre-renders the static scaffold of a page and streams the dynamic parts afterward.
• How It Works:
  1. A static HTML template is served from the CDN immediately.
  2. Streaming SSR and progressive hydration techniques fill in dynamic content progressively.
• Advantages:
  • Instant first-byte and structure rendering with dynamic interactivity to follow.
  • Reduced JavaScript sent to the browser via partial hydration.
• Drawbacks:
  • Still experimental; requires advanced configuration.
  • Currently available in Next.js 14+ and emerging in other frameworks.

6. What Is Prerendered SPA

• Definition: Combines SSG for initial HTML and SPA behavior for in-page interactivity without full page reloads.
• How It Works:
  1. During build, static HTML and accompanying JSON are generated.
  2. After load, hydration turns the page into a fully interactive app.
  3. Internal navigation uses client-side routing without full page requests.
• Benefits:
  • Excellent first-load performance thanks to static HTML.
  • Smooth SPA-style user experience post-load.

Note: This blog is built using this technique with SolidJS Start.

7. Comprehensive Comparison of Techniques

Conclusion

Each strategy has its place and strengths:

• CSR is best for fully dynamic front-end applications.
• SSG/ISR shine for mostly static content with occasional updates.
• SSR ensures the freshest content and strong SEO out of the box.
• PPR is a promising technique for instant static structure with streamed dynamic updates.
• Prerendered SPA gives you the best of SSG and SPA together, as demonstrated here with SolidJS Start.

I hope this overview clarifies the differences and helps you choose the right approach for your projects. 😊