今回は、実務で必要になる
fetchの
ヘッダー追加
、
Cookie送信
、
キャッシュ無効化とカスタマイズ
を扱います。
続いて、Route HandlerでAPIサーバーのように動作させる方法を確認します。
fetchのカスタマイズ:ヘッダーとCookie 🔗
fetchはブラウザーとほぼ同じように使えますが、Server Componentsではサーバー環境の特徴を活用できます。
たとえば、
ヘッダーを追加
したり、
Cookieを含めたり
できます。
const res = await fetch ( 'https://api.example.com/data' , {
headers: {
'Authorization' : 'Bearer my-token' ,
},
});
認証トークンやユーザー情報など、必要なヘッダーを送れます。
cookies() APIでCookieを渡す 🔗
Server Componentsでは、組み込みの
cookies()でクライアントのCookieへアクセスできます。
ログイン情報をCookieから読み、要求に含める場合などに使います。
import { cookies } from 'next/headers' ;
const cookieStore = cookies ();
const token = cookieStore. get ( 'token' );
const res = await fetch ( 'https://api.example.com/user' , {
headers: {
Authorization: `Bearer ${ token ?. value }` ,
},
});
認証情報をサーバー側で安全に処理するのに役立ちます。
Next.jsは
fetchに
タグ
を付け、そのタグのデータを簡単に
無効化
する機能を提供します。
await fetch ( 'https://api.example.com/data' , {
next: {
tags: [ 'data' ],
},
});
後でrevalidateTag('data')を呼び、そのキャッシュを無効にできます。
'use server' ;
import { revalidateTag } from 'next/cache' ;
export async function updateSomething () {
// 데이터 수정 로직
await revalidateTag ( 'data' ); // 'data' 태그에 해당하는 fetch 캐시 무효화
}
ユーザーがデータを変更したとき、それに関連する要求だけを正確に再取得させられます。
app/api/に
Route Handler
を定義すると、Next.jsを独自APIサーバーとして使えます。
ユーザー情報を取得する例は、次のとおりです。
// app/api/user/route.ts
import { NextResponse } from 'next/server' ;
export async function GET () {
const res = await fetch ( 'https://jsonplaceholder.typicode.com/users/1' );
const user = await res. json ();
return NextResponse. json (user);
}
これで
/api/userへの要求に、JSONを返すAPIが動作します。
GET、
POST、
PUT、
DELETEなどを、それぞれ関数として実装できます。
Server Actionsとの組み合わせも便利です。
fetchをカスタマイズし、無効化を使ってデータを柔軟に管理する方法を学びました。
Route Handlerを通じて、フロントエンドとバックエンドを統合したAPI構成を実装できることも確認しました。
次回は全体をまとめ、状況ごとに有利な戦略を
総合的に整理
します。
ユーザーごとにキャッシュを分けたい場合は、どうすればよいでしょうか。
APIの失敗時に自動再試行やフォールバックを行うには、どう構成すればよいでしょうか。