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 ModeCharacteristicsUse Cases
CSRExecutes JavaScript in the browser to render pagesApplications with strong interactivity and low SEO requirements
SSRPre-renders complete HTML pages on the serverWebsites with high requirements for first-screen performance and SEO
Streaming SSRRenders and returns progressively, displaying initial UI fasterApplications requiring faster first-screen perception speed (Default SSR mode)
RSCComponents render on the server, reducing client JS size; high cohesion between data and component logic, reducing state passingProjects pursuing optimal performance and needing to reduce client-side code
SSGGenerates static pages at build time, can be cached by CDNWebsites with relatively static content, such as blogs and documentation sites

Performance Comparison

Rendering TechnologyCore AdvantagesMain Bottlenecks
SSRServer-side pre-rendering, beneficial for SEOMust wait for all data to load before responding
Streaming SSRRenders and returns progressively, faster first screenJS bundle size is still large
Streaming SSR + RSCReduces client JS size-

How to Choose

Quick Decision Guide

  • Static Content + SEO RequiredSSG
  • SEO Required + First Screen PerformanceStreaming SSR (default)
  • Pursuing Optimal PerformanceStreaming SSR + RSC
  • CSR Project Gradual OptimizationCSR + RSC
  • Highly Interactive + No SEO NeededCSR

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