请问，在React中， `const data = await getData()` 这个代码执行的时机是哪个生命周期？

Question

请问，在React中，

const data = await getData() 这个代码执行的时机是生命周期的哪个点？

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  // Recommendation: handle errors
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

Answer 1

当做一个函数去看，函数组件 Page 渲染过程中即执行

Answer 2

Page函数是不能加async的，这样返回结果是个Promise, 渲染不出来的页面的

Answer 3

export async function getServerSideProps(context) {
  const data = await getData();

  return {
    props: { data }, // will be passed to the page component as props
  };
}

export default function Page({ data }) {
  return <main>{/* 使用你的数据 */}</main>;
}