ISRは、next.jsのハイブリッドレンダリング方法であり、SEOとユーザーエクスペリエンスの改善に役立ちます。この記事では、ISRがnext.jsでどのように機能するかを説明し、ページルーターとアプリルーターの両方でISRを実装する例を示し、最後に、next.jsのISRに関するいくつかの一般的な質問に対処します。

ISRとは何ですか？

ISRはnext.jsのハイブリッドレンダリング方法です。特定の間隔で静的ページを再生します。これは、サイト全体を再構築せずにコンテンツを最新の状態に保つことにより、SEOを支援し、ユーザーエクスペリエンスを改善することにより、ユーザーエクスペリエンスを改善します。

。

ISRはSEOとユーザーエクスペリエンスをどのように改善しますか？

React.jsまたは従来のシングルページアプリケーション（SPA）を使用した場合、SPAには通常1つのHTMLファイルしかないことがわかります。ユーザーが最初にSPA Webサイトにアクセスすると、SPAは最小限のHTMLファイルを送信します（Reactでは、通常はindex.htmlです）。その後、要求されたページに必要なCSS、JavaScript、およびその他のリソースを取得します。これらのリソースは、クライアント（ブラウザ）に到達すると、HTMLにレンダリングされ、結合されます。ただし、前述のように、SPAによって送信された最初のHTMLファイルには、コンテンツがほとんどまたはまったく含まれていません。

今、ユーザーの代わりにWebサイトを要求するGoogleボットを想像してください。最新のGoogle BotsはJavaScriptを実行してコンテンツを取得できますが、これに依存するだけでSEOに悪影響を与える可能性があります。ボットは、最初のHTMLを空であると見なす可能性があり、ページコンテンツのインデックス付けを遅らせ、検索ランキングを害する可能性があります。

。

Next.jsは、サーバーのプレレンダリングなどのサーバー側のレンダリング手法を使用してこれを解決します。レンダリングについては後で詳しく説明しますが、簡単な概要を説明します。サーバーの事前レンダリングを使用すると、各ルートのHTMLがサーバー上で生成され、クライアントに直接送信されます。 CSSおよびJavaScriptファイルは通常、バンドルされてキャッシュされます。

したがって、ユーザーまたはGoogleボットがサイトにアクセスすると、すぐに完全にレンダリングされたページが表示されます。 Google BotはHTMLのコンテンツを即座に見ることができるため、これによりSEOが改善されます。また、ページのロードをスピードアップすることでユーザーエクスペリエンスを向上させます。つまり、ユーザーはコンテンツが動的にロードされるのを待つ必要はありません。

ISRはどのように機能しますか？

ISR（インクリメンタル静的再生）の仕組みをよりよく理解したい場合は、例を説明してみましょう。あなたがあなたのウェブサイトでブログのリストを管理する管理者であると想像してください。新しいブログを投稿するたびにプロジェクトを再構築したくありません。代わりに、ブログリストページを自動的に更新する必要があります。たとえば、60秒ごとに。そのため、新しいブログを書くときは、プロジェクトを手動で再構築することなく表示したいと考えています。これがISRの登場です。SSR（サーバー側のレンダリング）などのメソッドを使用できますが、Webサイトを特定の間隔で更新したい場合は、ISRが進む方法です。後でSSRについて説明します。

ここで、ブログリストページにISRを実装し、再生時間を60秒に設定したとします。プロジェクトを初めて構築すると、再生タイマーが開始されます。ユーザーがウェブサイトにアクセスし、ブログリストページにアクセスし、ブログの現在のリストを確認します。一方、新しいブログ投稿を公開しますが、60秒のウィンドウにまだ20秒が残っているため、サイトにアクセスしている新しいユーザーはまだ新しいブログが表示されません。

はまだ表示されません。

60秒が増えると、ISRは新しいデータをチェックし、新しいブログ投稿があることを確認し、更新されたコンテンツで静的ページを再生します。次に、サーバー上の新しいバージョンをキャッシュします。注意すべき重要なことは次のとおりです。ISRはページを再生していますが、ユーザーは新しいバージョンの準備が整うまで古いバージョンを表示します。したがって、ISRが終了した後、新しい訪問者は更新されたページが表示されますが、再検証の前にすでにサイトにいたユーザーは、更新されない限り古いページが表示されます。

覚えておくべきもう1つの重要なことは、NPM Run Buildを使用してWebサイトを構築すると、初期静的ページがISRではなくSSG（静的サイト生成）によって生成されることです。最初のビルドの後、ISRは再生プロセスを処理するためにキックインします。また、ISRはサイト全体を再生しません。 ISRが実装されている特定のページのみを再生します。したがって、ISRが再生すると、その特定のページのみがプロジェクト全体ではなく更新されます。

アプリルーターにISRを実装する方法

アプリルーターにISR（増分静的再生）を実装するには、ISRをクライアントコンポーネントではなくサーバーコンポーネントで使用する必要があることを知っておくことが重要です。これは、ISRがサーバーレンダリング方法であり、クライアント側の方法ではないためです。したがって、ISRをapp/blog/page.tsxやapp/blog/page.jsxなどのファイルに配置する必要があります。

覚えておくべき重要なポイントの1つは、revalidateオプションが設定されているサーバーコンポーネントのAPIを呼び出さない場合、ISRが機能しないことです。サーバーコンポーネントは、ページを再生するために新しいデータを取得できる必要があります。そうしないと、更新は発生しません。

ISRを有効にするために、あなたがする必要があるのは、revalidateプロパティをフェッチ方法に追加することだけです。 Fetchの代わりにAxiosを使用することを好む場合でも、リクエストを同様に構成することで使用できますが、今のところはFetchの使用に固執します。たぶん後で私はaxiosでそれを行う方法を説明します。

TSXファイルとjsx fielで例を提供しました：

これはTSXファイルに実装の例

です

これはJSXファイルに実装する例です。

ページルーターにISRを実装する方法は？

ページルーターにISRを実装するには、コンポーネントからGetStaticPropsをエクスポートし、この関数にRevalidateプロパティを追加する必要があります。この関数は、サーバー側のレンダリング中にのみ実行されるため、getStaticProps内でAPIを呼び出す必要があります。前のセクションで述べたように、FetchまたはAxiosを使用してデータを取得できますが、API呼び出しはGetStaticProps内で行う必要があることに注意してください。そうでなければ、ISRは機能しません。

繰り返しますが、この関数はクライアントではなくサーバー上で実行されます。これが実証する例です：

これはTSXファイルに実装する例です：

これはJSXファイルに実装する例です。

結論

next.jsのISRは、SEOとユーザーエクスペリエンスの両方を改善するサーバーレンダリング方法です。

SSRやSSGなどの他の方法を使用してコンポーネントを作成できますが、特定のユースケースにはISRが必要な場合があります。

ISRが何であるか、どのように機能するか、およびページルーターとアプリルーターの両方でそれを実装する方法を十分に理解する必要があります。この記事では、できるだけ明確に説明しようとしましたが、さらに良く説明できる場合は、後で更新します。不明な場合は、コメントを残してお知らせください。さらに説明します。

このブログを読んでくれてありがとう、そして私はあなたがそれを楽しんだことを願っています！