NEW ARTICLE
Railsのエラー『Devise::OmniauthCallbacksController#failure』の解決方法
  1. HOME
  2. React
  3. Next.jsで始めるサーバサイドレンダリングと静的サイト生成

Next.jsで始めるサーバサイドレンダリングと静的サイト生成

Next.jsで始めるサーバサイドレンダリングと静的サイト生成

Next.jsは、Reactをベースにしたフレームワークで、サーバサイドレンダリング(SSR)と静的サイト生成(SSG)をサポートしています。本記事では、それぞれの機能と実装方法を詳しく解説します。

目次

1. サーバサイドレンダリング(SSR)とは

SSRは、サーバー上でページをレンダリングし、その結果をクライアントに送信します。

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

  return {
    props: { data },
  };
}

2. 静的サイト生成(SSG)とは

SSGは、ビルド時にHTMLを生成し、リクエストごとに同じコンテンツを提供します。

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

  return {
    props: { data },
  };
}

3. getServerSidePropsの使用例

動的データをSSRで取得し、ページに表示します。

function Page({ data }) {
  return <div>{data.title}</div>;
}

4. getStaticPropsの使用例

ビルド時にデータを取得し、静的ページを生成します。

function Page({ data }) {
  return <div>{data.title}</div>;
}

5. ISR（増分的静的再生成）

ISRは、静的ページを定期的に再生成できます。

export async function getStaticProps() {
  return {
    props: { time: new Date().toISOString() },
    revalidate: 10,
  };
}

6. API Routesの活用

Next.jsでは、APIエンドポイントを簡単に作成できます。

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

7. ページルーティング

Next.jsはファイルベースのルーティングをサポートします。

8. データフェッチ戦略

SSRとSSGを適切に使い分けることでパフォーマンスを最適化できます。

9. 画像の最適化

Next.jsのImageコンポーネントを使って画像を最適化できます。

10. 環境変数の管理

環境変数を.envファイルで管理できます。

11. デプロイ

Vercelを使ったNext.jsアプリのデプロイ方法。

12. まとめ

Next.jsを使うことで、SSRとSSGの柔軟な使い分けが可能になり、高速なウェブアプリケーションを構築できます。