# 10 Rendering Patterns for Web Apps

- Channel: [Beyond Fireship](https://www.youtube.com/channel/UC2Xd-TjJByJyK2w1zNwY0zQ)
- Published: 2023-01-09
- Source video: [Watch on YouTube](https://youtube.com/watch?v=Dkx5ydvtpCA)
- Read on ReadTube: https://www.read.tube/p/videos/Dkx5ydvtpCA
- Language: Original (source language)

## Summary

**10 Web Rendering Patterns Explained**

Modern web development offers ten distinct rendering patterns, each with unique trade-offs regarding performance, user experience, and technical complexity. By understanding these approaches—ranging from traditional static sites and multi-page applications to modern paradigms like hydration, islands architecture, and resumability—developers can select the optimal strategy for their specific project needs.

Rendering patterns define how data and code transform into user-facing HTML. Choosing a strategy involves balancing performance, SEO needs, and developer complexity, ranging from basic static files to advanced hydration-free techniques.

- Static site generation: Pre-rendered pages served as static files.
- Multi-page application: Server-side rendering on every navigation request.
- Single page application: Client-side rendering via JavaScript shell.
- Server-side rendering: Dynamic server rendering with client-side hydration.
- Static site generation with hydration: Pre-rendered pages that become interactive via JavaScript.
- Incremental static regeneration: Background rebuilding of static pages to manage dynamic content.
- Partial hydration: Selectively hydrating specific page components.
- Islands architecture: Isolating interactivity to specific interactive components within static HTML.
- Streaming SSR: Sending server-rendered HTML chunks to the browser concurrently.
- Resumability: Serializing state into HTML to eliminate the need for hydration entirely.