Fetch data at runtime or build-time?

We can use Gatsbyjs to fetch data from the Sanity server both at build time and real-time. It depends on the situation whether you want to fetch data at real or build time.

The data fetch at build time will remain constant afterward unless the code is rebuilt. For example, If we publish the changes in the Sanity Studio after the code is built, the latest changes will not be reflected on the Gatsby website since the data is fetched only once at build time.

The benefit of fetching data at build time is that we don't have to communicate (send HTTP requests) to the Sanity Server, once the data is built. It helps to save the save money. You can calculate the pricing for Sanity usage on this page.

While on the other hand, in real-time, we can query and mutate the live data.

For example, in our case, the customer will check out after choosing the plan for the course. We want the customer should immediately access the course content rather than wait for the website to rebuild.

In the Sanity Studio, we created the following documents as below:

Product, Price, Content, Subscription, Customer

In the below table, We describe which data .

Please note that the we'll render the Sanity document in build time for which data does not changes frequently.

So here are the takeaway points:

• For the customer, and subscription document (data), we want to query/mutate it in real-time because it involves the interaction with the public customer. For that, we can send HTTP requests (along with the query parameter) to the Sanity API route to create/mutate the data/documents.
• For the Product, Price, and Content document (data), the admins are responsible to create and mutate the data. We can use the Sanity Source plugin to source the data at build time (Just as we did to fetch the blog post data).

In the next section, we'll learn how we can actually use the Gatsby to fetch data at the build and run time.