【Next.js】
KeigoIbarakiServer Actions
Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.
【Next.js】Server Actionsを現場で使うテクニック
Actions フォルダに記載する
- 別ファイルに記載することで可読性向上
- Client Compenent の場合は別ファイルで記載することが必須なので、Client Component, Server Component どちらからも使えるようになるメリットがある
図解
疑問
Server 側で実行されるとはどういうことだろ？
KeigoIbarakiServer Component
Server Compoent（RCS）はサーバーサイドのみで実行されるコンポーネント.
コンポーネントを非同期関数（async function）で書くことが可能.
Next.js だとデフォルトで全てのコンポーネントが Server Component.
Client Component
Client Component はコンポーネントツリーの一部を「ブラウザ・サーバーの両方で実行されるコンポーネント」として実行できるコンポーネント.
"use client" ディレクティブを記述する必要がある.
ブラウザで実行される JavaScript を使って UI をインタラクティブにする一連のプロセスを「ハイドレーション」と呼ぶ.
※ from GPT
ハイドレーションのプロセス
サーバーサイドレンダリング： 最初にサーバーでHTMLが生成され、クライアント（ブラウザ）に送信されます。この時点ではHTMLは静的で、JavaScriptによるインタラクションはできませんが、ページの内容はすでに表示されています。
ハイドレーション： ブラウザが送られてきたHTMLをレンダリングした後、JavaScriptのコードが実行されます。このJavaScriptは、HTMLのDOM構造に再びバインド（紐づけ）され、インタラクティブな動作が可能な状態にします。これによって、ボタンのクリック、フォームの送信など、ユーザーが行う操作に応答するようになります。
Server Component / Client Component の使い分け
- Server Component を使うケース
- データを取得する
- バックエンドリソースを取得する
- 機密情報を扱う
- Client Component を使うケース
- インタラクティブな機能を持つ
- コンポーネントに保持した情報を扱う
- ブラウザ専用の API を使用する
- ブラウザ専用の Hooks を使用する
- React Class コンポーネントを使用する
疑問集
- Server Component の「データを取得する」と「バックエンドリソースを取得する」の違いは何？
- Client Component のブラウザ専用の Hooks って、他に何かある？
KeigoIbaraki深掘り Server Component
データ取得
async await でデータ取得するパターン
メリット
- バックエンドリソースへ直接アクセス
- アクセストークンや API キーなどの機密情報がクライアントサイドに漏洩することを防ぐ
- クライアント・サーバー間における通信の往復回数を削減
- クライアント・サーバー間におけるウォーターフォールの削減
fetch 関数を使用したデータ取得関数を都度ようにする
メリット
- どう入ったデータを取得しているかがわかりやすい
- リクエストのメモ化の考慮もれが起こりづらい
KeigoIbarakiパフォーマンスとキャッシュ
コンポーネント構造
- Pages Router では、サーバーサイドのデータを取得できる箇所が各画面の Route ごとに 1箇所.
- App Router の場合はどの Server Component でもサーバーサイドのデータを取得可能.
fetchCache の設定
静的 Route を増やす実装
SSG Route の実装
その他・参考
- SSG と SSR
KeigoIbarakiSegment 構成ファイルの命名規則
※ from GPT
Next.js は、ネストされたルート内で特定の動作を持つ UI を作成するための特別なファイルを提供します.
| ファイル | 説明（英語） | 説明（日本語） |
|---|---|---|
layout |
Shared UI for a segment and its children | セグメントおよびその子要素に共通する UI |
page |
Unique UI of a route and make routes publicly accessible | ルート固有の UI で、ルートを公開状態にする |
loading |
Loading UI for a segment and its children | セグメントおよびその子要素のためのローディング UI |
not-found |
Not found UI for a segment and its children | セグメントおよびその子要素のための 404 ページ |
error |
Error UI for a segment and its children | セグメントおよびその子要素のためのエラー UI |
global-error |
Global Error UI | グローバルエラー UI |
route |
Server-side API endpoint | サーバーサイドの API エンドポイント |
template |
Specialized re-rendered Layout UI | 特定の再レンダリングされたレイアウト UI |
default |
Fallback UI for Parallel Routes | パラレルルートのフォールバック UI |
KeigoIbarakiNext.jsの考え方 から学ぶ
第1部 データフェッチ
はじめに
Server Components とは？
データフェッチ on Server Components
データフェッチは Client Component ではなく Server Component を使う
Client Component のデメリット
😢 パフォーマンスと設計のトレードオフ
- 通信回数とシンプルな設計はトレードオフになりがち
- 通信回数を優先すると God API と呼ばれる責務の大きな API が生まれる
- 変更容易性が低い
- パフォーマンス問題が起きやすい
- 責務を小さくすると Chatty API になりがち
- 通信が起きやすい
- 通信回数を優先すると God API と呼ばれる責務の大きな API が生まれる
😢 実装コストが高くなる
- cache 機能を搭載した 3rd party ライブラリを使う
- しかし、リクエスト先の API はパブリックなネットワークに公開するための堅牢なセキュリティが必要になる
- 3rd party ライブラリの学習コストと責務設計・API のセキュリティ考慮が必要
😢 バンドルサイズの増加
バンドルサイズ：アプリケーションのコード、関連リソース（JS, CSS, image）などの複数のファイルをまとめた際のファイルサイズ
React Server Components を使っての対策
🛠️ React Server Components
React チームは React がサーバーをうまく活用できていないことが問題であると捉えて解決を目指した
その結果生まれたのが React Server Components
App Router は RSC をサポートしていて、データフェッチは Server Components で行うことがベストプラクティスとしている