はじめに
Next.js app routerのチュートリアルの第１０章のアウトプットします。
前の記事
【01】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/af58da3d20cbc790e767
【02】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/edf450b3ee135e83d1e8
【03】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/612221eac233aa9cbb74
【04】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/62f9beccbfe36eaf7f90
【05】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/8b71b1d1df7c9435a9c9
【06】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/58130c3cfbaf8a573de2
【07】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/2c2da0f8071e60454679
【08】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/45f45fcb9cc14506f79f
【09】Next.js app routerのチュートリアルやってみる(loading.tsxとSuspenseでストリーミング)
第１０章 部分的な事前レンダリング
この章では下記を学習しました。
- 部分的な事前レンダリングとは何か
部分的な事前レンダリングは、Next.js14で導入された実験的な機能らしいです。
そのため、これから変更される可能性があるとのことです。
部分的な事前レンダリングとは
簡単に言うと、静的なコンポーネントは事前に読み込んでおいてすぐに表示する！
そして穴が開いている非同期で動的なコンポーネントをストリーミングでだんだん読み込む！だそうです。
例えば下の例ではサイドバーは静的レンダリングを、それ以外のダッシュボードは動的レダリングを選択する方がパフォーマンスが良くなります。
上のページをユーザーが訪問した場合は、
サイドバーは静的なコンポーネントであるため、高速にロードされます
そして、他の動的なコンポーネントは非同期で読み込まれます。
これにより、ページ全体の読み込み時間が短縮されるというわけです。
使い方
動的なコンポーネントにSuspenseを利用することで実現することができますとは、書いてありましたが、具体的な実装例などはチュートリアル内には記載されていませんでした。
注:部分的な事前レンダリングの構成方法の詳細については、部分的な事前レンダリング (実験) のドキュメントを参照するか、部分的な事前レンダリングのテンプレートとデモを試してください。。この機能は実験的なものであり、まだ運用環境に導入する準備ができていないことに注意することが重要です。
https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering
https://vercel.com/templates/next.js/partial-prerendering-nextjs
おわりに
なかなか難しい。
次の記事