时间戳

首页 > 解决方案 > 使用 Next.js 预加载 getServerSideProps 数据？

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

问题描述

我有一个简单的 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.

标签： reactjsnext.js

解决方案

getServerSideProps始终在服务器端运行，也用于客户端导航。

当您data从 getServerSideProps（如果fetch方法执行时没有错误）返回时，它将始终返回一个值。

在您的示例<Loading />中，仅当从返回的数据fetch长度为 0 并且在fetch.

这里的文档https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

推荐阅读