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

Posted 2023-02-22

技术标签:

【中文标题】Next.js getStaticProps() 无法正确呈现静态 HTML【英文标题】：Next.js getStaticProps() not rendering static HTML properly 【发布时间】：2021-12-11 01:48:05 【问题描述】：

我的组件如下所示：


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> 标签？提前致谢。

【问题讨论】：

查看 next.js 文档，当使用 getStaticProps() 时，它会创建一个 JSON 文件来保存 getStaticProps() 的结果，而 HTML 文件将在渲染时在浏览器中使用这个 JSON 数据，它不会t 再次调用 API nextjs.org/docs/basic-features/… 【参考方案1】：

好吧，我得到了它的工作，并来到这里帮助可能有同样问题的其他人。

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

【讨论】：

以上是关于Next.js getStaticProps() 无法正确呈现静态 HTML的主要内容，如果未能解决你的问题，请参考以下文章