Rendering Patterns

どこでHTMLを作るか？ サーバー(SSR)？ ブラウザ(CSR)？ ビルド時(SSG)？

Visualizing the Difference

graph TD
    User([User])
    Server[Server]
    Browser[Browser]
    
    subgraph CSR [Client-Side Rendering]
        C1[Request] --> S1[Return Empty HTML + JS]
        S1 --> B1[Download JS]
        B1 --> B2[Execute JS
(Render UI)]
        B2 --> B3[Viewable]
    end
    
    subgraph SSR [Server-Side Rendering]
        C2[Request] --> S2[Generate HTML on Server]
        S2 --> B4[Return Full HTML]
        B4 --> B5[Viewable immediately]
        B5 --> B6[Hydrate JS]
    end

Decision Tree

  • Static Blog / Docs: SSG (Build once, serve everywhere). Fastest.
  • E-commerce / News: SSR (Dynamic content, SEO critical).
  • Dashboard (Login required): CSR (SEO not important, highly interactive).
  • Hybrid (Next.js/Astro): Mix and match per page!