getStaticProps 返回空对象答案

【问题标题】：getStaticProps returning empthy objectgetStaticProps 返回空对象
【发布时间】：2020-12-04 02:08:31
【问题描述】：

在 IndexPage 上，我正在使用 getStaticProps 调用 api。当我在前端 console.log 时，我在浏览器上得到一个空对象。

我正在使用 NextJS

   const IndexPage = (props) => {
     console.log(props)
    return(
      <h1>Hello</h1>
    )
    }
    

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos");
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default IndexPage;

【问题讨论】：

标签： javascript reactjs next.js server-side-rendering

【解决方案1】：

没有玩弄它，但我几乎可以肯定，如果您查看启动 nextjs 应用程序的控制台的控制台输出，您会在那里看到结果，请看一下。这是文档中的解释：

如果您从页面导出名为 getStaticProps 的异步函数，Next.js 将在构建时使用 getStaticProps 返回的道具预渲染此页面。

这里的关键部分将在构建时预渲染。所以getStaticProps会在服务端渲染的时候被服务端调用。

【讨论】：

是的，它确实登录了终端，但我想在前端显示数据
没问题，我假设您不希望只在前端进行控制台记录，在这种情况下，只需将其包装成您需要的 html。 Nextjs 将在服务器端渲染所有内容并返回已渲染的帖子。试着从你的InpdexPage返回这个：return props.posts.map(post => <h2>{post.title}</h2>)