Introduction
The circle of Gatsby websites enthusiasts grows every day. This was expected as companies are looking for modern solutions to expand their businesses online and outrun competitors in Google rankings.
Requirements for such solutions include:
- Outstanding website load times
- Customisation possibilities
- Easy management
- Design freedom
- Love signs from Google
Gatsby web development not only meets some of these requirements but also exceeds them by offering:
- Fast page load speed
- SEO efficiency
- Great user experience
- Data security
- Easy scalability (in the case of traffic spikes)
- Future proof
- And more
That’s what helps companies all around the world to stay ahead of the competition.
However, the question remains – how to make the best use of Gatsby’s benefits and features?
Gatsby.js and Jamstack
Jamstack is very hot lately, as it’s an architecture (or now even a philosophy) that is entirely focused on building superfast and extremely SEO-friendly websites.
And there’s no surprise that Next.js became one of the best Jamstack development frameworks to use nowadays.
If you are more of a business person, or you search for a clear explanation of Jamstack, we’ve made a Jamstack guide for business people called “What is Jamstack?” which will probably answer all the questions that could come to your mind regarding this modern approach.
Maybe the Jamstack approach could be good in your case as well? In this video, we help you decide when is best to use Jamstack, and when not:
Best use cases for Gatsby JS
Companies and organizations choose Gatsby for almost any kind of website. However, there are some cases in which it’s possible to use the full potential of it.
These include:
- Corporate websites
- B2B and SaaS websites
- Personal blog websites
- Digital agency websites
- Small eCommerce websites
- Financial services websites
- Custom landing pages
Corporate websites
Corporate websites are like bigger business cards. They are often the first point of contact for customers. Therefore, they need to work super fast, offer a great user experience, but they aren’t updated frequently. This is a specific case when a static site really shines.
Static websites display the same information for anyone visiting the website. These are mainly informational websites, and there are no login or registration functionalities.
Requirements for corporate websites:
- Great user experience (due to content preload) – so browsing through the website feels familiar.
- Great performance (high Google PageSpeed score) – so visitors won’t run off before your website loads.
- Full SEO support (static HTML files) – so your company’s blog will rank higher.
- Possibility to integrate with (headless) CMS – so you can still use your favourite CMS.
Gatsby meets these requirements because of:
- Being static site generator
- Support for plugins to get content from almost all CMSes, databases, REST APIs, and GraphQL
- Wide range of different plugins, starters, themes and integrations
Examples of corporate websites built with Gatsby
DigitalOcean offers a bunch of tools and solutions for cloud computing dedicated to developers and businesses.
AutoloadIT is an enterprise automotive imaging solution. It supports using high-resolution images to grow car sales.
AutoloadIT is also one of our previous clients.
This JIMDO website offers a website builder to help self-employed build professional websites or stores.
B2B and SaaS websites
The main goal of B2B and SaaS websites is converting visitors into customers.
If you are not sure if migrating your actual websites to Gatsby is worth the effort (and money), consider these metrics:
- The actual cost per lead
- The actual page load speed
- How the page load speed impacts conversion rates
- The ROI of investing in a new Gatsby website
Investing in the Gatsby website can give you higher conversion rates, lower bounce rate and higher organic search traffic.
On top of that, can you afford to be overloaded and risk downtimes, crashes, and all other reasons why people leave websites before they make contact?
Requirements for B2B and SaaS websites:
- Great user experience – so you will gain more trust.
- Fast page load speed and high performance – so you will get a high Google PageSpeed score.
- Full SEO support – so you can leverage content marketing to grow organic traffic customer base.
- Integrations with user analytics and automation marketing tools – so your website can generate leads for your business.
- Integrations with CRM – so you won’t have to change CMS.
Examples of B2B and SaaS websites
An email marketing tool that supports sending email campaigns and email delivery at scale.
By using HASURA you can auto-generate GraphQL and REST APIs.
An award-winning services firm that builds digital platforms.
Want to create a Gatsby website?
Personal blog websites
There are many possible goals for personal blogs like building a personal brand, brain dump, teaching others, earning money, and more.
Therefore, such a blog should be:
- SEO efficient – so your blog posts get found by Google users.
- Fast – so it loads in a blink of an eye.
- Cheap to host – so you can spend more money on coffee and stuff.
- Ready for spikes of traffic – so any viral posts won’t shut down your blog.
- Easy to edit – so you don’t have to pay a developer for small changes.
Costs should be as low as possible – especially when you are just starting out and you don’t want to invest. As Gatsby websites are static websites, they are cheap to host and maintain.
You can host them even for free using:
- GitHub Pages
- Netlify
- Vercel
Examples of personal blog websites
Kent C. Dodds is a software engineer and teacher that specializes in JavaScript. He creates a blog and hosts a podcast. He also offers workshops and courses.
A website to discover books recommended by billionaires, icons, and world-class performers.
Jacob Daniel Castro is a fullstack JavaScript developer who happens to be a blogger, too.
Digital agency websites
As a digital agency, you should treat your website as a reflection of your skills. Therefore, you should put a lot of attention to that, mixing the fast page load speed and additional features, which will show you what you are capable of.
Requirements for digital agency websites:
- Technologically advanced – so it can give you an additional advantage over your competition.
- Super performant – so potential clients will know that you can do the job.
- Accessibility, usability and SEO – so Google will love you.
Thanks to Gatsby, you can create websites that are performant, SEO-efficient and offer a pleasant user experience.
Examples of digital agency websites
The Roboto Studio is a digital agency specializing in building blazingly fast websites using Gatsby, Prismic, and Netlify.
This is an agency helping companies build digital products since 2008.
This is a full-service agency that works with companies to help them build complex systems and innovative digital products.
Small eCommerce websites
Gatsby can be also used for eCommerce websites – as a tool to build customised static storefront for headless web shops.
It’s often integrated with Shopify, as Shopify doesn’t offer many possibilities for customisation by default.
In this scenario of integrating Gatsby with Shopify (or some other eCommerce platform), Gatsby is responsible for a custom storefront. Storefront is where visitors can browse the products and add them to the cart. All within a blink of an eye.
However, the checkout page is served by a traditional eCommerce platform (Shopify in this case).
Requirements for small eCommerce websites:
- Flawless user experience – so you won’t lose customers because they are confused.
- Smooth customer journey – so customers won’t have any trouble buying your products.
- Customisation freedom – so your store can look different from thousands of other stores.
- Fast page load speed – so the number of abandoned carts will fall.
- SEO efficiency – so your organic traffic can grow consistently.
- Data security – so the personal data of your customers stay safe.
Examples of small eCommerce websites
Curology offers custom skin care formulas that consist of three simple ingredients. These formulas are created based on skin profile, skin type, and medical history of each individual.
This is an online store for fans of anime, cartoons, comics, and games.
Otakuchan is also one of our previous clients.
An online store with rugged phone cases and mobile accessories.
Financial services websites
Your customers want a company they can trust with their money. Clean, modern look, fast page load speed and security are the key to build that trust. Also, it will help you demonstrate your company’s trustworthiness and professionalism.
Requirements for financial services websites:
- Easy navigation – so visitors can easily find the information they are interested in.
- Clear, non-confusing design – so visitors know what you are offering.
- User experience adapted to the customer journey – so visitors are not confused what they should do next.
- Fast page load speed – so the bounce rate will fall.
- SEO efficiency – so the visitors can find you using Google.
Examples of financial services websites
They offers a free service to help people buy a car with a loan.
This is a “buy now, pay later” solution based in Canada.
They help families with organising their finances thanks to wills, insurances, and other tools.
Custom landing pages
Messaging and copywriting require constant improvements. Therefore, marketers need to have the possibility to optimise and build landing pages easily. Preferably without the help of developers.
Requirements for custom landing pages:
- Easiness of building – so marketers can do that themselves quickly and effortlessly.
- Fast page load speed – so conversion rates will improve as sites load within milliseconds, not seconds.
- SEO efficiency – so ranking for terms that matter for your business becomes easier.
Examples of custom landing pages
This company aims to help people find their next job easier and faster.
An app that help people unsubscribe from unwanted newsletters in an easy way.
This is an app that helps people share contacts with Gmail users and G Suite team members.
Further readings
To learn more about Gatsby, we recommend you the following articles:
- Gatsby JS Pros and Cons
- Next JS vs Gatsby – Which One to Choose?
- Why is Gatsby JS Good for Google Rankings?
- Pros and Cons of Using Gatsby in WordPress Projects
- 18 Great Examples of Next.js Websites
You can also check our video about Next.js. vs Gatsby.js comparison.
Want to create a Gatsby website?
