Next.js で SSG をマスターする: SEO とユーザー エクスペリエンスを向上させる方法

SSG (静的サイト生成) は、ISR (増分静的再生成) に似た Next.js のメソッドですが、ビルド時にのみ実行されます。サイトが構築されると、SSG は次の構築までページを再度レンダリングしません。この記事では、SSG が Next.js でどのように機能するか、SSG が SEO をどのように改善するか、そしてユーザー エクスペリエンスをどのように向上させるかについて詳しく説明します。

SSGとは何ですか？

SSG は、ビルド プロセス中にサーバー上で実行される Next.js のメソッドです。 CSS、JavaScript、関連リソースとともに静的ページを生成し、すべてをバンドルして完全な静的エクスペリエンスを実現します。

SSGはどのように機能しますか?

プロジェクトで SSG を使用するには、SSG を使用するページで getStaticProps メソッドをエクスポートする必要があります。アプリ ルーターを使用している場合は、プロジェクトをビルドするときに SSG がデフォルトで実行されます。ただし、ページ ルーターを使用している場合は、getStaticProps を手動で追加する必要があります。

このメソッドはバンドルされた静的ページを作成するため、ユーザーまたはクローラーが SSG が実装されているページをリクエストすると、Next.js はすべてのリソースを含む完全に準備されたページを送信します。これにより、追加のアセットを読み込む必要がなくなり、遅延が最小限に抑えられるため、SEO とユーザー エクスペリエンスに優れています。

スラッグや ID を使用するブログ詳細ページなどの動的ルートの場合、そのページのデータをフェッチする別の方法が必要になります。このメソッドは getStaticPaths で、ビルド時に getStaticProps の前に実行されます。

App Router に SSG を実装する方法

SSG は、プロジェクトをビルドするときに Next.js App Router にデフォルトで実装されます。すべてのページは CDN にバンドルされてキャッシュされるため、静的ルートに追加の手順を追加する必要はありません。

ただし、スラッグや ID を使用するような動的ルートの場合、Next.js はビルド時にそれらを自動的に取得できません。これらのリストは、API またはプロジェクト内の他のソースから取得する必要があります。ここで、generateStaticParams 関数が登場します。この関数を使用すると、動的ルートのスラッグまたは ID のリストを取得して返すことができるため、Next.js はそれぞれの静的ページを生成できます。覚えておくべき重要な点は、generateStaticParams はクライアント コンポーネントではなくサーバー コンポーネントで使用する必要があるということです。

これは tsx ファイルでの実装例です:

これは jsx ファイルでの実装例です:

Page Router に SSG を実装する方法

Page Router に SSG を実装するには、getStaticProps 関数を作成し、SSG を実装するページからそれをエクスポートする必要があります。この関数はプロジェクトのビルド時に自動的に呼び出されます。

動的ルートがある場合は、別の関数を作成してエクスポートする必要があります。前に述べたように、この関数は getStaticProps の前に呼び出され、API からデータをフェッチするか、ファイルから ID またはスラッグのリストを取得する必要があります。

これは tsx ファイルでの実装例です:

これは jsx ファイルでの実装例です:

結論

SSG は、静的ページをバンドルして作成するための便利な方法です。 SEO とユーザー エクスペリエンスのためにウェブサイトを改善したい場合は、SSG、ISR、または SSR を使用することをお勧めします。

このブログではSSGについて書きました。 ISR に関する別の記事もこのアドレスから入手できます: Mastering ISR in Next.js。 SSRについてはまた後日記事を書きます。ご質問がございましたら、お気軽にコメントを残してください。私は手伝うためにここにいます。最高の知識を皆さんと共有したいので、このブログは後で更新される可能性があります。

読んでいただきありがとうございます!もっと記事を読みたい場合は、私のウェブサイト「Saeed Niyabati」をフォローしてください。楽しんでいただければ幸いです。さようなら!

以上がNext.js で SSG をマスターする: SEO とユーザー エクスペリエンスを向上させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。