Next.js 16 App Router 最佳实践指南：服务器组件、客户端组件与缓存策略

next.js-16-app-router by blockmatic/basilic

89 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/blockmatic/basilic --skill 'Next.js 16 App Router'

开发 JavaScript 框架性能优化

🇨🇳中文介绍

技能：nextjs

适用范围

适用于：Next.js 16 App Router - 服务器组件、客户端组件、API 路由、服务器操作、中间件、缓存
不涵盖：Pages Router、具体部署细节、框架内部实现

前提假设

Next.js 16+
Node.js 20.9+
TypeScript 5.1+
React 19+（以获得完整功能支持）
Turbopack（稳定，默认打包工具）

原则

默认使用服务器组件（直接在组件中使用 async/await）
仅在需要交互性（钩子、事件处理程序）时使用客户端组件（'use client'）
使用服务器操作（'use server'）处理数据变更
使用 use cache 指令实现显式的组件级缓存（Next.js 16）
使用 revalidatePath 和 revalidateTag 进行缓存失效
使用 Suspense 边界处理异步数据加载
使用 useTransition 处理非紧急更新

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

749,400 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

255,700 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

205,600 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

136,300 周安装

使用 useDeferredValue 延迟昂贵的计算

路由处理器使用 route.ts 文件并配合命名导出（GET、POST 等）

默认使用服务器组件（除非必要，否则不使用 'use client'）
使用 'use server' 指令标记服务器操作
数据变更后使用 revalidatePath 或 revalidateTag
在服务器组件中将 searchParams 作为 Promise 处理（Next.js 15+）

对不应阻塞 UI 的繁重更新使用 useTransition
仅对昂贵的操作（1000+ 项）结合 useMemo 使用 useDeferredValue
使用 Suspense 边界实现渐进式加载
使用路由组 (group) 进行组织，而不影响 URL

不必要的 useMemo/useCallback（React 19 处理了大部分优化）
对静态内容使用客户端组件
错误地混合服务器和客户端组件模式
React Compiler（等待更好的生态系统支持）

与 drizzle-orm 配合进行数据库访问
与 ai-sdk-ui 互补实现聊天界面
使用 typescript 确保类型安全

// app/page.tsx
export default async function Page() {
  const data = await fetchData()
  return <div>{data}</div>
}

'use client'
import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

'use server'
import { revalidatePath } from 'next/cache'

export async function createItem(formData: FormData) {
  await createItemInDB(formData)
  revalidatePath('/items')
}

// app/api/items/route.ts
export async function GET() {
  return Response.json({ items: [] })
}

export async function POST(request: Request) {
  const data = await request.json()
  return Response.json({ created: data })
}

'use cache'
export async function CachedComponent() {
  const data = await fetchData() // 在组件级别缓存
  return <div>{data}</div>
}

Next.js 文档 - 完整的 App Router 指南
React 服务器组件 - 服务器组件模式

🇺🇸English

Skill: nextjs

Scope

Applies to: Next.js 16 App Router - Server Components, Client Components, API routes, Server Actions, middleware, caching
Does NOT cover: Pages Router, deployment specifics, framework internals

Assumptions

Next.js 16+
Node.js 20.9+
TypeScript 5.1+
React 19+ (for full feature support)
Turbopack (stable, default bundler)

Principles

Use Server Components by default (async/await directly in components)
Use Client Components ('use client') only for interactivity (hooks, event handlers)
Use Server Actions for mutations ('use server')
Use use cache directive for explicit component-level caching (Next.js 16)
Use revalidatePath and revalidateTag for cache invalidation
Use Suspense boundaries for async data loading
Use useTransition for non-urgent updates
Use useDeferredValue for deferring expensive computations
Route handlers use route.ts files with named exports (GET, POST, etc.)

Constraints

MUST

Use Server Components by default (no 'use client' unless needed)
Mark Server Actions with 'use server' directive
Use revalidatePath or revalidateTag after mutations
Handle searchParams as Promise in Server Components (Next.js 15+)

SHOULD

Use useTransition for heavy updates that shouldn't block UI
Use useDeferredValue with useMemo only for expensive operations (1000+ items)
Use Suspense boundaries for progressive loading
Use route groups (group) for organization without affecting URLs

AVOID

Unnecessary useMemo/useCallback (React 19 handles most optimizations)
Client Components for static content
Mixing Server and Client Component patterns incorrectly
React Compiler (wait for better ecosystem support)

Interactions

Works with drizzle-orm for database access
Complements ai-sdk-ui for chat interfaces
Uses typescript for type safety

Patterns

Server Component

// app/page.tsx
export default async function Page() {
  const data = await fetchData()
  return <div>{data}</div>
}

Client Component

'use client'
import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Server Action

'use server'
import { revalidatePath } from 'next/cache'

export async function createItem(formData: FormData) {
  await createItemInDB(formData)
  revalidatePath('/items')
}

Route Handler

// app/api/items/route.ts
export async function GET() {
  return Response.json({ items: [] })
}

export async function POST(request: Request) {
  const data = await request.json()
  return Response.json({ created: data })
}

Caching

'use cache'
export async function CachedComponent() {
  const data = await fetchData() // Cached at component level
  return <div>{data}</div>
}

References

Next.js Documentation - Complete App Router guide
React Server Components - Server Component patterns

Weekly Installs

Repository

blockmatic/basilic

GitHub Stars

First Seen

Jan 1, 1970

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

103,800 周安装