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

Question

My component looks like this:我的组件如下所示：


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  
  }
}

My generated HTML file after build looks like these:构建后生成的 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>

For what I've been learning the <div id="__next"></div> should'nt be empty, it should contain the list of users already rendered.对于我一直在学习的内容， <div id="__next"></div>不应为空，它应包含已呈现的用户列表。 The page loads normally, but I believe the list is being created on the browser instead of being on the server.页面正常加载，但我相信列表是在浏览器上创建的，而不是在服务器上。 I'm new to Next and I got to this result while merging the project with Redux.我是 Next 的新手，在将项目与 Redux 合并时得到了这个结果。 Also why are so many <script> tags being generated at the begining?另外为什么在开始时生成了这么多<script>标签？ Thanks in advance.提前致谢。

Answer 1

Well I got it working and came here to help other that might have the same problem.好吧，我让它工作了，来到这里帮助其他可能有同样问题的人。

If you're using Redux with redux-persist, the is causing the issue.如果您将 Redux 与 redux-persist 一起使用，则会导致问题。 Pass the store with a Provider and the issue is gone (the store will still persist).使用 Provider 传递商店，问题就消失了（商店仍然存在）。

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

问题描述

1 个解决方案

解决方案1
0 2021-10-25 16:33:58

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

问题描述

1 个解决方案

解决方案1 0 2021-10-25 16:33:58

解决方案1
0 2021-10-25 16:33:58