Rendering Architectures
🌱 seedling
There are currently a number of different rendering techniques
- Single Page Application (SPA)
- Apps that run entirely in the browser
- Multi-Page Application (MPA)
- Apps that run entirely on the server, with minimal client-side dynamic behavior
- Static Site Generation (SSG)
- Static content pre-rendered at build time, with or without a client-side dynamic element
- Server-Side Rendering (SSR)
- Dynamically rendering HTML content on the server on request, before rehydrating it on the client
- Partial Hydration
- Only hydrating some of your components on the client (e.g., React Server Components)
- Progressive Hydration
- Controlling the order of component hydration on the client
- Islands Architecture
- Isolated islands of dynamic behavior with multiple entry points in an otherwise static site (Astro, Eleventy)
- Progressive Enhancement
- Making sure an app is functional even without JavaScript
- Incremental Static Generation
- Being able to dynamically augment or modify a static site even after the initial build (Next.js ISR & on-demand revalidation, Gatsby DSG)
- Streaming SSR
- Breaking down server-rendered content in smaller streamed chunks
- Resumability
- Serializing framework state on the server so the client can resume execution with no duplicated code execution.
- Edge Rendering
- Altering rendered HTML at the edge before sending it on to the client
- Partial Prerendering
- Render a route with a static loading shell, while keeping some parts dynamic