๐ฆ๐ฆ๐ฅ, ๐๐ฆ๐ฅ, ๐ฆ๐ฆ๐, ๐๐ฆ๐ฅ: ๐ช๐ต๐ฎ๐ ๐๐ฐ๐๐๐ฎ๐น๐น๐ ๐ ๐ฎ๐๐๐ฒ๐ฟ๐
A senior developer once asked me which rendering strategy I would use. I answered SSR with zero confidence. I knew the acronyms, but I did not understand the tradeoffs.
Every 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 HTML with fresh data.
- User sees content instantly. Use this for search results, user accounts, or live auction prices. Tradeoff: High server costs and database load.
๐๐ฆ๐ฅ (Client Side Rendering) The browser builds the page after downloading JavaScript.
- Server sends an almost empty HTML file.
- Browser downloads and runs JavaScript.
- Browser calls APIs to fetch data.
- User sees content after a few seconds. Use this for admin dashboards or tools behind a login. Tradeoff: Poor SEO and slow initial loads on bad connections.
๐ฆ๐ฆ๐ (Static Site Generation) You build every page once at deploy time.
- Framework generates HTML files for every page.
- Files live on a CDN.
- User gets the file in milliseconds. Use this for blogs, documentation, or marketing sites. Tradeoff: Content stays frozen until your next deploy.
๐๐ฆ๐ฅ (Incremental Static Regeneration) This gives you SSG speed with fresh data.
- You build pages at deploy time.
- Individual pages regenerate in the background.
- You can trigger a refresh when data changes. Use this for e-commerce sites or news feeds. Tradeoff: The first user to an uncached page waits for the rebuild.
๐ง๐ต๐ฒ ๐ฆ๐บ๐ฎ๐ฟ๐ ๐ ๐ผ๐๐ฒ Do not use one strategy for your entire app. Match the page to the data.
An e-commerce example:
- Homepage: SSG (rarely changes)
- Product pages: ISR (updates when stock changes)
- Search results: SSR (unique for every user)
- User dashboard: CSR (behind a login)
Stop thinking about framework choices. Start thinking about data. How often does it change? Who sees it? How bad is it if the data is 10 minutes old?
Answer those questions and the right strategy picks itself.
Source: https://dev.to/alaa-samy/ssr-csr-ssg-isr-i-was-confused-too-heres-what-actually-matters-305f