Next.jsのレンダリング環境とキャッシュについて

以下についてをまとめました。
- クライアント・サーバーコンポーネント
- CSR/ SSR/ SSG/ ISR

Transcript

1. Next.jsのレンダリング環境とキャッシュについて
2. 自己紹介 簡単な経歴 中小企業のシステム開発会社にてSier出向を経て、一度Web制作会社にて企業向け Webサイト開発に従事。その後、フリーランスへ移行しました。 よく使うスキル TypeScript（React.Js、Next.Js、Vue.Js、Nuxt.js） PHP（Laravel）
3. 1. Next.jsの概要
4. 1.1 フレームワークの特徴 Reactベースのフレームワーク サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）をサポート ルーティング機能が組み込み 高速な開発体験とパフォーマンスの最適化が可能 https://nextjs.org/docs
5. 1.2 SPAとの違い 従来のSPA（Single Page Application）はクライアントサイドで全てを処理(CSR: Client Side Rendering) Next.jsはサーバーサイドレンダリングを活用し、初回表示の速度向上 SEO対策がしやすい
6. 2. コンポーネントの基本
7. 2.1 Reactコンポーネントの基礎 関数コンポーネントが主流 JSXを使用してUIを定義 Propsを利用してデータを受け渡し
8. 2.2 Next.jsにおけるコンポーネントの役割 UIの構築だけでなく、サーバー側でのデータ取得が可能 クライアントとサーバーの適切な分離
9. 3. コンポーネントの種類
10. 3.1 サーバーコンポーネント（Server Components） サーバー側でレンダリングされるコンポーネント 直接データベースやAPIにアクセス可能 クライアントにJavaScriptを送信しないため高速 ReactHooks含む各種カスタムHookを使用できない。 fetchなど取得したデータをそのまま表示するのみ
11. 3.2 クライアントコンポーネント（Client Components） クライアント側で動作するコンポーネント 状態管理やイベントハンドリングが可能 useStateやuseEffectなどカスタムHookを利用可能 クエリーストリング使用可能 クライアントコンポーネントからサーバコンポーネントを呼ぶとエラーとなる
12. 3.3 サーバーアクションズ(Server Actions) サーバーで稼働する非同期関数 上記関数にてDBアクセスを担当させるとアクセスポイントを 新たに設けることなく関数呼び出しによりデータアクセスが可能 関数にオブジェクト型を引数指定は不可（値渡し、シリアライズが必要）
13. actions.ts 'use server' export default async function action = (arg) = { ... } useActions.tsx import action from './action' const useAction = () = { const arg = { -> const arg = 'a'; ならOK 又はオブジェクト型をJSONへparseして一つの文字列へ A: 'A', }; return ( <button onClick={() => action(arg)} -> エラー > action </button> ) }
14. 3.3 ハイブリッドな利用方法 コンポーネントの適材適所の使い分け サーバーコンポーネントでデータを取得し、クライアントコンポーネントに渡す
15. 4. コンポーネントの管理
16. 4.1 ファイル構成 components/ ディレクトリを作成し、コンポーネントを管理 ページ固有のコンポーネントは pages/ 内で管理
17. 5. パフォーマンス最適化
18. 5.1 キャッシュ戦略 コンポーネント環境によりキャッシュの方式を選択 CSR (Client Side Rendering ) 該当ファイルに'use client'指定（又は何かしらhooksを使用する） キャッシュはブラウザ依存
19. SSR (Server Side Rendering) 'use client'を指定しない。hooksを使用しない。 fetchにて追加設定によりSSRとなる。 （第二引数に{ cache: "no-store" }）
20. SSG(Static Site Generation) 'use client'を指定しない。hooksを使用しない。 fetchにてデフォルト設定 （第二引数に{ cache: "force-cache" }） デフォルトはSSGとなり、fitchの設定によりSSR、ISRに変化
21. ISR（Incremental Static Regeneration）を活用 'use client'を指定しない。hooksを使用しない。 fetchにて追加設定によりISRとなる。 （第二引数に{ next: { revalidate: 60 }// 60秒で更新 }）
22. APIレスポンスのキャッシュ設定によりレスポンスに影響する 先述の'Server Actions'にも別途キャッシュ設定がある fetch毎ではなくファイル毎にキャッシュ設定も可能
23. 6. まとめ Next.jsではサーバーとクライアントのコンポーネントを適切に使い分けることが 重要 パフォーマンスやSEOを考慮した設計が可能 効率的なコンポーネント管理によりスケーラブルな開発ができる 資料まとめの為、いろいろ技術系ブログ探し回ったが、Next.jsのいろいろ設定可 能なところが複雑すぎるとネガティブ意見も多数あった。 私自身、ISRは使えていない。 （基本はSSG, SSR, CSR） 時報など時間により画面更新が必要なページに使用するか？