像getServerSideProps和getStaticProps这样的方法用于在服务器上获取数据，但它们只对pages文件夹中的页面组件有效（在Next.js中设置路由的初始方式）。
从Next.js 13开始，在app目录中，我们有服务器组件，在那里你可以直接在组件体中获取数据，在那里你想要实现的将如下所示（注意创建的附加文件）：

// app/page.js 👈🏽

import Users from "./users";

export default async function Page() {
  const req = await fetch("https://randomuser.me/api/?gender=female&results=10");
  const data = await req.json();

  return <Users initialUsers={data.results} />;
}

字符串
您需要下面的附加组件，因为您需要客户端交互（这里是一个onClick处理程序），而在上面的服务器Page组件中没有。

// app/users.js 👈🏽

"use client";

import { useEffect, useState } from "react";

export default function Users({ initialUsers }) {
  const [data, setData] = useState(initialUsers);

  const handleClick = async (event) => {
    event.preventDefault();
    const req = await fetch("https://randomuser.me/api/?gender=male&results=100");
    const newData = await req.json();
    setData(newData.results);
  };

  return (
    <div>
      <button onClick={handleClick}>FETCH DATA</button>
      {data.map((user, index) => {
        return (
          <div key={index}>
            {user.email}
            <img src={user.picture.medium} alt="" />
          </div>
        );
      })}
    </div>
  );
}

型
否则，因为你的页面已经是一个顶部有"use client"的客户端组件，你可以简单地使用useEffect来加载初始数据，如下所示：

// app/page.js 👈🏽

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  const [data, setData] = useState([]);

  const handleClick = async (event) => {
    event.preventDefault();
    const req = await fetch("https://randomuser.me/api/?gender=male&results=100");
    const newData = await req.json();
    setData(newData.results);
  };

  useEffect(() => {
    fetch("https://randomuser.me/api/?gender=female&results=10")
      .then((res) => res.json())
      .then((data) => {
        setData(data.results);
      });
  }, []);

  return (
    <div>
      <button onClick={handleClick}>FETCH DATA</button>
      {data.map((user, index) => {
        return (
          <div key={index}>
            {user.email}
            <img src={user.picture.medium} alt="" />
          </div>
        );
      })}
    </div>
  );
}

型

getInitialProps现在是一个遗留API，文档建议使用getStaticProps和getServerSideProps。但由于app router不支持这两种方法，请尝试以下操作：
创建一个服务器组件作为父组件，从中获取初始数据，然后将其传递给客户端组件，在客户端组件中可以处理所有客户端操作。
服务器组件

export async function ServerComponent() {
    const req = await fetch('https://randomuser.me/api/?gender=female&results=10');
    const data = await req.json();

    return (
        <ClientComponent initialData={data.results} />
    )

}

字符串
客户端组件

"use client";

export function ClientComponent({ initialData }) {
const [data, setData] = useState(initialData);

  const fetchData = async () => {
    const req = await fetch(
      "https://randomuser.me/api/?gender=male&results=100"
    );
    const newData = await req.json();

    return setData(newData.results);
  };

  const handleClick = (event) => {
    event.preventDefault();
    fetchData();
  };

  return (
    <div>
      <button onClick={handleClick}>FETCH DATA</button>
      {data.map((user) => {
        return (
          <div>
            {user.email}
            <img src={user.picture.medium} alt="" />
          </div>
        );
      })}
    </div>
  );
}

型