本篇介绍实际开发中常用的
fetch功能,包括
添加请求头
、
发送Cookie
、
缓存失效与自定义
,然后说明如何通过Next.js路由处理器,让应用像API服务器一样工作。
fetch的用法与浏览器中基本相同,但在服务器组件中使用时,也可以利用服务器环境的特性。例如,
添加请求头
或者
附带Cookie
。
const res = await fetch ( 'https://api.example.com/data' , {
headers: {
'Authorization' : 'Bearer my-token' ,
},
});
这样就可以把认证令牌或用户信息等必要请求头一并发送。
传递Cookie:使用cookies() API 🔗
服务器组件可以通过Next.js内置的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请求指定
标签(tag)
,以便针对特定标签对应的数据进行
失效处理(invalidate)
。
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 캐시 무효화
}
这样,当用户修改数据时,就可以只重新获取与该数据有关的请求结果。
Next.js可以在
app/api/目录中定义
路由处理器(Route Handlers)
,像独立API服务器一样工作。
例如,获取用户信息的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响应。
路由处理器可以分别为
GET、
POST、
PUT、
DELETE等方法编写函数,也可以与服务器操作结合使用。
本篇介绍了自定义Next.js的
fetch请求,以及通过缓存失效更灵活地管理数据的方法。同时也确认了,路由处理器可以实现前后端集成在一起的API结构。
下一篇会
综合整理
整个系列,比较不同场景下适合使用的策略。
如果希望按用户数据分别缓存,应如何处理?
API请求失败时,如何设计自动重试或回退逻辑?