NextJs SSG Firebase 部署答案

【问题标题】：NextJs SSG Firebase deploymentNextJs SSG Firebase 部署
【发布时间】：2022-01-08 20:29:19
【问题描述】：

TL;DR

构建项目后添加的数据不会显示在任何地方。它在数据库中，但未在网站上显示。

所以我在使用 firebase 作为数据库的同时创建了一个聚会网站。在开发模式下一切正常。即使我构建我的项目并使用next build && next export 导出它，然后使用next start 运行它，它也可以正常工作。但是当我运行firebase deploy --only hosting 命令时，我在本地运行项目时添加的所有新数据都不存在。但它存在于数据库中。

我想问的是firebase不支持SSG吗？？

我做了一些研究，发现 Vercel 上的部署运行良好。

下面是我的index.js 文件代码

function HomePage(props) {
  console.log("Number of meetups: " + props.meetups.length);

  return (
    <Fragment>
      <Head>
        <title>Next Js Meetups</title>
        <meta name="Description" content="Browse a huge list of Meetups" />
      </Head>
      <MeetupList meetups={props.meetups}></MeetupList>
    </Fragment>
  );
}


export async function getStaticProps() {
  // Fetch data from API
  console.log("Getting data in getStaticProps");
  var list = await GetAllMeetups();

  return {
    props: {
      meetups: list,
    },
    revalidate: 5,
  };
}

export default HomePage;

如果我遗漏了什么，请告诉我。

【问题讨论】：

next export 不支持增量静态再生。见Static HTML Export。

标签： javascript reactjs firebase next.js

【解决方案1】：

这是因为getStaticProps仅在您运行 next build && next export 时获取数据。它不会在每次加载页面时获取，仅在构建期间获取。 SSG 的缺点是一旦数据发生变化，您必须重新构建和重新部署您的项目。

如果您希望它每次都更新，请使用 SSR & getServerSideProps，但您将无法在 Firebase 上部署它，因为它仅支持 SSG。对于服务端渲染 Next.js 应用的部署，我个人可以推荐 Netlify。

【讨论】：

但是正如我上面提到的，当我在本地运行项目时，会获取新添加的数据。我正在关注的教程是使用 Vercel 进行部署，但数据也在 tutorial 中获取。
但这不是因为你在部署之前正在重建项目吗？正如我之前提到的，getStaticProps 仅在构建时运行。
对...那么您建议我应该使用 SSR 还是我还有其他选择？？
您仍然可以使用 SSG 来实现此目的，但不要在 getStaticProps 中提取数据，而是在使用 fetch 或 axios 加载组件后在 useEffect 中运行提取。这当然会增加一些延迟，因为它会在页面加载后被获取。您可以使用 SSR 在页面加载时将数据保存在其中，但您将无法使用 Firebase 托管进行部署。
好的。非常感谢您花时间向我解释。