Next.js getStaticProps() 未正确呈现静态 HTML

Question

我的组件如下所示：


import React from "react"

function about(props) {
  
  return (
    <>
     <h2>List users:</h2>
      <ul>
        {props.users.map((user) => {
          return <li>{user.name}</li>
        })}
      </ul>
     </>
  )
}

export default about

export async function getStaticProps() {

  console.log("Pedido GSP")
  const res = await fetch("https://jsonplaceholder.typicode.com/users")
  
  const users = await res.json()
  
  return {
    props: {
      users,
    }, // will be passed to the page component as props
    revalidate: 60  
  }
}

构建后我生成的 HTML 文件如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charSet="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <meta name="next-head-count" content="2"/>
        <link rel="preload" href="/_next/static/css/120f2e2270820d49a21f.css" as="style"/>
        <link rel="stylesheet" href="/_next/static/css/120f2e2270820d49a21f.css" data-n-g=""/>
        <noscript data-n-css=""></noscript>
        <script defer="" nomodule="" src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"></script>
        <script src="/_next/static/chunks/webpack-93d688579f639ac646b4.js" defer=""></script>
        <script src="/_next/static/chunks/framework-fb2dd7aba3784ca05084.js" defer=""></script>
        <script src="/_next/static/chunks/main-89e612c37cd79392e22d.js" defer=""></script>
        <script src="/_next/static/chunks/pages/_app-fd5464216d5252770dc3.js" defer=""></script>
        <script src="/_next/static/chunks/pages/GSSP-43e12c3600ead54767ee.js" defer=""></script>
        <script src="/_next/static/zNXWEGrv_m38JDMSXfB2l/_buildManifest.js" defer=""></script>
        <script src="/_next/static/zNXWEGrv_m38JDMSXfB2l/_ssgManifest.js" defer=""></script>
    </head>
    <body>
        <div id="__next"></div>
        <script id="__NEXT_DATA__" type="application/json">
            {"props":{"pageProps":{"users":[{"id":1,"name":"Leanne Graham","username":"Bret","email":"Sincere@april.biz","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},(...),"page":"/GSSP","query":{},"buildId":"zNXWEGrv_m38JDMSXfB2l","isFallback":false,"gssp":true,"scriptLoader":[]}
        </script>
    </body>
</html>

就我一直在学习的内容而言，<div id="__next"></div> 不应为空，它应包含已呈现的用户列表。页面加载正常，但我相信列表是在浏览器上创建的，而不是在服务器上创建的。我是 Next 的新手，在将项目与 Redux 合并时得到了这个结果。另外为什么一开始就生成了这么多 <script> 标签？提前致谢。

Answer 1

好吧，我成功了，来到这里是为了帮助可能遇到同样问题的其他人。

如果您将 Redux 与 redux-persist 一起使用，则 PersistGate 会导致问题。通过供应商传递商店，问题消失了（商店仍然存在）。

Next.js getStaticProps() 未正确呈现静态 HTML

Next.js getStaticProps() not rendering static HTML properly

reactjs

redux

next.js