像getServerSideProps和getStaticProps这样的方法用于在服务器上获取数据，但它们只对pages文件夹中的页面组件有效（在Next.js中设置路由的初始方式）。
从Next.js 13开始，在app目录（当您对下图中显示的最后一个问题回答是时使用）中，我们有服务器组件，您可以直接在组件主体中获取数据，如下面的代码片段所示（请阅读评论）：

的数据

/*
  If you want to access headers or cookies while fetching data,
  you can use these functions:
*/
import { cookies, headers } from "next/headers";

/*
 If the below component is the default export of a `page.js` and you are using 
 dynamic routes, slugs will be passed as part of `params`, and 
 query strings are passed as part of `searchParams`.
*/
export default async function Component({ params, searchParams }) {
  /* 
    This request should be cached until manually invalidated.
    Similar to `getStaticProps`.
    `force-cache` is the default and can be omitted.
  */
  const staticData = await fetch(`https://...`, { cache: "force-cache" });

  /*
    This request should be refetched on every request.
    Similar to `getServerSideProps`.
  */
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  /* 
    This request should be cached with a lifetime of 10 seconds.
    Similar to `getStaticProps` with the `revalidate` option.
  */
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  });

  return "...";
}

字符串
也就是说，你可以在没有fetch()的情况下获取数据，使用任何库，甚至直接使用ORM与数据库对话，在这种情况下，你可以使用Route Segment Config：

// layout.js OR page.js OR route.js 👈🏽

import prisma from "./lib/prisma";

/*
  Keep one of the possibilities shown below (there are more on the doc), 
  depending on your needs. 
*/

export const revalidate = 10; // If you want to revalidate every 10s
// OR
export const dynamic = "force-dynamic"; // If you want no caching at all
// ...

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}

型

此StackOverFlow问题（无法在Next.js 13中使用GetStaticProp）已作为此问题的重复问题关闭。
为了帮助像我这样的流浪汉：
你不能在Nextjs 13中使用getStaticProps（使用App Router）。
新的方法是使用fetch。你可以阅读更多关于fetch here的内容。

async function getArtist(username: string) {
  const res = await fetch(`https://api.example.com/artist/${username}`)
  return res.json()
}

字符串
这张图片比较了新旧做事方式。image source

的数据
因为新的默认值是缓存所有的获取请求（除非它们选择退出），所以在静态组件中调用fetch与getStaticProps具有相同的效果。
所以要清楚这个正常的获取请求：

//Similar to 'getStaticProps' when used in a static rendering component
fetch(API_URL)

型
与此“强制缓存”请求相同：

//This request would be cached until manually invalidated. 
//Similar to 'getStaticProps'
//Use this type of fetching for data that does not change often.
 
fetch(API_URL, { cache: 'force-cache' })

型
关于默认缓存的更多信息在这里。

为什么要使用getStaticProps？

为了帮助那些在教程中找到getStaticProps并在这里找到方法的用户，你想使用getStaticProps的原因是你想渲染一个页面，然后将该页面发送给每个用户。
这使您的页面更快，向用户发送更少的代码，并且更适合SEO等。
但是如果你需要获取一些数据来渲染页面呢？在Nextjs 13之前，你会使用getStaticProps。
现在你在一个静态组件中fetch。效果是一样的。
这种效果是，一旦（在部署项目时的构建时间）Nextjs将获取一些数据，然后使用该数据渲染页面，然后将预渲染的页面发送给需要它的每个人。
如果您需要使用动态路由静态生成一堆页面，则可以使用generateStaticParams函数在构建时生成路由，而不是在动态路由的请求时按需生成。
对于roadmap，如果你不知道什么是动态路由，就使用fetch。

在app目录中，你不能使用getServerSideProps，getStaticProps，getInitialProps之类的方法来获取数据。而不是与服务器组件一起使用，你可以让组件自定义并直接在组件体中获取数据。此外，你可以将数据传递给客户端组件进行渲染服务。

export async function getData(){
 const res = await fetchData();
 const data = res.json()
 
return data
}

字符串
现在您可以在主组件中调用此函数

export async function(){
   const data = await getData()
   return (<ClientComponent data />)
}

型