NextJS 13 App目录下数据获取服务器组件创建问题

1. 修复 todos.map is not a function 错误 #

你请求的接口返回的是单个Todo对象，而非数组，map方法仅支持数组遍历，直接渲染单个对象的属性即可：

// app/page.tsx（默认是服务器组件）
async function getTodo() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
    next: { revalidate: 86400 } // 可选：设置缓存有效期，单位秒
  });
  if (!res.ok) {
    throw new Error('Failed to fetch todo');
  }
  return res.json(); // 返回单个Todo对象
}

export default async function Home() {
  const todo = await getTodo();
  return (
    <div>
      <h1>Todo Detail</h1>
      <p>ID: {todo.id}</p>
      <p>Title: {todo.title}</p>
      <p>Completed: {todo.completed ? 'Yes' : 'No'}</p>
    </div>
  );
}

2. 静态HTML生成说明 #

上述代码是服务器组件，Next.js会在构建时自动将其预渲染为静态HTML（前提是fetch不依赖请求时的动态数据，比如用户Cookie、请求参数等）。如果需要强制静态生成，可在fetch选项中添加cache: 'force-cache'（该值为默认配置，可省略）。

3. TanStack Query 相关问题处理 #

如果一定要使用TanStack Query，需注意以下几点：

• TanStack Query是客户端工具，组件必须标记'use client'
• 传递给客户端组件的props必须是可序列化的普通对象，避免传递函数、Promise等非序列化值
• 若使用'use server'，需在next.config.js中开启实验性配置：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

module.exports = nextConfig;

但如果你的目标是生成静态HTML，不建议使用TanStack Query（它更适合客户端动态数据获取场景），服务器组件预渲染是更直接的方案。

内容的提问来源于stack exchange，提问作者Asger Skov Velling