NextJS 13 路由处理程序与直接从服务器组件获取-解网

问：

我一直在寻找这个问题的答案，但什么也找不到。

在NextJs 13中，您可以使用服务器组件。您还可以在应用目录中创建 route.ts 文件来制作 API 端点。

创建 route.ts 而不是直接在服务器组件中调用相同的 fetch 有什么区别（或好处）？它们都在服务器上，所以并不是说路由只在服务器上，但组件中的提取在客户端上。我无法判断我是否应该为我的所有 api 调用设置 route.ts，还是直接在 RSC 组件中调用？

谢谢

下一个.js 反应服务器组件

服务器操作的一大优点是，您不直接调用客户端组件中的任何业务逻辑，如果您将仅限服务器的会话与 iron-session 之类的会话一起使用，这将特别有用。虽然创建路由处理程序仍然是一种完全有效的方法，但它确实大大增加了编写的样板代码的数量。

interface Props {
  params: { id: string },
}

export default async function ListPage({ params }: Props) {
  const { id } = params;

  const endReached = async (start: number): Promise<User[]> => {
    "use server";

    const headers = await getAuthHeaders();
    const response = await fetch(`https://api.io/users/${id}?start=${start}`, {
      headers,
    });

    return await response.json();
  };

  const initialData = await endReached(0);
  return <MyClientList initialData={initialData} endReached={endReached} />;
}

在上面的例子中，从你的客户端组件的角度来看，它内部没有直接调用的业务逻辑。这不仅确保了简单性和可维护性，而且确保了组件的可重用性。

"use client";

interface Props {
  endReached: () => Promise<User[]>;
  initialData: User[];
}

export default function MyClientList(props: Props) {
  const { initialData, endReached } = props;

  const [users, setUsers] = useState(initialData);

  const onClick = useCallback(() => {
    const nextUsers = await endReached(users.length);
    setUsers((prev) => [...prev, ...nextUsers]);
  }, [users.length, endReached]);

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <button onClick={onClick}>Load more</button>
    </div>
  );
}

您的客户端组件不仅从初始数据开始，不需要显示任何加载状态，而且您可以使用返回正确数据的任何其他函数切换回调，并且它仍然有效。

NextJS 13 路由处理程序与直接从服务器组件获取

nextjs 13 route handlers vs fetch directly from server component

评论

评论