Next.js中使用Server Component请求数据

在Next.js的更新中最大的变化就是增加了app文件夹，以及server component。 在新的Next.js中我们做SSR也不在需要getServerSideProps和getInitProps来在服务器请求数据，因为这两个服务器生命周期函数只能在page路由中使用，在通过状态管理来传值非常不方便。

在本次更新中推出了use函数。无论是组件还是路由都可以再组件内部进行服务器声明周期的fetch请求。

Demo

文件结构：

import { use } from "react";
async function getData() {
 const res = await fetch("https://api.blogweb.cn/links");
 const name: { data: any[] } = await res.json();
 return name.data;
}
const List = () => {
 let data = use(getData());
 return (
   <>
     Component
     {data.map((item: any) => {
       return item.id;
     })}
   </>
 );
};
export default List;

在tsx文件中我们可以直接编写并异步请求数据，在组件中使用use函数来包裹异步请求，使得他同步的返回请求结果，然后就可以直接使用了。