Next.js関連のアプトプット
いなかServer Component
サーバーサイドのみで実行されるコンポーネント
コンポーネント上から直接外部のAPIのデータを取得してレンダリングするといったことが可能になる。
デフォルトでは全てのコンポーネントがServer Componentとして扱われる。
使うケース
- データを取得する
- バックエンドリソースを取得する
- 機密情報を扱う
Client Component
ブラウザ・サーバー両方で実行されるコンポーネント
use clientディレクティブを記述することでClient Componentになる。
インタラクションに必要なコードが含まれているものとして、ブラウザに送られる。
使うケース
- インタラクティブな機能を持つ
- コンポーネントに保持した状態を扱う
- ブラウザ専用のAPI・Hooksを使用する
- React Classコンポーネントを使用する
App RouterではServer／Client Componentのように境界が存在することで、ブラウザに送るJavaScriptを必要最小限に抑えられ、パフォーマンスの向上が見込める。
いなかfetch関数
何も指定しなければ静的データ取得と扱われて結果はキャッシュされる。
動的データとして取得したい場合は、cache:no-storeを指定する。
Time-based Revalidation
revalidateオプションで指定した期間キャッシュする機能
いなかレンダリング
- 静的レンダリングRoute
- 全てのリクエストに対して、同一のレンダリング結果をポストする
- レンダリング結果をHTMLなどの静的ファイルに出力しておき、レスポンスとして使用する
- 基本的に全てのRouteを静的レンダリングしようと試みる
- 動的レンダリングRoute
- リクエストの内容に応じて、異なるレンダリング結果をポストする
いなかParallel Routes
Slotと呼ばれるものを使用して作成する。@folderというフォルダ名規約を使用する。
Layoutにおいて、childrenと同じようにpropsとして渡される。
Intercepting Routes
Routeを横取りするためのRoute定義。
通常定義されたSegmentをインターセプトし、このフォルダ内に格納された異なるSegment定義を画面として提供する。
ソフトナビゲーション時のみ発動する。画面リロードはハードナビゲーションになるため、インターセプトは発生しない。
いなかRotue Handler
静的Route Handler
レスポンスボディをあらかじめキャッシュファイルとして出力する。
リクエストのたびに外部Web API サーバーからデータを取得する必要がない。
動的Route Handler
以下の要因が検出されると、動的Route Handlerとみなす。
- Dynamic Segment 値の参照
- Request オブジェクトの参照
- 動的関数の使用
- GETとHEAD以外のHTTP関数のexport
- Segment Config Optionの指定
いなか環境変数
ロード順
- 環境変数がprocess.envに設定される
- .env.development.localファイルが読み込まれてprocess.envに設定される
- .env.localファイルが読み込まれてprocess.envに設定される
- .env.developmentファイルが読み込まれてprocess.envに設定される
- .envファイルが読み込まれてprocess.envに設定される
Publicな環境変数
NEXT_PUBLIC_という接頭辞がついた環境変数をNext.jsはブラウザ向けにインライン化しても問題ないPublicな環境変数とみなす。
ただ、ビルド時の値に凍結されるので、一度出力された静的ファイル内の環境変数を変えるには再ビルドする必要がある。