Rendering Modes in React
Let's use a restaurant as an analogy.
- The food : the web pages
- Our table : client side
- The kitchen : server side
[Draft] TL;DR
| Rendering Type | Rendering / Page Generations Rendering Happens at | Rendering / Page Generation Happens during | Data Fetching / Network Call / Data availability happens at | Data Fetching happens during (freshness) | Data Freshness | JS Required for Rendering | Examples |
|---|---|---|---|---|---|---|---|
| SSG | Build Agent (local / server) | Build Time and Hydration at Client Side | [optional] Build Agent (local / server) | Build Time / Static / Hardcoded | Once / Static | 🟧 | 11ty, Hugo, jekyll, Nextra, Vitepress, Gatsby, Next.js SSG (getStaticSiteProps, getStaticPaths) / Next.js Default Rendering Mode, Astro |
| CSR | Client Side (user's browser) | Build Time, Client Side (after Hydration) | [optional] Client Side (user's browser) | Runtime / Static / Hardcoded | Every Request / Depends on the API's Cache header | ✅ | CRA, Vite React |
| SSR | Server Side and Hydrated at Client Side | Build Time, Server Side, then Hydration at Client Side | Server Side, could be partially Include Client Side fetching | Runtime | Every Request / Depends on the API's Cache header | 🟧 | Next.js SSR (getServerSideProps), Gatsby SSR, Remix, Astro |
| ISR | Server Side and Hydrated at Client Side | Build Time, Server Side, then Hydration at Client Side | Server Side, could be partially include Client Side Fetching | Runtime (after passing stale interval) | Depends on the revalidate interval / API's cache header | 🟧 | Next.js ISR, Gatsby DSR |
These terms could be obsolete in the near future with RSC streamings etc.
CSR (Client Side Rendering)
Let's imagine we go to a shabu shabu restaurant. We order the package and the food materials are served directly in our table. We cook it with the hotpot in the table. After it's cooked, we serve it in our plate. That is client side rendering, the client receive the packages, parsing it directly and serve the web pages. Example: create-react-app
SSR (Server Side Rendering)
Let's imagine we are going to a conventional restaurant. We see the menu first, pick some menu we want to order, waiting for the food to be cooked, and finally the food are served from the kitchen to our table. That is server side rendering, we request the page, the server process the requested page, and then we are served with parsed web page. We need to wait for the server to process the page before being served to client side. Example: Next.js getServerSide
SSG (Static Site Generation)
Let's imagine we are going to a fast-food restaurant. We just need to pick which one we want to eat, take the food and eat it right away. The menus are already cooked before we came. That is static site generation, the pages are really fast to load, it's already built at build time (before being deployed). Example: GatsbyJS
ISR (Incremental Static Regeneration)
This one I cannot use a restaurant analogy because it will be horrible 😆. But the point of Incremental Static Regeneration is to combine the best of both SSG and SSR. With SSG, we get a fast served page but the data is static, if we want to update the page we need to re-build it again. With SSR, we get a page which serve dynamic data but we need to wait for the server to process the page first. With Incremental Static Regeneration, we can get a fast served pages, but also updates itself when the data are updated. It's currently possible with Next.js since version 9.5 using getStaticPath + revalidate.