Pre-rendering and Data Fetching

[yutabee]

We’d like to create a blog (here’s the desired result), but so far we’ve added no blog content. In this lesson, we’ll learn how to fetch external blog data into our app. We’ll store the blog content in the file system, but it’ll work if the content is stored elsewhere (e.g. database or Headless CMS).

What You’ll Learn in This Lesson

In this lesson, you’ll learn about:

• Next.js’ pre-rendering feature.
• The two forms of pre-rendering: Static Generation and Server-side Rendering.
• Static Generation with data, and without data.
• getStaticProps and how to use it to import external blog data into the index page.
• Some useful information on getStaticProps.

[yutabee]

What's Pre-rendering?

Pre-rendering（プレレンダリング）とは、WebページのHTMLをサーバー側で事前に生成することを指します。Next.jsでは、デフォルトで全てのページがPre-renderingされます。Pre-renderingにより、初回アクセス時のレスポンス時間が短縮され、SEO対策にもなります。Pre-renderingされたHTMLには、そのページに必要な最小限のJavaScriptが含まれます。その後、ブラウザでページが読み込まれ、JavaScriptが実行されることで、ページが完全にインタラクティブになります。

Next.jsでは、Pre-renderingにはStatic Generation（静的生成）とServer-side Rendering（サーバーサイドレンダリング）の2つの形式があります。Static Generationは、ビルド時にHTMLを生成することで、レスポンス速度が速く、SEOにも効果的です。Server-side Renderingは、リクエスト時にHTMLを生成するため、動的なコンテンツに対して適しています。

また、Next.jsではIncremental Static Regeneration（ISR）という機能も提供しています。これは、静的ページを生成した後に、一部のページを更新することができる機能です。ISRを使用することで、ページの更新が速く行えるため、ユーザー体験の向上につながります。

Pre-renderingによって、ユーザー体験を向上させることができるため、Next.jsではデフォルトでPre-renderingが有効になっています。

[yutabee]

Static Generation? or Server-side Rendering?

Next.jsには、Static GenerationとServer-side Renderingの2つのPre-rendering形式があります。Static Generationはビルド時にHTMLを生成し、そのHTMLを再利用することで高速にページを表示できます。一方、Server-side Renderingは、リクエスト毎にHTMLを生成します。

開発モードでは、毎回のリクエストに対してPre-renderingが行われます。本番環境では、Static Generationはビルド時に1度だけ実行されます。

Next.jsでは、各ページに対してPre-rendering形式を選択できます。Static Generationは、マーケティングページ、ブログ投稿、Eコマースの商品リスト、ヘルプやドキュメンテーションなど、多くの種類のページに使用できます。データを伴うStatic Generationも利用可能です。

データが頻繁に更新されるページには、Static Generationは適していません。この場合、Server-side Renderingを使用するか、Pre-renderingをスキップしてクライアント側のJavaScriptでデータを取得することができます。

Static Generationを使用することで、ページの表示が高速化され、SEO対策にも効果的です。また、Pre-rendering形式は各ページごとに選択できるため、開発者は柔軟に選択することができます。

[yutabee]

postsのディレクトリ構成も修正しました。