はじめに
Next.jsのPre-renderingを整理。
Pre-renderingとは
Pre-renderingはページ表示のリクエストがユーザーから飛ぶ前に、前もってページを生成しておく機能を指す。
この機能を使うことで、ページ表示が早くなりSEOにもポジティブな影響が働く。
そして、Next.jsはPre-renderingにおいてStatic GenerationとServer-Side Renderingの2つの方法を持つ。
Static Generation
こちらはユーザーからリクエストされたタイミングではなく、
開発環境からbuildされたタイミングでページが生成される。
ゆえにページ表示が高速で、SEO的にも優れている。
（事前に開かれるであろうページを用意して、それをパパッと表示だけするイメージ。）
実装にはgetStaticProps関数を用いる。
最初のページ表示から外部データ/APIとの連携が必要な場合は、getSortedPostsData関数の中で、
データベースと連携するクエリをそのまま書いたり、API連携の記述をすることで実装可能。
このようにStatic Generationは高速なページ表示で威力を発揮するが、
コンテンツが動的に変わるアプリ/サイトの場合は不向き。
この場合は、Server-Side Renderingを使うと良い。
更新が少ないサイトやブログなどにはStatic Generationは向いている。
Server-Side Rendering
Server-Side Renderingは、その名の通り、クライアント側ではなく
サーバー側でレンダリングできる仕組みのこと。
サーバー側でページ生成をしてくれるので、Googleのクローラーに完成されたコンテンツを
解析してもらえるのでSEOに強い。
そして、Static Generationとは違ってユーザーのリクエストごとにページが生成される。
ゆえに先述のStatic Generationと比較するとページ表示は遅いが、
ページ更新が多い動的なアプリには向いている。
まとめ
何を開発するかによって、最適な技術は違うんだと改めて実感しました。