
| 策略(点击跳转) | 位置 | 执行时机 | 优点 | 缺点 |
|---|---|---|---|---|
| 服务器组件fetch | app/page.tsx、app/layout.tsx等 | HTML生成前 | 加载快,SEO友好 | 不适合动态交互 |
| 客户端组件与useEffect | 'use client'组件 | 挂载后 | 可以在用户交互后获取数据 | 初始加载可能较慢 |
| SWR或React Query | 客户端组件 | 挂载后,并使用缓存 | 自动缓存、重新验证与重新获取 | 可能增加打包体积 |
| 路由处理器API | app/api/** | 需要拆分服务器API时 | 可以承担后端职责 | 需要额外配置 |
| ISR与revalidate | 服务器组件 | 缓存与重新生成 | 改善数据及时性 | 指定时间内保留缓存 |
| no-store | 服务器组件 | 始终获取最新数据 | 每次请求重新获取 | 性能成本更高 |
revalidate设置更新周期。fetch('https://api.example.com/docs', {
next: { revalidate: 3600 }, // 1시간마다 갱신
});const cookieStore = cookies();
const token = cookieStore.get('auth');
await fetch('https://api.example.com/user', {
headers: { Authorization: `Bearer ${token?.value}` },
});'use client';
const { data, mutate } = useSWR('/api/posts', fetcher);
// 사용자 액션 후 mutate()cache: 'no-store'。await fetch('https://api.example.com/status', { cache: 'no-store' });fetch、缓存策略、SWR、路由处理器与缓存失效,覆盖实际项目中常见的使用情况。
Next.js数据获取与React紧密相关,因此理解