概要 †
特徴 †
- SSR
- webpackやbabelといったフロントエンドのビルド環境をフレームワーク側で内包
- ファイルシステムを利用した手軽なルーティング機能
- TypeScriptのビルトインサポート
- CSS Modulesや数々のCSS in JSのビルトインサポート
- 数々のパフォーマンス最適化
採用事例 †
レンダリング †
- Reactは基本的に、CSR（Client Side Rendering）のみしか実装できない
- Next.jsは、SSR、SSG、ISRを自由に使い分けることでできる
- これらを使うことで、CSR のデメリットである初期表示の遅延が解消される
- そのため、React と Next.js を併用することで、Webページの表示速度を最適化することできる
データ取得 †
- SWRは、クライアントJavaScriptからのデータ取得とそれに関連する操作を提供するReact Hooks群
状態管理 †
- 結局Reduxとはなんだったのだろう
- 改めて Redux の存在意義を考えてみると、こいつはグローバルな state の状態管理を行ってくれるパッケージに過ぎない
- 当たり前のことなんですが、グローバルな state って少なければ少ないほど好ましいです。
- state って可能な限りコンポーネントの内部にカプセル化されるべきであるということを勘違いしてはいけない
- なので React の Context や Reducer もそうですし、Redux のような状態管理系のパッケージなんて使わないに越したことはない
- グローバルな stateを管理したい場合でも、Context とか Reducer とかで大抵のケースは事足りる
- それよりは SWR や React Query のようなパッケージを使用して、キャッシュで state を扱うほうが良い
Redux †
Next.js 13 †
appディレクトリ †
Next.js 13.4 †
入門 †
tRPC †
GraphQL †
|
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
