> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Rendering Mode Overview

Modern.js supports multiple rendering modes, and different rendering modes are suitable for different scenarios. Choosing the right rendering mode can significantly improve application performance and user experience.

## Rendering Mode Quick Reference

| Rendering Mode    | Characteristics                                                                                                                  | Use Cases                                                                          |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| **CSR**           | Executes JavaScript in the browser to render pages                                                                               | Applications with strong interactivity and low SEO requirements                    |
| **SSR**           | Pre-renders complete HTML pages on the server                                                                                    | Websites with high requirements for first-screen performance and SEO               |
| **Streaming SSR** | Renders and returns progressively, displaying initial UI faster                                                                  | Applications requiring faster first-screen perception speed (**Default SSR mode**) |
| **RSC**           | Components render on the server, reducing client JS size; high cohesion between data and component logic, reducing state passing | Projects pursuing optimal performance and needing to reduce client-side code       |
| **SSG**           | Generates static pages at build time, can be cached by CDN                                                                       | Websites with relatively static content, such as blogs and documentation sites     |

## Performance Comparison

| Rendering Technology    | Core Advantages                                        | Main Bottlenecks                                 |
| ----------------------- | ------------------------------------------------------ | ------------------------------------------------ |
| **SSR**                 | Server-side pre-rendering, beneficial for SEO          | Must wait for all data to load before responding |
| **Streaming SSR**       | Renders and returns progressively, faster first screen | JS bundle size is still large                    |
| **Streaming SSR + RSC** | Reduces client JS size                                 | -                                                |

## How to Choose

### Quick Decision Guide

- **Static Content + SEO Required** → **SSG**
- **SEO Required + First Screen Performance** → **Streaming SSR** (default)
- **Pursuing Optimal Performance** → **Streaming SSR + RSC**
- **CSR Project Gradual Optimization** → **CSR + RSC**
- **Highly Interactive + No SEO Needed** → **CSR**

### Combining Modes

Modern.js supports combining multiple rendering modes:

- **Streaming SSR + RSC**: Streaming rendering + reduced client-side code
- **SSG + SSR**: Some pages static, some pages dynamic
- **CSR + RSC**: Client-side rendering + partial Server Components

## Related Documentation

- [Server-Side Rendering (SSR)](/guides/basic-features/render/ssr.md)
- [Streaming Server-Side Rendering (Streaming SSR)](/guides/basic-features/render/streaming-ssr.md)
- [React Server Components (RSC)](/guides/basic-features/render/rsc.md)
- [Static Site Generation (SSG)](/guides/basic-features/render/ssg.md)
- [Rendering Cache](/guides/basic-features/render/ssr-cache.md)