Menu

10 Reasons Why You Need To Use GatsbyJS

When it comes to choosing a technology to build your website, business or product, it is important to ensure that the platform is stable and using the latest in web technologies.

Amongst the noise of current frontend technologies, Gatsbyjs makes a strong case for standing out. Gatsbyjs, at its core, is a static site generator, it produces static assets for a website, that is then used to seamlessly upload to a web host.

These static assets contain content, images, CSS, JavaScript and HTML the building blocks of a website in its most basic and minified format. Due to Gatsbyjs’s optimizations, these assets are amazingly performant and result in very fast website speeds, as such this has given Gatsby its reputation as one of the fastest web technology tools in the business.

But we are just touching the surface here, let’s explore 10 reasons why Gatsbyjs should be used in your next project.

Amazing Open Source Community

If you were to look through various Github issues and communication channels between its creators and contributors, it’s clear that Gatsbyjs has a great open source community. The Gatsby team has stated that more than 2,500 people have contributed to their project since it started in 2015.

There is a constant feedback loop cycling between the creators and its community, and as a result, Gatsby itself has become more refined as a software product. This is clearly demonstrated in their advertising of community contributions. Essentially, the Gatsby team is looking to celebrate what their community is building with their tech.

This is even more apparent in their showcase submissions.

If you are looking to get a sense of what Gatsbyjs is capable of, look no further. A robust variety of sites and documentation that have been built with Gatsby are featured in the showcase.

If you are looking to launch a very fast website as soon as possible, the open-source community has also created a wide range of starter templates for Gatsby sites. These starter types include blogs, eCommerce sites, and portfolios. These templates feature many configurable frontend options

Here are some notable examples:

These templates are not to be underestimated in terms of the technologies they have been created with. Some notable features include:

If you are looking to showcase your own Gatsby project, you can follow the directions here. In relation to Gatsby’s interactions with their community, in a somewhat unusual hiring tactic, Gatsby asked their users to propose a dream job.

The candidate can define what their dream role would be working at Gatsby. From this, the Gatsby team can investigate to see if the desired role would be possible.

Additionally, the Gatsby team also offer swag for their community for contributing to their product.

This reinforces the idea of Gatsbyjs being community-focused. It is evident that they are looking for people as passionate about web tech as they are.

Investor Funding

As of the 26th of September, Kyle Matthews, the founder of Gatsby, announced that they have received 15 million in series A funding.

There was already a significant amount of buzz surrounding Gatsbyjs and it was gaining popularity quite rapidly, however, this announcement has really cemented the value that Gatsby has created as a software product. The proof is really in the pudding here, Gatsbyjs has always bolstered its tech-first approach in its product development. 

This is evident in its approach to community involvement and the desire to utilize the latest web technologies to create performant websites. They have stuck to this mantra during its early refinements. To then be recognized by a series A investment is a significant milestone and will undoubtedly propel Gatsby to the forefront of companies that are trying to change how we interact with the web.

In addition to the funding, some of Gatsby’s users consist of some very recognizable brands including:

  • IBM
  • Paypal
  • Braun
  • Airbnb
  • Fabric
  • Snapkit

Being an open-source project, Gatsby monetizes its suite of tools by offering a hosted service called Gatsby Preview.

This lets teams of developers have a shareable sandbox environment where changes to design, development, and content can be previewed using a temporary URL. This enables agile feedback for discovering what works for a team’s website or web app.

Without having ever used this feature I couldn’t comment on how good this is but it is one of Gatsby’s only streams of revenue.

It’s unlikely that the pool of series A investors would have been interested in this subscription feature if it hadn’t provided tangible value for many different development teams.

Familiar Tooling

Under the hood, Gatsbyjs uses Reactjs for its frontend component architecture. Components are an already well-defined web design pattern. In this pattern, separation of modules exists to handle varying pieces of functionality and layouts of the UI.

Since it is built on Reactjs, Gatsby very much subscribes to this idea and it’s built with component reusability in mind. As well as Reactjs, Webpack is also fully implemented in a Gatsbyjs project.

If you weren’t already aware, Webpack produces minified bundles of HTML, JavaScript, and CSS. This is primarily to optimize the size of a web application’s assets and dependencies.

Amongst these optimizations, Webpack also allows the use of the latest ES6+ JavaScript syntaxes. As a result, this enables the use of the latest refinements of the JavaScript language.

Webpack also provides hot reloading and code splitting built-in. A developer will be working with very familiar conditions with this minimal tooling configuration.

While there is a predefined Webpack configuration setup by default, there is also an option to use a custom webpack configuration file. It is unlikely that you need to set up a custom configuration Webpack file, with Gatsby having a predetermined config out of the box.

A lot of Gatsby’s performance benefits can be attributed to its default Webpack configurations. Smart bundling ensures that production assets are as minified as possible.

Overall, this provided familiarity ensures that developers are working in a configuration environment that is familiar to them. As a result, using Gatsby is not as much of a departure from other configuration settings of modern front-end stacks.

Website Performance

While we briefly mentioned the performance benefits of Gatsby, you might be wondering how the performance is achieved.

Well, even though Gatsby is built with modern single page application technologies such as Reactjs, its production output results in lightweight static assets. These assets are essentially prerendering all the markup and assets of a website to ensure that there are no long loading times for users. 

With performance being at the core of a Gatsby’s website, it’s important to have assets of a production build to be as small as possible. Not all users are able to avail of high-speed internet connections, this is especially true on mobile devices.

With a Gatsby built website, website owners are able to serve their visitors with the smallest and most optimized site possible. As you would expect, assets such as images, JavaScript, HTML and CSS are all minified and bundled effectively to be as small as possible.

But it’s not only these assets that are transformed, content such as articles and Markdown text are also included in this process.

Remember, that the end result of these compiled assets is still producing state of the art PWAs (Progressive Web Applications). This is where Gatsby differs from sites using ordinary static assets.

Having this full app-like experiences ensure that there are no reloads between pages. Your users will not experience any significant loading times and will have smooth transitions between pages.

Expansive Plugin Ecosystem

One of the most impressive aspects of Gatsby is its comprehensive plugin ecosystem. While it’s not nearly as vast as platforms like WordPress, it is constantly growing and there many solid options to choose from.

The plugins that are currently available are of very high quality and provide significant value for the problems they solve. For example, the WordPress plugin enables the use of WordPress as a headless CMS.

When running the command gatsby build, the plugin will ping a WordPress instance, take each available data entity, such as posts. And will transform them into static assets ready to deploy.

That’s right, your actual website will never make a request to your WordPress instance as a data source. This has all been taken care of at build time and as a result, there is no need for any external network requests.

This is only scratching the surface of the functionality some of these plugins have.

Some other notable plugins include:

  • Gatsby React Helmet 
    • Allows the control of the documents head in React Component
    • Can add attributes such a title, meta, description etc and they get added to static HTML pages during build time
  • Gatsby Plugin Offline
    • Creates a service worker for your application
    • This assists in increasing offline functionality for users.
  • Gatsby Source Contentful
    • As with similar CMS plugins, pulls data from a CMS source (Contentful) and compiles it into static assets.
  • Gatsby Image
    • It allows the lazy loading of images using Gatsby’s native image processing capabilities.
    • Will serve different sized images to users depending on whether they are processing on mobile, tablet or desktop.
    • Uses a blurring effect to show the preview of images while they load

This is only scratching the surface, there are many other practical plugins available to improve a Gatsby site. If the series A investment is anything to go by, there will undoubtedly be a significant expansion of the plugin ecosystem as Gatsby’s popularity grows.

Smart Image Optimisation

One of the most impressive capabilities of Gatsbyjs is its advanced image optimization. Gatsby is adamant about producing performant websites and perhaps this most apparent in how they manage images.

It’s incredibly important to have images that are as minified as possible in order to reduce the time a user has to wait to retrieve that asset. This is particularly relevant to a website’s SEO, as the watchful eye of Google is constantly paying attention to your site speed more than ever before.

If your user is facing a slow experience this has the potential for your site to be penalized. This is also one of the main reasons why Gatsby’s image optimizations carry so much weight for site search engine ranking.

The image optimization capabilities mainly come from two plugins, gatsby plugin sharp and gatsby image. As we’ve established, the optimal size of an image will be served for each device size and screen resolution.

This can be demonstrated in an example here:

Pay attention to the blur effect, it provides a practical placeholder to give a user the idea that the image asset has almost fully loaded. This traced placeholder is also a lot less jarring for a user to see as opposed to an image that loads bit by bit.

This process reduces the bandwidth of the initial loading time of the image asset. There is a ton of configuration options with gatsby-plugin-sharp including:

  • quality 
  • jpegProgressive 
  • pngCompressionLevel 
  • rayscale 
  • duotone 
  • toFormat 
  • cropFocus 
  • pngCompressionSpeed 

There is a serious amount of flexibility here, more than I can ever see myself using. However, the sheer capabilities available to optimize images are very impressive. It really is a step above platforms that store and process images such as WordPress and Contentful.

GraphQL

If you haven’t heard of GraphQL before, it might worth reading up on some of its benefits. GraphQL works as a query language for API requests. On the server-side, it acts as a run-time for executing queries by utilizing a type query system.

Essentially, GraphQL allows you to query for specific datasets instead of having to deal with data responses that contain more than what’s needed. In an ideal world, we should be able to dictate the exact data we want to be returned from an endpoint. GraphQl look to solve this problem for us

In the context of Gatsbyjs, GraphQL requests come back in the exact shape that was asked for it. It doesn’t have to travel over a network request because it was executed at built time. This makes GraphQL slot in seamlessly into the Gatsbyjs architecture, it can work in harmony with it at built time.

GraphQL also features heavily when it comes to image optimization. It allows explicit image formats/sizes to be requested from a data source at build time. Gatsby was one of the first proponents to use GraphQL on the frontend. As a result, lots of the other frontend technologies have adapted it too.

Seamless Hosting Options

There are quite a significant number of hosting services that have seamless integration with Gatsbyjs. These modern services have embraced Gatsby’s mantra of speed and performance.

Some of the main hosts that sync well with Gatsby include:

Let’s take a closer look at Netlify, as its probably the main web hosting that Gatsby endorses. Its main Gatsby related feature is the ability to integrate a Github deployment for your Gatsby instance.

When you push new changes to your Github, Netlify will detect this, build your site and automatically deploy it. Yep, that’s it, that’s all that required.

This process simplifies the number of steps needed to deploy a website to its host.

Netlify also enables very powerful form integration. By adding a data attribute in a form in your Gatsby website Netlify will detect your form and handle all the data processing for you.

<form name="contact" method="POST" data-netlify="true">
    <p>
        <label>Your Name:
            <input type="text" name="name" />
        </label>
    </p>
    <p>
        <label>Your Email:
            <input type="email" name="email" />
        </label>
    </p>
    <p>
        <label>Your Role:
            <select name="role[]" multiple>
                <option value="leader">Leader</option>
                <option value="follower">Follower</option>
            </select>
        </label>
    </p>
    <p>
        <label>Message:
            <textarea name="message"></textarea>
        </label>
    </p>
    <p>
        <button type="submit">Send</button>
    </p>
</form>

When a submission has been sent, you can view it inside the Netlify dashboard.

Additionally, there is a very effective spam filter by adding the honey pot data attribute.

<form name="contact" method="POST" netlify-honeypot="bot-field" data-netlify="true">
    <p class="hidden">
        <label>Don’t fill this out if you're human:
            <input name="bot-field" />
        </label>
    </p>
    <p>
        <label>Email:
            <input type="text" name="email" />
        </label>
    </p>
    <p>
        <label>Message:
            <textarea name="message"></textarea>
        </label>
    </p>
    <p>
        <button type="submit">Send</button>
    </p>
</form>

Overall, due to Gatsby’s assets being incredibly lightweight, deployment with most hosting services will be relatively straightforward.

CMS Integration Options

Gatsby also forgoes with monolithic CMS systems, it instead will allow the transformation of CMS services to equivalent headless versions. A headless CMS is essentially a back-end only storage for content. Its a repository for data that makes its content accessible via a RESTful API.

Again, there a plethora of options to choose from to use in combination with Gatsby. During build time, Gatsby will send requests to these headless CMS instances, retrieve all the desired data and compile them into manageable static assets.

Some of these options include:

For each of these options, Gatsby has an associated plugin that will be used to pull data from these content sources. Once retrieved, built and deployed, Gatsby simply becomes the view layer for displaying this content.

Improved Security

Due to Gatsbyjs being lightweight built assets. There is a reduced chance of running into comprising security situations.

For example, a WordPress web instance is attached to its admin dashboard. Typically, the admin panel can be accessed using /admin at the end of the website URL. Gatsbyjs doesn’t have this problem, there is usually no indication and no direct link to your associated CMS server, or data source.

As a result, it is highly unlikely that your data can be compromised from a malicious actor browsing through your static site instance. After all, on the surface of your site, all that can be seen are your pre-built blazing-fast static site assets.

Gatsby will only take the required data from its data source an display that in the rendered assets.

The Great Gatsby

Well, I hope I’ve convinced you about the perks of using Gatsby for your next website. If you haven’t realized already, I am a huge advocate of Gatsby. As a developer, it ticks all the boxes in terms of what I look for in exciting web technology.

I’ve built this very website using Gatsby and while I have still yet to take advantage of many of its features, the performance improvements really have been significant.

If you are a developer, I think doubling down on Gatsby is an excellent idea. With its open-source community and ever continuous growth, it may open up a lot of opportunities as its demand increases.

© 2024
Proudly published with Gatsby