Next.js getStaticProps() not rendering static HTML properly

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:

<!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":"[email protected]","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. 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. Also why are so many <script> tags being generated at the begining? Thanks in advance.

Solution

Well I got it working and came here to help others that might have the same problem.

If you're using Redux with redux-persist, the PersistGate is causing the issue. Pass the store with a Provider and the issue is gone (the store will still persist).