Build Your Blazing Fast Site with Gatsby
Every new technological leap has great use cases. If you have been following some of the popular JavaScript folks and other developers on Twitter, you'd have noticed them talking about Gatsby. Is it merely a buzzword?
Introducing JAMstack
You would have heard of LAMP stack or MEAN stack or even MERN stack. So, what is this new term?
Gatsby is part of the larger umbrella called JAMstack. What does it mean and how is it going to change the way we develop sites?
JAMstack.com defines the term as "Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup."
JAM stands for:
JavaScript - The dynamic language that powers the web. We use JavaScript for fetching data and handling logic and interactions.
APIs - The only way of talking to the server is via APIs using JavaScript. This is generally REST API or a GraphQL API.
Markup - Content mark up is prebuilt when deploying. This is where Static Site Generators like Gatsby come in.
For a site to be a JAMstack site, there should be no tight coupling between client and server like in a typical WordPress site.
Lo and behold, Gatsby has arrived!
Gatsby is a blazing-fast static site generator which uses React for rendering the markup. It is rising in popularity now and developers, both experienced and newcomers love the experience it brings. To be specific, Gatsby has a phenomenal Developer Experience (DX) and even better User Experience (UX) with its instant load times and more.
Big businesses have understood the benefits of Gatsby and are using it to power their front-ends. For instance, the React library's docs are powered by Gatsby! There must be a reason why React themselves chose Gatsby for their documentation site. Let's continue exploring why.
Why should you consider using Gatsby
Need for Speed
One of the cool things about Gatsby is that it pre-builds all your pages at deploy time. This means it fetches your raw data via REST API, GraphQL or file system and uses your JSX templates to create static files. So, your generated /public folder will contain HTML, CSS and JS files ready to be served. This happens due to Server-Side Rendering (SSR) at build time, which increases the performance of your site by order of magnitudes.
Thanks to many under the hood optimizations with Gatsby such as route-based code-splitting and prefetching, you are able to get great speeds for your site. Throw in a CDN, and you are all set for the ultimate speed optimization.
Low Server Costs
Since Gatsby serves only static files, it is extremely light on resources. You can literally get free hosting for your websites. Yes, you read that right. A few hosting providers like Netflify offer free hosting for static sites and thanks to Gatsby, you can leverage that. As a bonus, you can make use of Netlify Forms and Netlify Functions for free up to a certain limit.
A company was able to bring their server costs from $5000/month to $5/month, thanks to Gatsby. Don't believe me? Take a look here.
Security
Every other day, you hear news about a WordPress site being hacked. Some webmasters unknowingly set their credentials as 'admin' and 'password123', making them sitting targets for the bad folks.
What about with Gatsby? Well, since you do not have a live connection to the server and database, there is little a hacker can do. While you need to be mindful of keeping all doors locked, if someone with malicious intent does get in, recompiling the site with Gatsby and restoring it will be swift.
https://twitter.com/jasonbahl/status/1096151434461011968
Beginner Friendly
The early versions of React may have put off designers and traditional developers, but Gatsby (which uses React) is very welcoming even to newcomers. For example, their tutorials are very much suited to those getting familiar with web development.
GraphQL is the new hot topic in APIs and is poised to replace REST API. It is essentially a way to create a schema of your backend data in a graph-like format. It will allow you to query data by only asking for the properties that you need (QL stands for query language). This is in contrast to REST API which returns all fields related to an endpoint. GraphQL will have a single endpoint and you can query data all sorts of ways - even from multiple objects or tables.
The advantage with Gatsby is that you don't have to learn how to set up a GraphQL backend. For instance, if you use a source plugin (we'll get to it soon) such as gatsby-source-wordpress, it will convert your WordPress REST API endpoints to a stitched GraphQL schema from which you can query for data.
You will be able to get up to speed with GraphQL in no time - thanks to the GraphQL browser-based IDE that you get when you run gatsby develop on your development environment.
Gatsby is Cool with Accessibility
Gatsby uses Reach Router under the hood for routing between pages. This has support for accessibility (a11y) where the tab index gets reset to the top of the page after clicking a link.
"Reach Router provides out-of-the-box focus management so your apps are significantly more accessible without you breaking a sweat."
Moreover, it has a cool check for the alt attribute for <img> tags. It essentially forces you to add alternate text when your image may not load or when a visually-impaired person is unable to see the image.
Progressive Web Apps (PWA)
One of the big advantages I saw when building sites with Gatsby is that you get all the benefits of PWAs out of the box. Gatsby does the heavy-lifting for you and has support for offline support and a lot more out of the box.
SEO
One of the main components to good SEO is good performance. Thanks to the nimble Gatsby, you get great Search Engine Optimization which almost always scores 100 on Google's Lighthouse audits. Your end-users care a lot about SEO and you can now boast about it and tell them to just write good content.
When I started using React in 2015, I couldn't get good SEO since the entire app was client-side rendered, meaning it won't work with JavaScript disabled. The good news is Gatsby works well even when JavaScript is turned off.
Hello, Progressive Enhancement!
Gatsby Apps are Web Apps
Don't be put off by the term 'static site generator'. Although Gatsby generates static pages at build time, it hydrates into a full-fledged React web app once loaded onto the client's browser. This means you are able to use all the component lifecycle methods (or React Hooks!), props and state and practically any JavaScript logic.
So, Gatsby has the performance of a static site and the power of a React app.
Getting started with Gatsby
Hopefully, you are now convinced about using Gatsby for your next project. So, you ask yourself, "How do I get started?".
Gatsby is synonymous with speed, and getting started is speedy as well. The default starter will get you up and running in a few minutes.
Below are the steps you need, assuming you have node and npm installed.
bash# Install the Gatsby CLI. npm install -g gatsby-cli # Create a new site. gatsby new gatsby-site # Change directories into site folder. cd gatsby-site # Start development server. gatsby develop$$$$$$$$$$$$$$$
In addition to that, there are starters for pretty much any feature combination you can think of. Be it Bootstrap, AMP, any of your favorite CMSs or even a simple MDX blog - the awesome open-source developers have you covered. Head over to the Gatsby Starters page and choose your favorite to get up and running in no time.
Using different data sources
If you don't want to go the starter route and choose to go with a bare minimum setup - perhaps you want full control - what do you do to fetch your source data?
You're in luck because Gatsby has made it simple for authors to write their own source plugins in addition to the existing source plugins. A source plugin is an npm module that allows you to turn your data into a GraphQL schema from which you can fetch data at build time. For example, the plugin gatsby-source-graphql allows you to select any remote GraphQL endpoint and will create a stitched local schema from it. You can then query from it when coding your Gatsby site.
Another example is gatsby-source-wordpress or gatsby-source-contentful. These allow you to fetch data from a headless CMS like WordPress or Contentful and convert them to a queryable GraphQL schema respectively.
Gatsby Plugins - The Beehive of Functionality
We just saw what source plugins do. A source plugin is a subset of Gatsby plugins. These range from styling plugins to analytics and more. At the time of writing, there are 753 Gatsby plugins on the Gatsby site and this number is growing at a rapid pace.
A popular plugin that comes with most starters is gatsby-plugin-offline. This adds offline support to your Gatsby site.
Another is the gatsby-plugin-react-helmet and allows you to add SEO capabilities to your site with custom <meta> tags and more markup within your site's <head> section.
Yet another example would be gatsby-image which is pretty awesome. It allows you to query images using GraphQL and displays them with a placeholder when the image is being loaded (with the help of a couple other plugins). It also has a cool traced SVG effect which will show up an SVG of the image while it is being loaded. Two more examples would be gatsby-plugin-google-analytics and gatsby-plugin-sass which allow you to add Google Analytics tracking and support for SASS styles respectively.
Gatsby Themes - Building The Skin for Your Web Apps
[Gatsby introduced Themes](https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/ nofollow) in late 2018 and this has opened a whole new way of developing Gatsby sites. You can abstract away data sourcing, transformation and page creation, and concentrate only on content.
You can further have multiple themes for your Blog, Docs and eCommerce sections and tie them up with common design system tokens. You can extend themes with child themes. The possibilities are virtually endless.
Themes are currently in experimental stage and will be out to production soon. I'm working on a project with educator Zac Gordon and a few others where we are porting popular WordPress themes over to Gatsby themes. We call it GatsbyWPThemes. The first project, Twenty Nineteen Gatsby Theme was released recently, and I was the lead developer. Check it out here.
Is Gatsby a silver bullet?
The answer would be no. As an avid fan Gatsby, it's a difficult question but as developers we have to sell the best solution to the client.
Here are some instances I wouldn't generally reach out to Gatsby and their alternatives:
When you need Run-time SSR
Let's say you want an eCommerce solution where products and other information are updated frequently. Gatsby has to rebuild the whole site every time you make a change for it to be reflected and this can be a huge bummer. The team is working on incremental builds and when it comes out, it will be a game-changer to devs like myself.
For the above problem, you would need Server-Side Rendering at run time since it has better performance and SEO. Since Gatsby does SSR only at build time, I would reach out to a frameworld like Next.js. Next is better when you have a complex problem which requires React SSR. In short, you are better off using Gatsby for websites and Next.js for web apps.
When you don't want React
You may have to opt out of Gatsby when your team is not keen about learning and using a library like React. Although I love React and have been using it passionately, there are instances where it may not solve your problem.
Here are some options if you are looking for other Static Site Generators. If the developers are cool with VueJS, then Gridsome is something new which you can check out. Otherwise, you can look at Hugo or Jekyll.
Conclusion
Gatsby has won the hearts of many a developer and my prediction is that it will continue to set the trend for fast, secure, scalable and indexable websites. I encourage you to hop onto the bandwagon and see if it's worth all the hype!
Hint: you will have some fun times ahead.
