作成した記事

CSR、SSR、SSGの違い
The difference between CSR, SSR and SSG

SSR、SSG、CSRの違いについて、勉強する。
いくつか記事を参考にして、まとめに記事を作成する。

SSR、SSG、Client Side Renderingの違いをまとめた - Qiita

メモ

Client-Side Rendering

• ブラウザ上でJavaScriptを実行してDOMを生成、マウントし、コンテンツを表示させる。
• メリット
  • ページ遷移が高速（非同期処理が発生する場合は、タイムラグが発生する）
  • 構成がシンプル(HTMLとJSのみでOK)
• デメリット
  • First ContentfuL Paint（FCP)が遅い
  • JSファイルが大きくなると、ダウンロードに時間がかかる
  • SEOで不利
  • 動的なOGP対応ができない

SSR

• Server-Side Rendering
• コンポーネントをサーバー側で評価、実行し、その結果を配信する
• オリジンサーバーにリクエストがあるたびに、サーバー側での処理を行い、HTMLファイルを生成する
• Nuxt.js, Next.js
• メリット
  • レンダリング後のファイルを返却するため、コンテンツ表示までの時間を短縮できる
  • SEOで不利でない
  • 動的なOGP対応が可能
• デメリット
  • キャッシュ設定が複雑になりがち
  • SSRするためのWebサーバーが必要になる(Next.jsのvercelとか)

SSG

• Static Site Generatorの略
• アプリのビルド時にあらかじめページ表示に必要なデータを取得し、各ページごとに静的なHTMLファイルを出力しておく、そしてサーバーへのリクエスト時にHTMLファイルを返却する
• ヘルプページなど、静的ページに
• ブラウザが静的なHTMLファイルを取得するのはサイトへの初回リクエストのみ
• ページ遷移時には代わりにJSONファイルを取得し、動的に変化する部分はこのJSONファイル内のデータを使ってレンダリング
• メリット
  • FCPはCSR、SSRより高速
  • SEOで不利でない
  • 動的なOGPが可能
• デメリット
  • 外部からデータを取得している場合、再ビルドを行わないと変更は反映されない
  • 動的なデータが頻繁に変更される場合は採用しにくい

まとめ

• CSR: ブラウザ上でJavaScriptを実行してDOMを生成、マウントし、コンテンツを表示
• SSR: サーバー側でコンポーネントを評価、実行、結果をHTMLで配信
• SSG: ビルド時にHTMLを出力しておく

Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js

メモ

Pre-rendering

• By default, Next.js pre-renders every page
  • Next.js generates HTML for each page in advance
  • Better performance and SEO than CSR
• Each generated HTML is associated with minimal JavaScript code necessary for that page
  • This JavaScript code runs and makes the page fully interactive => hydration
  • i.e. <Link /> is available after hydration
• Disabling JavaScript on a browser still allows users to see UI with Next.js
• Pre-rendering: Initial Load(HTML) => Hydration(JS)
• CSR: Initial Load(None) => Hydration(JS)

まとめ

• Pre-renderingではIntial LoadでHTMLを生成し、その後ミニマルなJavaScriptでハイドレーションする
• ハイドレーションによって、ページがインタラクティブな状態になる。(例、<Link />でジャンプ可能に）

Two Forms of Pre-rendering - Pre-rendering and Data Fetching | Learn Next.js

メモ

Two Forms of Pre-rendering

• The difference is when it generates the HTML for a page
• Static Generation
  • At build time
  • The pre-rendered HTML is reused on each request
• SSR
  • On each request

Per-page Basis

• Next.js let you use both types of pre-rendering methods for each page

When to use SSG vs SSR

• Use SSG whenever possible
  • Build once and served by CDN(CDNとは)
  • Much faster
• SSG
  • Marketing pages
  • Blog posts
  • E-commerce product listings
  • Help and documentation
  • "Can I pre-render this page ahead of a user's request"
    • "Yes" => SSG
    • "No" => SSR or CSR

まとめ

• SSG: At build time
• SSR: On reach reaquest
• Use SSG whenever possible
• SSG is build once and the contents are served by CDN

CDNとは？　～ノンエンジニア向けにわかりやすく解説～ - ブログ - Ｊストリーム

メモ

• Content Delivery Network
• CDNはサーバーの応答を肩代わりする
  • コンテンツの配信のために最適化されたネットワーク
  • クライアントとサーバーの中間に配置される
• CDNはサーバーから提供されたコンテンツをキャッシュして保持
• CDNは複数に分散されたキャッシュサーバー群によるネットワーク
• 地理的に分散配置されるため、最短経路を考慮した配信がされる

まとめ

• CDNはクライアントとサーバーの間で、サーバーが提供するコンテンツをキャッシュして保存する
• 複数に分散されたネットワーク