LoginSignup
0
0

【これからNext.jsを勉強する人必見!】SSR(サーバーサイドレンダリング)とSSG(静的サイト生成)について

Last updated at Posted at 2023-11-12

サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)の比較

ウェブ開発におけるページのレンダリング方法として、サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)の二つがあります。これらの技術は、どのようにしてユーザーにコンテンツを提供するかという点で異なります。

DALL·E 2023-11-12 12.38.02 - An infographic comparing Server-Side Rendering (SSR) and Static Site Generation (SSG). The image should be split in two vertical halves, with the left.png

サーバーサイドレンダリング(SSR)

SSRは、ユーザーからのリクエストがサーバーに送られるたびに、サーバー上でHTMLを動的に生成し、ページをレンダリングする方法です。これにより、ページは常に最新の状態を反映できますが、各リクエストでサーバーの処理が必要になるため、レンダリングに時間がかかることがあります。

静的サイト生成(SSG)

SSGでは、ビルド時に全てのページがHTMLとして生成され、それらのページは事前にサーバー上に保存されます。ユーザーからのリクエストには、すでに生成された静的なページが返されるため、サーバーの処理が不要で高速にレンダリングされます。ただし、コンテンツの更新にはビルドの再実行が必要です。

SSRとSSGの適切な利用シナリオ

ウェブ開発では、サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)が異なるシナリオに適しています。以下は、それぞれのアプローチを採用するのに最適なケースです。

サーバーサイドレンダリング(SSR)

SSRは以下の場合に適しています

  • SEO最適化が重要なウェブサイト
    検索エンジンのクローラーにコンテンツを効率的に認識させるために役立ちます。
  • リアルタイムでコンテンツが更新されるウェブサイト
    ニュースサイトやSNSのように、最新情報をユーザーに提供する必要がある場合に理想的です。
  • 初期ページロードパフォーマンスが重要なウェブアプリ
    SSRは初回のページ読み込みを高速化し、ユーザーエクスペリエンスを改善します。

使用例

  • ユーザーのアクションに応じて動的に内容が変更されるEコマースサイト。
  • ユーザーログインに基づいたカスタマイズされたコンテンツを表示するウェブアプリケーション。

静的サイト生成(SSG)

SSGは以下の場合に適しています

  • 高速なページロードタイムを必要とするウェブサイト
    静的ファイルはCDNを介して迅速に配信され、ページのロード時間を最小限に抑えます。
  • セキュリティが優先されるウェブサイト
    サーバーサイドの処理が少ないため、攻撃面が減ります。
  • 定期的には更新されないコンテンツ
    マーケティングサイトやブログなど、定期的な変更がないものに適しています。

使用例

  • ポートフォリオサイトやイベント告知サイトなど、頻繁な更新が必要ないウェブサイト。
  • ドキュメントやマニュアルなど、一度公開後に変更が少ない情報を扱うサイト。

SSRとSSGの選択は、ウェブサイトの要件、コンテンツの性質、そして求められるユーザーエクスペリエンスに基づいて行うべきです。

まとめ

SSRは動的なコンテンツに適しており、SSGは変更が少ないコンテンツに適しています。選択は、プロジェクトの要件とページの更新頻度に基づいて行います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0