Source the data in Gatsby at build time

In this section, we learn how we're going to source the blog content in Gatsby.

In our case, we'll use markdown to render the blog content. The blog content on the website remains constant throughout (changes once or twice a month). Once we publish the post, we might not need to change or edit it later. My point is that if you are thinking of post content that does not change frequently, we can use Static side rendering to render the blog content.

So, what does Static side rendering really mean?

Static side rendering is by default rendering mode in Gatsby. It simply means that the entire site is prerendered into HTML, CSS, and JavaScript at the build time.

The Static sites are always fast as compared to any other rendering mode e.g. (SSR).

Let's explain static sites...

In order for the website to deploy on the server e.g. Netlify, AWS, Google cloud; we need to first build the Gatsby Project. For this project, we are using Reactjs in the Gatsby Framework. The Reactjs language is not understood by the browser. The browser can understand the native language e.g. HTML, CSS, vanilla Javascript, etc. We need to compile the React library to the native browser language at build time.

Next, we can generate the pages and data at the build time that remains constant. In real-time, when the user visits the website, the website content is loaded that is generated at build time.

For example, you look at the below image for your reference.

In the above image, the website shows the number of developers count. One way to render the developer count is that we can execute the query in the database to get the developer count every time the user visits the page. But... this will put a burden on the database server and cost.

The better option is that we can generate the developer count at the built time and later the user can view the developer count in real-time. The user might not see the real-time developer count from the database because the website was built in the past.

For this course, we use static rendering to render the blog content and source the data from the filesystem.

Sourcing the post content...

To fetch the post content at the build time, we can use a source plugin, and later we can use GraphQL to query the data.

Gatsby supports a handful of plugins to source the data at build time. You can search for different source plugins at the Gatsby official plugin page. In the search bar, you can type gatsby-source-* to view the different lists of source plugins.

The above plugins are a handful to source the data at build time from the 3rd party platform. For this course, we used to source the blog content from the filesystem. So, We are using gatsby-source-filesystem to source the filesystem data at build time.