๐ฆ๐ฆ๐ฅ, ๐๐ฆ๐ฅ, ๐ฆ๐ฆ๐, ๐๐ฆ๐ฅ โ ๐๐ฒ๐ฟ๐ฒ ๐๐ ๐ช๐ต๐ฎ๐ ๐ ๐ฎ๐๐๐ฒ๐ฟ๐
A senior developer once asked me which rendering strategy I would use for a project. I said "SSR" without any confidence. I knew the terms but did not understand the trade-offs.
Every rendering strategy answers one question: when and where does your HTML get built?
๐ฆ๐ฆ๐ฅ (Server-Side Rendering) The server builds HTML fresh for every request.
- User clicks a link.
- Server queries the database.
- Server builds the page with fresh data.
- Browser receives a complete page. Use this for:
- Search results.
- User account settings.
- Real-time data like live auction prices. Trade-off: High server costs and database load during traffic spikes.
๐๐ฆ๐ฅ (Client-Side Rendering) The server sends an empty HTML file. The browser builds the page using JavaScript.
- Server sends a basic file and a JS bundle.
- Browser downloads and runs the code.
- Browser fetches data from APIs.
- User finally sees the content. Use this for:
- Dashboards behind a login.
- Highly interactive tools like Figma or Notion. Trade-off: Poor SEO and slower initial load times on weak connections.
๐ฆ๐ฆ๐ (Static Site Generation) You build every page once at deployment time.
- Framework generates HTML files during the build.
- Files live on a CDN.
- User receives the pre-built file instantly. Use this for:
- Blogs.
- Documentation.
- Marketing landing pages. Trade-off: Content is frozen. You must redeploy the whole site to fix a typo.
๐๐ฆ๐ฅ (Incremental Static Regeneration) This gives you the speed of SSG with the freshness of SSR. It rebuilds individual pages in the background.
- You set a timer or trigger a manual update.
- Only the changed page regenerates.
- The rest of the site stays fast on the CDN. Use this for:
- E-commerce product pages.
- News sites.
- Job boards. Trade-off: The very first user after an update might face a slower load.
๐๐ผ๐ ๐๐ผ ๐ฐ๐ต๐ผ๐ผ๐๐ฒ: Ask these four questions:
- Does SEO matter for this page?
- Is the content unique to one user?
- How often does the data change?
- How many total pages do you have?
Stop choosing one strategy for your whole app. Use SSG for marketing, ISR for products, SSR for search, and CSR for dashboards.
Source: https://dev.to/alaa-samy/ssr-csr-ssg-isr-i-was-confused-too-heres-what-actually-matters-305f