"Next.js 16 App Router 深度实践"

2026/07/24技术Next.js

为什么选择 App Router

Next.js 16 的 App Router 带来了服务端组件 (RSC)、流式渲染 (Streaming) 和嵌套布局 (Nested Layouts) 三大核心能力。

服务端组件

服务端组件在服务端渲染，不会增加客户端的 JavaScript 体积：

// 这是一个服务端组件 — 没有 "use client"
async function BlogList() {
  const posts = await getPosts() // 直接访问数据库
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

流式渲染

配合 loading.tsx 和 Suspense，可以实现页面的渐进式加载：

import { Suspense } from "react"
 
export default function Page() {
  return (
    <div>
      <h1>博客</h1>
      <Suspense fallback={<Loading />}>
        <BlogList />
      </Suspense>
    </div>
  )
}

客户端组件 vs 服务端组件

特性	服务端组件	客户端组件
交互/状态	❌	✅
数据库访问	✅	❌
减少 JS 体积	✅	❌
Hook 使用	❌	✅

总结

App Router 不是简单的路由升级，而是一种新的思维方式。善用服务端组件和流式渲染，可以显著提升用户体验。

暂无评论，来写第一条吧。