Next.jsとは
JavaScriptライブラリであるReact開発におけるフレームワークのこと。
Next.jsではサーバ側でレンダリングを行うための3つの方式をサポートる。
SSR(Server Side Rendering)
SSRとはリクエスト毎にサーバー側でレンダリングを行ったものをクライアントへ返すという方式を取っている。
特徴
- リクエストのたびにサーバー側でレンダリングを行うために、レスポンスに時間がかかる。
SSG
クライアントからのリクエスト毎でなく、ビルド時に一括してレンダリングを行う。
特徴
- 静的なhtmlを生成しているためロードはとても高速
- ただしビルド後に動的にページの内容を変更することはできない。
ISR
ISRではブラウザからのリクエストに対して事前にレンダリングされたhtml(古い情報)を返しつつ、バックグラウンドでリクエストに対するレンダリングを行う。
特徴
- 次のリクエストで新しくレンダリングされたHTMLを返すことができる。
- SSGにSSRを統合したような方式。
なぜNext.jsが必要か
Reactの場合は、ブラウザ側でレンダリングを行う(CSR)が、CSRでは必要なコンテンツを初期表示時にまとめてダウンロードするため、初期表示の読み込みが遅かったり、SEOに不利だったりする。
そうしたデメリットの克服のためにNext.jsを使う。