It's fast, it's secure, it boosts SEO and it provides a great developer experience, but does it fit your use case? For it all comes down to one key question: “When to use GatsbyJS?”
Is it suitable for both a portfolio or documentation site and an app with a large content base? Or a large-scale enterprise website, for instance?
Should you use GatsbyJS irrespective of your/your team's JavaScript experience?
What are the obvious and some of the... less expected use cases for GatsbyJS? Key benefits that would make you want to choose it over a framework like... NextJS, for instance?
Now, let me break down the strongest use cases of Gatsby for you.
See for yourself whether your own use case has made it to the list or not:
1. When to Use GatsbyJS? When You Need a Static Site... Obviously
GatsbyJS's is optimized for this particular use case, after all: generating static websites.
Say you have a static web page (a landing page), that serves plain HTML, some JS, and CSS. As for your more specific types of content, you plan to use Youtube and a platform like Medium to host it on.
Gatsby would make the perfect choice for your use case since:
- it provides server-side-rendering out of the box
- it ships with a heavy load of plugins to delve into (extract data from your CRM of choice: Contentful, Drupal...)
- it has a robust data layer built-in
Use it to create pages dynamically from almost any data source.
2. Use It for Your Documentation/Personal Portfolio Website or Blog
Use GatsbyJS for your blog, eCommerce website, or any other general static site that's under 500 pages, where you don't expect to serve any kind of dynamic content.
Note: there are the obvious use cases of GatsbyJS and the more... project-specific ones.
The volume of content served on your website and the amount of traffic aren't always clear indicators of whether you should or should not use Gatsby.
It's all a matter of infrastructure and of whether:
- you do afford a build process for your React-based web app
- your team's experienced enough to get the most of a micro-service architecture and of serverless functions
- you depend on a database that should reflect, instantly, any changes made
GatsbyJS's built to go beyond small/medium scale static sites if used to its full potential.
3. Use It When You “Crave” High Performance
Not only that it's fast by nature, but GatsbyJS even stands out from the crowd of static site generators...
If page load time is your main concern, you might want to consider Gatsby as your first choice.
4. Use It When Your Project Demands a High Level of Security
“When to use GatsbyJS?” you ask yourself.
When you need to add an extra layer of security to your website.
Since it serves plain HTLM files and there's no database or sensitive customer data stored on the server... there's not much to hack there, is it?
The only thing left to “contaminate” if they do manage to get in is... your HTML files.
5. Use It to Build Your Progressive Web App
For GatsbyJS is far more than just another static site generator:
It's designed, from the ground up, to be a PWA website framework.
Quote source: The New Stack
In this respect, it:
- ships with robust progressive web app features
- is built to be fast and highly accessible across all devices and in all hardware and network contexts
6. Use It If Developer Experience Is One of Your Top Priorities
Luckily enough for your development team, GatsbyJS provides a modern development environment: simple, robust tooling and powerful built-in features.
To give you just a few specific examples:
- it automatically generates static assets like CSS and images from the “static” directory
- it builds routes between pages automatically
- it minifies everything “behind closed doors” before it serves it up to the client
7. Use It If You Have Enough JS/React Experience
One of the few constraints when it comes to using GatsbyJS is the above-the-average JS/React experience required.
There are no two ways about it...
Also, another answer to your “When to use GatsbyJS?” question is:
When you already have some React components or codebase available to reuse on your static web pages.
8. Use It if You Fancy a Huge Ecosystem of Plugins
Source: Reddit.com
Because it ships with an impressive collection of plugins.
Basically, it enables you to enhance your otherwise simple, static website with all kinds of powerful plugins:
- you could just plug Google Analytics into your site
- you could “inject” a gatsby-source-medium plugin and have previews of your articles automatically served up on your website
9. Use It if SEO Is Crucial for You
When to use GatbsyJS?
When the SEO factor is of critical importance to you.
The web performance boost that you'll get from powering your website with Gatsby — since it'll render static HTML only — won't go unnoticed by your users and... by Google itself.
Just make sure:
- a static architecture is, indeed, the right fit for your project
- you've configured your SEO settings properly
10. Use It with a Headless CMS
It's another one of those primary use cases for GatsbyJS:
Pair your Gatsby site with a CMS data source of choice (a “headless” CMS): Contentful, Drupal, Netfly, WordPress.
This way, you pass all the “worries” regarding hosting and serving your data over to your CMS.
GatsybyJS integrates seamlessly with any data repository, so you can focus on implementing your front-end instead.
The END!
These are the top 10 use cases for GatsbyJS, ranging from the most common to specific ones.
Which of its benefits — security, high performance, plugin system, developer experience, CMS integration — is more important for your own use case?
Image by nugroho dwi hartawan from Pixabay
