{"componentChunkName":"component---src-templates-blog-post-blog-post-js","path":"/rendering-methods/","result":{"data":{"site":{"siteMetadata":{"title":"girgetto.it"}},"markdownRemark":{"id":"64505be7-79ae-5dd9-ab3f-8c4e5501236e","excerpt":"Modern frontend frameworks give developers several strategies for delivering content to the browser. Choosing the right one dramatically affects performance…","html":"

Modern frontend frameworks give developers several strategies for delivering content to the browser. Choosing the right one dramatically affects performance, SEO, and user experience. This post covers the four most important rendering methods β€” CSR, SSR, SSG, and Hydration β€” with a diagram for each.

\n
\n

Client-Side Rendering (CSR)

\n

In CSR the browser downloads a minimal HTML shell and a JavaScript bundle. The JS then runs in the browser, fetches data, and constructs the full page on the client.

\n

Frameworks: React (CRA / Vite SPA), Vue (Vite SPA), Angular

\n
\nsequenceDiagram\n participant B as 🌐 Browser\n participant S as πŸ–₯️ Server\n\n B->>S: GET /index.html\n S-->>B: Empty HTML ⟨div id=\"root\"⟩⟨/div⟩\n B->>S: GET /bundle.js\n S-->>B: bundle.js (~500 KB)\n Note over B: JS executes β€” builds the DOM\n B->>S: fetch('/api/data')\n S-->>B: JSON data\n Note over B: UI fully rendered βœ…\n
\n

How CSR works step by step

\n
    \n
  1. Browser requests the page β†’ server returns a nearly empty HTML file
    2. \n
  2. Browser downloads the JavaScript bundle
    3. \n
  3. JS runs in the browser and builds the DOM
    4. \n
  4. Data is fetched from APIs and the UI is rendered
    5. \n
\n
\n

⚠️ The page is completely blank until the JS bundle has downloaded and executed. This hurts both perceived performance and SEO crawlers that don't run JS.

\n
\n

Pros and Cons

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
βœ… Pros❌ Cons
Rich, app-like interactionsSlow initial load (blank screen)
Low server loadPoor SEO out of the box
Simple deployment (static host)Large JS bundles
Fast navigation after first loadRequires JS enabled
\n
\n

Best for: Dashboards, admin panels, apps behind a login, real-time tools.

\n
\n
\n

Server-Side Rendering (SSR)

\n

With SSR the server generates the full HTML for each request. The browser receives a complete, readable page immediately. JavaScript then runs to make the page interactive.

\n

Frameworks: Next.js (getServerSideProps), Nuxt.js, SvelteKit, Remix

\n
\nsequenceDiagram\n participant B as 🌐 Browser\n participant S as πŸ–₯️ Server\n participant D as πŸ—„οΈ Database / API\n\n B->>S: GET /page\n S->>D: Query data\n D-->>S: Data response\n Note over S: Renders full HTML on server\n S-->>B: Full HTML page βœ…\n Note over B: Content visible immediately (fast FCP)\n B->>S: GET /bundle.js\n S-->>B: JS bundle\n Note over B: Hydration β€” page becomes interactive βœ…\n
\n

How SSR works step by step

\n
    \n
  1. Browser sends a request for a page
    2. \n
  2. Server fetches data from the database or API
    3. \n
  3. Server renders the full HTML and sends it to the browser
    4. \n
  4. Browser displays the HTML immediately (fast First Contentful Paint)
    5. \n
  5. Browser downloads JS and hydrates the page to add interactivity
    6. \n
\n
\n

⚠️ This entire cycle runs on every request. The server must be available, fast, and horizontally scalable.

\n
\n

Pros and Cons

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
βœ… Pros❌ Cons
Excellent SEOHigher server load per request
Fast initial paint (content visible)More complex infrastructure
Dynamic, always-fresh dataCold start delays (serverless)
Works without JSSlower than static file serving
\n
\n

Best for: E-commerce product pages, news articles, pages that need fresh data on every request.

\n
\n
\n

Static Site Generation (SSG)

\n

SSG pre-renders all pages at build time. The result is a set of plain HTML files deployed to a CDN. No server is needed at request time.

\n

Frameworks: Next.js (getStaticProps), Gatsby, Astro, Hugo, Eleventy

\n
\nflowchart TD\n subgraph Build[\"πŸ”¨ Build Time β€” runs once\"]\n C[\"πŸ“ Content\\nMD / JSON / CMS\"] --> BT[\"βš™οΈ Build Tool\\nNext.js / Gatsby\"]\n BT --> H[\"πŸ“„ Static HTML Files\"]\n H --> D[\"πŸš€ Deploy to CDN\\nVercel / Netlify / S3\"]\n end\n\n subgraph Runtime[\"🌍 Request Time β€” instant\"]\n Browser[\"🌐 Browser\"] -->|\"GET /page\"| Edge[\"☁️ CDN Edge Node\\ncached globally\"]\n Edge -->|\"Pre-built HTML ⚑\"| Browser\n end\n\n D --> Edge\n
\n

How SSG works step by step

\n
    \n
  1. At build time, the framework fetches all data and renders every page to HTML
    2. \n
  2. The HTML files are uploaded to a CDN
    3. \n
  3. At request time, the browser gets the pre-built HTML from the nearest CDN edge node β€” no server execution needed
    4. \n
\n
\n

⚠️ Data can become stale between builds. A new deploy is required for content changes unless ISR (Incremental Static Regeneration) is used.

\n
\n

Pros and Cons

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
βœ… Pros❌ Cons
Blazing fast (files from CDN edge)Data can become stale
Excellent SEORebuild required for content changes
Highly scalable (no server)Long build times for large sites
Very secureNot suitable for user-specific pages
\n
\n

Best for: Blogs, documentation sites, marketing pages, portfolios.

\n
\n
\n

Hydration

\n

Hydration is the process that makes a server-rendered or statically generated HTML page interactive. The browser receives full HTML (fast paint), then JS is loaded and \"wired up\" to the existing DOM β€” attaching event listeners and state without re-rendering.

\n
\nflowchart TD\n A[\"β‘  Server HTML\\nπŸ“„ Full HTML sent\\nVisible βœ…\\nNot Interactive ❌\"]\n B[\"β‘‘ JS Bundle Loads\\n⬇️ Downloading...\\nVisible βœ…\\nNot Interactive ❌\"]\n C[\"β‘’ Hydrating\\nπŸ’§ Attaching events\\nVisible βœ…\\nPartial ⚠️\"]\n D[\"β‘£ Interactive\\nβœ… Framework controls DOM\\nVisible βœ…\\nInteractive βœ…\"]\n\n A -->|Browser receives| B\n B -->|JS executes| C\n C -->|Complete| D\n\n style A fill:#f1f5f9,stroke:#94a3b8,color:#334155\n style B fill:#dbeafe,stroke:#3b82f6,color:#1e40af\n style C fill:#fef9c3,stroke:#eab308,color:#713f12\n style D fill:#dcfce7,stroke:#22c55e,color:#166534\n
\n

The Hydration problem

\n

Hydration introduces Time To Interactive (TTI): the page looks ready but is not clickable until JS finishes hydrating. On slow networks or heavy JS bundles, this gap frustrates users.

\n\n FCP ─────────────────────────────────► TTI\n(page visible) (page usable)\n │◄─── JS downloads + hydrates ──►│\n \n

Modern solutions

\n\n
\n

All Methods Compared

\n
\nquadrantChart\n title Speed vs SEO β€” Where each method lands\n x-axis Slow Initial Load --> Fast Initial Load\n y-axis Poor SEO --> Great SEO\n quadrant-1 Ideal\n quadrant-2 Good for content\n quadrant-3 Limited use\n quadrant-4 App-focused\n CSR: [0.40, 0.15]\n SSR: [0.58, 0.88]\n SSG: [0.92, 0.92]\n Hybrid SSR+SSG: [0.75, 0.88]\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CSRSSRSSGHybrid (SSR+SSG)
First Load SpeedπŸ”΄ Slow🟑 Medium🟒 Fast🟒 Fast
SEOπŸ”΄ Poor🟒 Excellent🟒 Excellent🟒 Excellent
Data Freshness🟒 Real-time🟒 Per-requestπŸ”΄ Build-time🟑 Configurable
Server Cost🟒 LowπŸ”΄ High🟒 None🟑 Medium
Scalability🟑 MediumπŸ”΄ Harder🟒 Excellent🟒 Good
Interactivity🟒 Rich🟑 After hydration🟑 After hydration🟑 After hydration
Complexity🟒 Simple🟑 Medium🟒 SimpleπŸ”΄ Complex
\n
\n

When to use each method

\n

Use CSR when:

\n\n

Use SSR when:

\n\n

Use SSG when:

\n\n

Use Hybrid (SSG + SSR + ISR) when:

\n\n
\n
\n

The modern consensus: Most production apps benefit from a hybrid approach. Frameworks like Next.js, Nuxt.js, and SvelteKit let you choose the rendering strategy per page, so you can statically generate your marketing pages while server-rendering your product listings and client-rendering your dashboard.

\n
","wordCount":{"words":803},"frontmatter":{"title":"Rendering Methods Explained: CSR, SSR, SSG & Hydration","date":"March 19, 2026","description":"A deep dive into the main frontend rendering strategies β€” Client-Side Rendering, Server-Side Rendering, Static Site Generation, and Hydration β€” with diagrams for each.","lang":"en"},"tableOfContents":""},"translations":{"nodes":[]},"previous":{"fields":{"slug":"/password-seguridad/"},"frontmatter":{"title":"Seguridad de ContraseΓ±as - CΓ³mo se hackean y cΓ³mo protegerte"}},"next":{"fields":{"slug":"/metodos-de-renderizado/"},"frontmatter":{"title":"MΓ©todos de Renderizado: CSR, SSR, SSG e HidrataciΓ³n"}}},"pageContext":{"id":"64505be7-79ae-5dd9-ab3f-8c4e5501236e","previousPostId":"2f83cf33-e6f1-54bc-94d5-753ee0723f8a","nextPostId":"59e596a5-eb08-5936-9cf4-6018d73d3d8d","baseSlug":"/rendering-methods/"}},"staticQueryHashes":["712016698"],"slicesMap":{}}