Rendering

There are several approaches and techniques for rendering web pages, with each having unique benefits and caveats.

Main Approaches

There are three main approaches.

1. Server-Side Rendering (SSR): Renders HTML on server per request.
2. Static Site Generation (SSG): Builds all pages at compile time.
3. Client-Side Rendering (CSR): Browser handles all rendering via JS.

Each approach is good at specific use cases:

Approach	Perfect For	Avoid For
SSR	Dynamic dashboards, Social networks	Static content sites
SSG	Blogs, Documentation	User-specific content
CSR	Web apps, Admin panels	Content marketing

Hybrid Solutions

As there are trade-offs with each main approach, a number of hybrid solutions have been explored.

1. Islands Architecture: Static HTML with interactive "islands"

   <static-header>
     <interactive-search> 
   </static-header>
   <static-content>
   

2. Incremental Static Regeneration: Static + background revalidation

These are optimal at more use cases:

Approach	Perfect For	Avoid For
Islands	Content + Interactivity	Complex applications
ISR	E-commerce, Dynamic content	Real-time data

Comparison

Core Metrics

Approach	Initial Load	Time to Interactive	SEO	Server Load	Build Time	Development UX
SSR	Fast	Slow	Excellent	High	None	Medium
SSG	Fastest	Medium	Excellent	None	High	Easy
CSR	Slow	Fastest	Poor	Low	Low	Easy
Islands	Fast	Medium	Excellent	Low	Medium	Complex
ISR	Fast	Medium	Excellent	Medium	Medium	Medium

Data Handling

Approach	Real-time	User-specific	Cache-friendly	Update Speed
SSR	Excellent	Excellent	Poor	Instant
SSG	Poor	Poor	Excellent	Build only
CSR	Excellent	Excellent	Medium	Instant
Islands	Good	Good	Excellent	Mixed
ISR	Good	Medium	Excellent	Background

Resource Usage

Approach	Memory	CPU	Bandwidth	Storage
SSR	High	High	Low	Low
SSG	Low	Low	Lowest	High
CSR	Low	Medium	High	Low
Islands	Medium	Medium	Medium	Medium
ISR	Medium	Medium	Low	High

Developer Experience

Approach	Learning Curve	Debugging	Testing	Deployment
SSR	Medium	Hard	Medium	Complex
SSG	Easy	Easy	Easy	Simple
CSR	Easy	Medium	Easy	Simple
Islands	Hard	Hard	Hard	Medium
ISR	Medium	Medium	Medium	Complex

Framework Support

Approach	Next.js	Remix	Astro	SvelteKit	Nuxt
SSR	✅	✅	⚠️	✅	✅
SSG	✅	❌	✅	✅	✅
CSR	✅	❌	❌	✅	✅
Islands	❌	❌	✅	❌	❌
ISR	✅	❌	❌	⚠️	✅

✅ Full support

⚠️ Partial support

❌ No native support