Next.js 15 App Router深度指南：服务端组件的正确打开方式

Next.js 15已经发布，App Router成为默认选项，但很多开发者对服务端组件和客户端组件的边界依然模糊。这篇深度指南帮你彻底理解Next.js 15的渲染哲学，写出高性能的Next.js应用。

一、App Router vs Pages Router

App Router是Next.js 13引入的新一代路由系统，与Pages Router的核心区别：App Router默认服务端渲染，Pages Router默认静态生成；App Router支持React Server Components（RSC）；App Router的布局系统更强大，嵌套布局更灵活；App Router使用约定式文件路由，pages使用文件名路由。


2026年的今天，App Router已经足够成熟，新项目建议直接使用App Router。Pages Router进入维护模式，不会新增功能。

二、服务端组件 vs 客户端组件

这是App Router最核心的概念。服务端组件（Server Components）在服务端渲染，可以直接访问数据库、文件系统、API密钥，生成HTML发送给客户端， bundle不包含组件代码。客户端组件（Client Components）使用"use client"声明，在客户端执行，可以添加交互事件、使用浏览器API、依赖useState/useEffect。

默认规则：如果不确定，先用服务端组件；只有需要交互、useState、useEffect、浏览器API时，才切换到客户端组件。

三、如何正确划分组件

页面布局通常是服务端组件：app/layout.tsx、app/page.tsx这些顶层组件应该是纯粹的，服务端渲染获取数据后直接渲染UI。

需要交互的部分用客户端组件：如按钮、表单、模态框、折叠面板。例如：<button onClick={...}>需要onClick，用"use client"；<form action={...}>可以不用，表单提交本身是服务端的。

常见错误：把整个页面标记为"use client"，导致所有数据都在客户端获取，增加bundle体积和页面加载时间。正确做法：把数据获取和静态内容放在服务端组件，交互部分单独抽出来作为客户端组件。

四、Next.js 15新增特性

Partial Prerendering (PPR)：结合静态生成和动态渲染，页面可以一部分即时加载，一部分延迟加载。TurboPack优化：编译速度比Webpack快10倍，开发体验显著提升。

Server Actions增强：可以显式声明缓存策略，控制Server Action的重新验证时间。

五、缓存机制深度解析

Next.js的缓存系统比较复杂，理解它对于性能优化至关重要：

请求 memoization：fetch请求默认缓存，同一请求在组件树中只执行一次。使用cache()函数自定义缓存粒度。

数据重新验证：router.refresh()可以重新验证服务端组件的数据；revalidatePath()和revalidateTag()可以精确控制缓存失效。

静态资源缓存：_next/static目录的资源默认长期缓存，配合版本号实现缓存更新。

六、SEO最佳实践

App Router对SEO友好，但需要注意：metadata API支持完整的SEO元数据配置；生成sitemap使用next-sitemap或app/sitemap.ts；robots.txt使用app/robots.ts配置。

服务端渲染确保搜索引擎能抓到完整内容，对比SPA的预渲染方案没有劣势。

总结

Next.js 15的App Router是现代React开发的最佳实践之一。理解好Server/Client组件的边界，合理使用服务端渲染，可以让应用同时具备优秀的用户体验和SEO效果。