Why I chose Gatsby
Hi and welcome to my website. I've had fun building this website with
The official marketing message summerizes it pretty well -- "Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps".
The message is pretty easy to understand but let's break it down & especially understand how it can help build blazing fast website.
How Gatsby helps build blazing fast website?
The core principal that drives Gatsby's popularity is it let developers render HTML pages on the server, also called as Server-Side Rendering (SSR), rather than building DOM on browser like most SPA frameworks does, which makes it fast. It's not something new, I remember starting my professional career 10 years ago and using Zend framework & PHP to build pages rendered on server side. But due to popularity of SPA frameworks and rise of smartphones & other smart devices, over the years we have moved to writing APIs in JSON and building JS heavy apps for browser. What Gatsby provide is best of both worlds. The components to be displayed are built on server using React and GraphQL, and are stored as simple HTML pages, so what browser is rendering is actually a static page.
To achieve this Gatsby uses React's Server Side Rendering feature that enables it to render components to static markup during the build process.
My reasons to choose Gatsby was its excellent documentation, SSR and my curiosity to learn GraphQL. Yes, Gatsby ships with support for GraphQL. Fetching of data to power this static site is achived using GraphQL, which makes static site generator not so static.
Coupled with SSR, Gatsby supports an entire ecosystem of different types of open source plugins that can ease development time and provide tons of excellent features out of the box.
The plugin ecosystem
Offline plugin along with
I've always been fan of markdown files (who isn't, right?) but what you think about markdown + react component support? Mind blown.. That exactly was my feeling when I discovered it. This article is generated using MDX. It makes this static markdown file dynamic.
GraphQL adds support for data layer and during build process data for this blog is made available using graphql queries. It is an important feature for me because if I decide to move this static post on to a headless CMS, say Contentful, I can continue using GraphQL to fetch data from Contentful (by using their plugin), and reuse the components. Robin Wieruch summerizes
Not so static website
If I want to add some logic on the client side (a newsletter subscription or authentication), it is possible. Once the site is rendered on browser SPA frameworks like react can function as usual and can be used for adding additional business logic on the client side. This website right now uses