javascript - 为什么在 Next.js 中调用 getStaticProps 会生成 JSON 文件？

Question

这里是 Next.js 新手。我一直在阅读 Next.js docs并遇到了这个:

Next.js generates a JSON file holding the result of running getStaticProps. The JSON file will be used in client-side routing through next/link or next/router. When you navigate to a page that's pre-rendered using getStaticProps, Next.js fetches this JSON file (pre-computed at build time) and uses it as the props for the page component.

我的问题是，为什么需要这个 JSON 文件？如果页面在构建时使用 getStaticProps 提供的属性呈现为静态 HTML，为什么页面组件在运行时存在并且需要访问这些属性？

Answer 1

JSON 文件比 html 文件更轻量、更快。同时，当 getStaticProps 从后端获取数据时，后端会以 json 格式的数据给出响应。很难每次都解码数据并为此制作一个 html 文件。

getStaticProps 生成 JSON 文件的另一个原因是 getStaticProps gives you another kind of rendering您可以在其中使用 revalidate 属性是页面重新生成后的秒数。这意味着 JSON 文件将在那一秒后重新生成。 JSON 文件的生成比 html 文件更容易，因为后端以 JSON 格式为您提供数据响应，您无需对其进行解码。

假设您有一系列产品，并且您希望在一个页面中显示每个产品，并且每个产品都显示在一个产品页面中。在这种情况下，如果您有 JSON 格式的数据，您可以获取所有产品页面和单个产品页面的数据。但是如果你认为 html 场景，你必须为所有产品制作一个 html 文件，那么你必须为每个产品制作特别的 html 文件。