用 Next.js 框架里面改进过的 fetch ，可以请求服务端应用接口获得需要的数据。

新建一个文件，放在 app/posts 的下面，名字是 service.ts，在这个文件里可以定义一个请求内容列表接口用的函数，export 一个 getPosts，它是一个函数，用 async 标记一下，在函数里面声明一个 response，等于 await ，用一下 fetch。

先设置一下请求的地址，用一下 appConfig.apiBaseUrl，后面加上斜线 posts。最后让方法 return 请求回来的数据，用一下 response.json() 这个方法。

请求

打开 posts/page，在这个组件里声明一个 posts，等于 await，用一下 getPosts()，用 async 标记一下这个函数。在下面可以在控制台上输出 posts。

测试

在浏览器，访问一下“内容”页面，然后观察一下控制台上输出的东西，这里并没有输出请求回来的内容列表数据，这是因为请求是在服务端做的。

服务端组件

在运行项目开发服务的终端，观察一下，你会发现这里输出了一组内容列表数据。

在 Next.js 应用里，在 app 目录里的组件默认都是 Server Component，也就是服务端组件，这些组件是在服务端完成渲染的。