Features

There are many ways to build a website. If you're considering Gatsby, you may also be looking at some alternatives:

  • Traditional static site generators such as Jekyll let you put text or markdown in a specific directory such as pages/ in a version-controlled codebase. They then build a specific kind of site, usually a blog, as HTML files from the content you've added. These files can be cached and served from a CDN.
  • Content Management Systems (CMSs) like Wordpress give you an online text editor to create content. You customize the look and feel through choosing themes and plugins, or writing custom PHP or Javascript code. Content is saved in a database, which is retrieved and sent to users when they visit the website. Depending on your requirements you can self-host your website, or use an official hosting provider.
  • Site builders like Squarespace are a type of hosted closed-source CMS. They focus on making it fast to build a website; however, they don't allow self-hosting or enable you to export your website and customize it.

The chart below details Gatsby's capabilities in comparison with a representative from each category. Click on any row to see a more detailed explanation on that feature and our rating for each system.

Legend

Icon

Feature Availability
Out of the box
Plugins available
Needs customization
Not possible

Icon

Feature Availability
Out of the box
Plugins available
Needs customization
Not possible

Performance

FeatureGatsbyStatic site gensCMSSite buildersFaster content delivery
Can you build your site as 'static' files which can be deployed without a server, cached on CDN distributed throughout the globe?
  • Gatsby, like Jekyll and other static site generators, is built for this.
  • Squarespace allows static content but doesn't allow it to be edited with the CMS.
  • Wordpress allows it with some customization.
Feature
  • CDN-providing hosts like Netlify support sites built on Gatsby and other static frameworks
  • Wordpress allows this through plugins.
  • Site builders like Squarespace usually come with a CDN out of the box.
Feature
Google's AMP format is a specific type of static page format enabling faster loads. AMP pages are privileged in Google search results. Progressive Web
Offline access via service workers is one of the core principles of Progressive Web Apps, since many users -- especially in developing countries -- will be accessing your site over spotty connections. Gatsby supports this out of the box; adoption is possible with Jekyll and Wordpress. Squarespace doesn't currently support any offline access.Feature

Gatsby supports content pre-fetching, out of the box. This means that when a page loads, the content needed to load the next link you click will be loaded in the background while you browse the page.

You can put this together in considerably more tricky for Wordpress & requires maintaining dual PHP and JS templates.

Feature

Fingerprinting static resources that aren't expected to change lets browsers serve content locally when a user visits a page they've already been to, as opposed to making an extra network call.

Gatsby and Jekyll support this out of the box, while Wordpress allows this via plugins and Squarespace doesn't allow it at all.

Feature
Extraneous code fetches is typically done by single-page applications written in various JS frameworks; on page load they fetch the code needed to run the entire application rather than just the page that's loaded. Website-building frameworks tend to be fiine on this.Faster time to interaction

Progressive image loading means displaying a blurry placeholder image before loading the full heavyweight asset. This prevents the display from "bouncing around" as images load in addition to making the page feel complete before they have.

The most well-known implementation of this is on Medium-hosted blogs. Gatsby comes with this feature out of the box (demo at using-gatsby-image.gatsbyjs.org); it takes custom per-page code on other code-based platforms.

Feature

Responsive images enable modern browsers to load the right size of image assets given browser size -- that way users with high-resolution, large-screen devices can get a high-quality image while users on low-resolution or small-screen devices don't spend extra time waiting for the page to load when a low-resolution asset would suffice. Gatsby comes with this feature out of the box (demo at using-gatsby-image.gatsbyjs.org).

Wordpress and Squarespace supports this out-of-the-box automatically, while Jekyll requires some customization.

Feature

There's two ways to get CSS on your web page -- inline it with your html, or load it on a separate page referenced in your html. If you reference CSS in a separate page, your client's browser will block page loading until it receives the CSS file. This can delay interactivity by 500ms (on a fast connection), to 3+ seconds on a slow connection.

Gatsby offers this out of the box; in other frameworks it is usually possible but requires a lot of custom code, often written on a per-page basis.

Feature

Google Fonts and other open-source font libraries are helpful in building beautiful sites. The hard part is what you don't see -- a page load blocking request to Google's servers. While this request is pretty fast, even faster is hosting fonts on your own server, so you can just load them from your local filesystem.

This is doable with Wordpress and Jekyll; Gatsby open-sourced a library enabling this for Gatsby and other Javascipt-based apps; it's baked into the framework.

Developer Experience

FeatureGatsbyStatic site gensCMSSite buildersMaintenance & Extensibility

Serverless means not having to worry about security and framework upgrades. It means reduced ops -- you don't have to ssh into a live production server and see what's going on.

Hosted is not quite as good as serverless -- they still have a server you just don't see it.

Feature

If your site is built on open-source software, you can change your hosting provider; and customize to your heart's content.

If you use a site-builder, you're locked into a specific platform and a specific provider. If they don't offer a feature you need, your only option is to rebuild your site on a different platform. You also assume additional business risk that the platform goes out of business or moves in a direction different than you had hoped.

Faster edit/debug cycle time
Refreshing & Click To Preview are standard features of content creation workflows. When you write or edit a post, in order to preview what your content looks like, you click a Preview button, or refresh the page.Feature
Hot reloading is an innovation of modern web development. As you edit content, you see the resulting UI change in your local development environment browser without refreshing the page. Gatsby offers this out of the box; Jekyll offers this through plugins; Wordpress offers a partial version where content in posts you edit is seen in your editing page as you change the text.Feature
Hot reloading is an innovation of modern web development. As you edit code, you see the resulting UI change in your local development environment browser without refreshing the page. Gatsby offers this out of the box; Jekyll offers this through plugins; Wordpress does not offer this feature while editing components.Declarative frameworks
Component systems allow developers to plug-n-play either external 3rd party components or internal components from a shared codebase or component library. Wordpress and Squarespace both support this; Gatsby supports this through React; other static site generators like Jekyll don't offer this at all.Feature

Gatsby is built on top of React, which uses a one-directional data binding system for its components. One-directional data flows are essential to building complex frontend components by removing complex cross-dependencies present in alternate data flow approaches, such as MVC.

React's one-directional data flow is a pattern, rather than a library, so you could in theory implement in PHP / Wordpress, but there's no out-of-the-box solution.

Feature
Gatsby is built on top of GraphQL, which allows you to write declarative queries for the data you want, and co-locate your components. Its build system pulls all of the data in for you, so you can query it in your local GraphiQL IDE / query constructor in order to get data in the shape you're looking for.Feature
Gatsby is built on top of React, which allows a hierarchical UI construction by declaratively passing props down child trees. When components are behaving oddly, you can inspect their state using the DevTools extension and compare expected state of each element in a hierarchy to the actual state, enabling faster debug cycles compared to alternate frameworks.Modern code syntax

Asset pipelines are the compilers of the web stack -- turning images and code in a variety of developer-friendly languages (SCSS, LESS, CSS modules, templates, JSX, JS modules, ES7, ES6, Typescript, Flow...) into minified, raw HTML, CSS and JS that browsers can parse.

Gatsby provides asset pipelining out of the box through its build system on top of Webpack and Babel. Wordpress and Jekyll don't provide this, although you could set up your own. Squarespace has a limited and tightly controlled development environment (no local development) that doesn't allow for creating an asset pipeline.

Feature
Languages such as Sass and Less compile to CSS while offering support for variables, functions, hierarchal class definitions; libraries like glamor and aphrodite allow css to be colocated with JS and HTML in React. This solves problems in vanilla CSS like global namespacing, non-determinatism, dead code elimination and minificationFeature
Javascript has become more powerful as a language in the last several years, making it easier to write code. These include:
  • Syntactic sugar: arrow functions, destructuring, template strings, dynamic object property names.
  • Language features: Classes, static variables, generators, async control flows like promises & async / await
  • Data structures / types and modularity: Maps, sets, modules, module loading, unicode...

Ecosystem

FeatureGatsbyStatic site gensCMSSite buildersEcosystem
React has several sets of out-of-the-box component libraries, as well as curated sets eg JSCoachFeature
Gatsby and other static site generators can be plugged into static hosts such as Netlify or surge.sh. Wordpress and Squarespace both come with built-in hosting.Feature
Gatsby offers various themes through Typography.js, and Jekyll has themes built on it as well. Wordpress and Squarespace offer support for multiple themes through theme selectors out of the box.

Design

FeatureGatsbyStatic site gensCMSSite buildersFaster design iterations
Gatsby offers support for programmatic design by being built on Typography.js.Feature
Gatsby offers native support for design systems through react-sketch, a tool allowing you to export your production React components into Sketch. Other frameworks aren't plugged into the React ecosystem.Feature
Gatsby offers native support for component libraries through react-sketch, a tool allowing you to export your production React components into Sketch. Other frameworks aren't plugged into the React ecosystem.

Want to help keep this information complete, accurate, and up-to-date? Please comment here.