Gatsby: Smart way to build websites

Gatsby is Frontend framework based on React and GraphQL with plugins for almost anything one can imagine some of which are officially supported. The plugin approach makes it modular, want to handle images with optimisation and lazy loading, install gatsby-plugin-image, need convert Markdown to HTML? install gatsby-transformer-remark and leave all the work to Gatsby.

Behind The Scenes

1. Few pages (ex. Home, about, contact, products )
2. SEO
3. Progressive image loading
4. Fast page loading
5. Highly customisable
6. Intelligent data prefetching

Pages

Whether use any framework or not, to register every page we manually have to link them with specific routes. Gatsby does this automatically, just create a js|jsx file in pages folder and that page is linked to route same as file name, there is 404 page (404.js) too which is rendered for every other route.

Same goes for Markdown files or any other format, Gatsby knows what inside the folder, it fetched everything using file system and sourced it all to GraphQL, one can named export any query from any component and that will be available as props. That's how the blog listing works in this site.

SEO

All the pages are SSR rendered improving the SEO automatically besides, it's also provide gatsby-plugin-react-helmet which allows for different meta tags based on page, use Helmet component and write all SEO related meta tags inside it, rest of things will taken care.

Progressive image loading

While loading a website a a low quality is loaded first (~ 20px x 20px) and when user scrolls to that image or all other assets are fetched high resolution image will be loaded.

Fast page loading

On initial load a partial page is loaded which have the layout and all the text, HTML + CSS mostly and in next fraction of seconds JS is fetched and parsed which makes the bootstrap the React and routing capabilities.

Highly customisable

There are two types of API exposed

Many events like onInitialClientRender, onRouteUpdate, disableCorePrefetching, onCreateDevServer, onCreatePage are exposed and some of them can be overwritten while others act as hooks. This can be done by creating a gatsby-browser.js or gatsby-node.js

Intelligent data prefetching

Can the page get more faster? Yes! As all pages server side rendered there static data (generated by GraphQL) can be pre-fetched after the current page finishes loading, this happens for the next accessible pages from the current page which are in viewport. Things for generated Markdown pages are even better, as you can seen in the gif, as I am scrolling down the data for each blog is fetched and when I click on a blog (last one in this case), it instantly loads, it's HTML was already fetched what loads after clicking, assets.

Automation is what Gatsby did, it took the best pratices and optimisation techniques and applied them during the build time and website which were already easy to make again due to automation at development time became more optimized and faster in production, not only static website, one can create full fledged e commerce website with Gatsby, that's why it matter.

Checkout my blog's Github Repo based on Gatsby