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

Question

Next.js 新手。我一直在阅读Next.js 文档并发现了这一点：

Next.js 生成一个包含运行结果的 JSON 文件getStaticProps。JSON 文件将用于通过next/link或进行客户端路由next/router。当您导航到使用 预渲染的页面时getStaticProps，Next.js 会获取此 JSON 文件（在构建时预先计算）并将其用作页面组件的 props。

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

Answer 1

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

getStaticProps生成 JSON 文件的另一个原因是getStaticProps 为您提供另一种渲染方式，您可以在其中使用revalidate属性，即页面重新生成后的秒数。这意味着 JSON 文件将在那一秒后重新生成。JSON 文件生成比 html 文件更容易，因为后端以 JSON 格式提供数据响应，并且不需要对其进行解码。

假设您有一系列产品，并且想要在一个页面中显示，并且每个产品都在单个产品页面中显示。在这种情况下，如果您有 JSON 格式的数据，您可以获取所有产品页面和单个产品页面的数据。但是，如果您考虑 html 场景，则必须为所有产品制作一个 html 文件，然后您必须为每个产品制作专门的 html 文件。