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

Answer 2

您需要使用next / router提供的isFallback方法。看看这段代码，尝试寻找isfallback https://github.com/vercel/next-site/blob/master/pages/docs/%5B%5B...slug%5D%5D.js。

Edit: 

`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: res ? {
            data,
            id,
            url,
        } : {}
    };
}
`


and in your component

    const router = useRouter();
    const { isFallback } = router
    if (isFallback) {
        return <Loading />
    }
    else {
        return (
            // render data
        )
    }

Answer 3

很明显，当用户单击链接时，用户不应等待几秒钟什么都没有发生（因为getServerSideProps尚未完成加载）。他应该看到一些动作正在发生，例如：

加载微调器
数据模板（用于存储图像，文本等的框），youtube example。

但是，目前无法使用getServerSideProps，因为仅在getServerSideProps请求完成后才呈现页面。

next.js about this上存在将来的请求，所以我希望它会得到实现。

用Next.js预加载getServerSideProps数据？

3 个答案: