はじめに
こんにちは、都内でソフトウェアエンジニアをしているYSasagoと申します。
今回は、Next.jsの特徴の1つであるPre-rendering（SSGとSSR）のまとめていこうと思います。
Next.jsのPre-renderingとは
- Next.jsは、デフォルトで全ページをPre-rendering
- Pre-rendering ＝ 事前にHTMLを生成すること
- ブラウザの負荷を下げて表示を高速化する
- 検索エンジンのクローラーにコンテンツを見せることができる
Static Site Generation(SSG)とは
SSGはビルド時に、サーバー側で、APIからのデータ取得とそれに伴ったHTMLの構築を事前に行います。
そして、ユーザーからリクエストされた際にこの事前につくっておいたHTMLを渡すアーキテクチャです。
事前につくっておいたHTMLをユーザーに渡すだけなのでユーザーは高速にサイトを確認することができます。よってSEO観点でとても良いとされています。
getStaticPropsでテータを取得
Next.jsにおいて、SSGを実装するためにgetStaticProps関数を使います。
この関数は、外部データを取得するために使う関数で、本番環境ではビルド時に実行されます。
- 外部データを取得するために使う
- async/awaitを使って非同期処理を制御できる
- 本番環境ではビルド時に実行される関数
- 開発環境では、リクエスト毎に実行される
- pageコンポーネントでのみ使用可能
SSGを試してみる
// 本番環境ではビルド時に実行される
export async function getStaticProps() {
// データ取得をここに書く
const allPostsData = getSortedPostsData();
return {
// オブジェクトの形で返してあげる
props: {
allPostsData,
},
};
}
// getStaticPropsで返されたpropsを受け取る
export default function Home ({ allPostsData }) { ... }
Server-Side Rendering(SSR)とは
ユーザーからのリクエスト毎にサーバーにリクエストが走り、そのままサーバー側でAPIと連携をしてレンダリングが行われ、生成されたHTMLをユーザーに返すアーキテクチャのことをいいます。
リクエスト毎にAPIのリクエストとレンダリングが行われるため、SSGと比較すると速度は遅くなります。
getServerSidePropsでデータを取得
Next.jsにおいて、SSRを実装するためにgetServerSideProps関数を使います。
この関数は、外部データを取得するために使う関数で、リクエスト毎に実行されます。
- リクエスト毎に実行される関数
- Server-Side Renderingのために使う
- 外部データを取得するために使う
- async/awaitを使って非同期処理を制御できる
- pageコンポーネントでのみ使用可能
SSRを試してみる
// リクエスト毎に実行される
export async function getServerSideProps(context) {
const allPostsData = getSortedPostsData();
return {
props: {
allPostsData,
},
};
}
export default function Home ({ allPostsData }) { ... }
おわりに
Next.jsを使うと、Pre-renderingを簡単に実装でき、SEOの評価を上げることができます。
またSSGとSSRはページごとに使い分けができるので、とても便利ですね。
用途をよく考えて使い分けしていければと思います。
最後まで読んでくださりありがとうございました。
参考