More than 3 years have passed since last update.

Next.js / Pre-rendering

Last updated at 2021-02-11Posted at 2021-02-11

はじめに

Next.jsのPre-renderingを整理。

Pre-renderingはページ表示のリクエストがユーザーから飛ぶ前に、**前もってページを生成しておく機能**を指す。この機能を使うことで、ページ表示が早くなりSEOにもポジティブな影響が働く。

そして、Next.jsはPre-renderingにおいてStatic GenerationとServer-Side Renderingの2つの方法を持つ。

こちらはユーザーからリクエストされたタイミングではなく、
開発環境から**buildされたタイミング**でページが生成される。ゆえにページ表示が高速で、SEO的にも優れている。（事前に開かれるであろうページを用意して、それをパパッと表示だけするイメージ。）

実装にはgetStaticProps関数を用いる。
最初のページ表示から外部データ/APIとの連携が必要な場合は、getSortedPostsData関数の中で、
データベースと連携するクエリをそのまま書いたり、API連携の記述をすることで実装可能。

このようにStatic Generationは高速なページ表示で威力を発揮するが、
コンテンツが動的に変わるアプリ/サイトの場合は不向き。
この場合は、Server-Side Renderingを使うと良い。

更新が少ないサイトやブログなどにはStatic Generationは向いている。

**Server-Side Rendering**は、その名の通り、クライアント側ではなく
サーバー側でレンダリングできる仕組みのこと。サーバー側でページ生成をしてくれるので、Googleのクローラーに完成されたコンテンツを
解析してもらえるのでSEOに強い。

そして、Static Generationとは違ってユーザーのリクエストごとにページが生成される。
ゆえに先述のStatic Generationと比較するとページ表示は遅いが、
ページ更新が多い動的なアプリには向いている。

何を開発するかによって、最適な技術は違うんだと改めて実感しました。