Next.js 13（App Router）服务端数据获取最佳实践咨询

核心结论 #

优先在服务端组件中直接获取数据，同时把数据获取的核心逻辑抽离成独立的服务层，而非先单独搭建API路由供客户端请求。这种方式既保留了服务端获取数据的性能优势，又能轻松拓展出供移动端调用的API端点，是兼顾当前需求和未来拓展的最优解。

为什么不先单独做API路由？ #

• 额外网络开销：客户端请求API再拿数据，多了一次浏览器到Next.js服务器的请求，比服务端直接拉取数据的响应速度慢。
• 重复代码冗余：如果先写API路由，后续服务端组件要获取数据要么重复写逻辑，要么还要调用自己的API，完全没必要。
• 浪费框架特性：服务端组件是Next.js 13 App Router的核心优势，能直接渲染带数据的页面，首屏加载速度和SEO表现都更好，放弃这个特性得不偿失。

正确实现方式：抽离服务层逻辑 #

把数据获取的核心逻辑（比如从数据库查询文章列表）封装成独立函数，放在lib/或services/目录下，示例：

// services/posts.js
export async function getPosts() {
  // 直接调用数据库或第三方服务
  const res = await fetch(process.env.DATABASE_URL + '/posts', { cache: 'force-cache' });
  if (!res.ok) throw new Error('获取文章列表失败');
  return res.json();
}

然后在服务端组件里直接调用这个函数：

// app/posts/page.js（默认就是服务端组件）
import { getPosts } from '@/services/posts';

export default async function PostsPage() {
  const posts = await getPosts();
  return (
    <div>
      {posts.map(post => <h3 key={post.id}>{post.title}</h3>)}
    </div>
  );
}

这样既享受了服务端获取数据的性能，又实现了核心逻辑的解耦，后续拓展成本极低。

后续需要移动端API时的拓展方式 #

当需要给移动端提供API接口时，直接在app/api/posts/route.js里复用同一个服务层函数即可：

// app/api/posts/route.js
import { getPosts } from '@/services/posts';
import { NextResponse } from 'next/server';

export async function GET() {
  try {
    const posts = await getPosts();
    return NextResponse.json(posts);
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

完全不需要重复编写数据获取逻辑，直接复用已有的服务层代码，高效且避免了冗余。

额外建议 #

• 缓存策略：在服务层的fetch请求中设置合适的缓存规则（比如cache: 'force-cache'或revalidate），Next.js会自动处理缓存，服务端组件和API路由都能受益。
• 统一错误处理：在服务层集中处理数据获取的错误逻辑，避免在组件和API路由中重复编写错误处理代码。

内容的提问来源于stack exchange，提问作者Cyrill22