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

Question

Next.js newbie here. I've been reading through the Next.js docs and came across this:

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.

My question is, why is this JSON file needed? If the page is rendered into static HTML at build time using the props provided by getStaticProps , why does the page component exist at runtime and needs access to those props?

Answer 1

JSON file is more lightweight and faster than html file. At the same time when getStaticProps fetch data from a backend the backed give response in a json formatted data. It's hard to decode the data every time and make a html file for that.

Another reason why getStaticProps generates a JSON file is getStaticProps gives you another kind of rendering where you can use revalidate property is the amount in seconds after which a page re-generation. It means the JSON file will re-generate after that second. And JSON file generate is more easy than the html file cause backend gives you data response in a JSON format and you don't need to decode it.

Suppose you have a array of product and you want to show in a page and every product in a single product page. In this scenario if you have a JSON formatted data you can fetch the data for all product page and single product page. But if you think the html scenario, you have to make a html file for all product then you have to make particularly html file for every single product.