reactjs - 使用 Next.js 预加载 getServerSideProps 数据？

Question

我有一个简单的 React 组件:

const Page = ({ data }) => {
    return (
        <header>
        {data.length !== 0 ?
          <>
            {data((d) =>
              // render data
            )}
          </>
          :
          <>Loading...</>
        }
        </header>
      )
    }

我正在使用推荐的 Next.js 获取数据 getServerSideProps :

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`someurl`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

现在，看在上帝的份上，我不明白为什么 <>Loading...</>从不渲染。页面是空白的，然后一切都弹出。为什么会发生这种情况，我该如何解决？当然 data.length 在它被获取之前是 0 ......
注意我正在使用动态路由并且不想使用 getStaticProps .

Answer 1

getServerSideProps始终在服务器端运行，也用于客户端导航。
当您返回时 data来自 getServerSideProps (如果 fetch 方法执行没有错误)它将始终返回一个值。
在您的示例中 <Loading />仅当数据从 fetch 返回时才可见长度为 0，并且在 fetch 期间永远不可见.
这里的文档 https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering