Next.js で SSR と SSG を使用する場合

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

サーバーへのすべてのリクエストで実行されます。
ユーザーがページにアクセスするたびに、サーバーはデータを取得し、HTML をレンダリングしてクライアントに送信します。
これにより、コンテンツが常に最新であることが保証されますが、サーバー側の処理のオーバーヘッドにより速度が遅くなる可能性があります。

SSR のタイムラインの例:

リクエスト 1: ユーザー A が訪問 → サーバーがデータを取得し、ページを動的に生成し、応答します。

リクエスト 2: ユーザー B が訪問 → サーバーが再度データを取得し、ページを動的に生成して応答します。

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data }, // Will be passed to the page component as props
  }
}

function Page({ data }) {
  return <div>{data. Content}</div>
}
export default Page;

SSG (静的サイト生成):

ビルド時 (次のビルドを実行するとき) に実行されます。
HTML とデータは事前​​にレンダリングされ、静的ファイルとして保存されます。これらのファイルはユーザーに直接提供されるため、非常に高速です。

オプション: revalidate を使用する場合、Next.js は指定された時間間隔の後にバックグラウンドでページを再構築し、更新されたコンテンツが利用可能であることを確認します。
再検証を伴う SSG のタイムラインの例: 60:

ビルド時間: ページは、ビルド時に利用可能なデータを使用して事前レンダリングされます。

リクエスト 1 :(ビルド後): ユーザー A が訪問 → 静的 HTML が提供されます。

バックグラウンド再生成 (60 秒後): Next.js が新しいデータを取得し、ページを再生成します。

リクエスト 2 : (再生成後): ユーザー B が訪問 → 更新された静的 HTML が提供されます。

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return {
    props: { 
      posts 
    },
    // Optional: Regenerate the page at most once every 60 seconds
    revalidate: 60 
  }
}

function BlogPage({ posts }) {
  return (
    <div>
      {posts. Map(post => (
        <div key="{post.id}">{post.title}</div>
      ))}
    </div>
  )
}

SSR: 新しいデータを取得し、リクエストごとにページを生成します。

SSG: ビルド時 (またはスケジュールされた再検証間隔中) に 1 回ページを事前レンダリングし、再生成されるまで同じ事前ビルドされたページをすべてのユーザーに提供します。

次の場合に SSR を使用します。

リアルタイムの最新のコンテンツ (ダッシュボード、ユーザー固有のデータなど) が必要です。
コンテンツは頻繁に変更されるため、効果的にキャッシュできません。

次の場合に SSG を使用します。

コンテンツは頻繁には変更されません (ブログ投稿、マーケティング ページなど)。
スピードとパフォーマンスが重要です。

以上がNext.js で SSR と SSG を使用する場合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。