If you’ve already invested in a new website you know that there’s much more to web development than what you see on the screen.
As developers, we can’t stress enough that you get what you pay for.
So, to help you make an informed decision as to what’s best for your business (hint - no, it’s not a WordPress theme), let’s take a look at GatsbyJS - a web solution that’s taking our industry by storm.
What is Gatsby JS?
GatsbyJS is an open-source React-based, GraphQL powered static site generator (SSG).
In slightly more simple terms, this means that it combines the very best bits of React, Webpack, React-router, GraphQL, and other front-end tools, creating one single solution that web developers love to use.
It uses precompilation features to build a website that only uses static files, resulting in amazingly fast page loads, code splitting, server-side rendering, image lazy loading, asset optimization and data prefetching.
What makes Gatsby so awesome?
While Gatsby may be pretty new on the IT scene, it really is a force to be reckoned with. You’re probably wondering why, right?
- 🔎 SEO. There’s no doubt about it - Gatsby builds the fastest websites in the world, and we’re not even exaggerating! As page speed is such a major ranking factor when it comes to SEO, it’s no wonder Google loves Gatsby sites. It also gets a number of other SEO brownie points by being so secure and highly adaptable.
- 💲 Free hosting…well, nearly! Right now if you have a basic website and want better performance you need to invest in good hosting, which can get pretty expensive. With Gatsby, that’s not the case as Gatsby hosting works on a freemium model.
- 🚀 Quicker development. Developers love Gatsby, and because it’s such a pleasure to work with, developers are able to work more efficiently, which means you get your site back sooner.
- 📲 It’s like one big app. UX is such a major factor in getting sales from your website, and that’s why Gatsby is so great. Gatsby websites feel like one big app, so they’re really simple for users to navigate their path to purchase.
- 😁 Happy site = happy life! Ok, that doesn’t quite make as much sense as happy wife happy life, but you get the idea! If users love your site, they’re going to buy and that’s going to make you (and the big boss) happy. Plus, you won’t get complaints from people having a moan about the website taking too long to load, etc.
More about great advantages of Gatsby you can read here, here, and here.
Are there any other good alternatives to Gatsby?
Yes, there are a couple of alternatives to Gatsby out there. You have Jekyll, Next.js, Hugo, Hexo. There are a number of other alternatives, but these ones we’ve just mentioned are by far the most popular.
The thing about Gatsby, though, is that it is more feature-rich than its competitors, and its use cases are the main thing that wins over its users.
Top comments (32)
No. By far not. For building static websites it is overly complex.
This question is a different beast. You could rephrase it to
Which is harder to answer. The point of gatsby is not - or at least not only - delivering static websites. Or to put it another way: Gatsby reshapes the term static website. Static websites done with gatsby are not your granpa's ol' static sites anymore. Neither the way of data retrieval for generating content is anything like back in the day, nor are the static websites static in such a way that the content is fixed.
So from my point of view Gatsby is a very singular entity which has no real pendant. Of course there is vuepress or even nuxt but which are no real alternative. Gridsome may be the alternative - but I have to admit, not having looked into that.
With the exception of maybe Gridsome I would say there is (perhaps) no alternative to do Gastbythings without Gatsby.
Thanks for great insight!
One major drawback that I had with Gatsby is that it does not allow for partial building. We have some customers with thousands of products that sometimes constantly update. Which needs to be pushed asap to the site. So that would require a rebuild of all those pages.
More than 1000 "items" is a no go to Gatsby. Use Next.js instead
You might be interested in this. gatsbyjs.org/blog/2019-06-12-perfo...
I have an wordpress site with more then 9000 articles... I'm using next.js to convert it, with graphql wordpress API, is it to much for gatsby?
Hi Rodolpho, as per your requirements you may also find Frontity useful, very similar to Next.js but 100% focused on WordPress.
'Enge reported that sites have seen crawl issues when implementing AngularJS (a popular JavaScript library) and SPA (Single-Page Application).
A guide titled "Get started with dynamic rendering" on the Google Developers site states, "Currently, it's difficult to process JavaScript and not all search engine crawlers are able to process it successfully or immediately."
For sites that rely on JavaScript to render content, the risk is that crawl issues can affect indexing and rankings.
The fix: Google recommends dynamic rendering, which detects visits from crawlers and routes the request to a renderer. According to Google, "Where needed, the dynamic renderer serves a version of the content that's suitable to the crawler, for example, it may serve a static HTML version." Enge referenced Prerender.io as one option sites can use for dynamic rendering.'
cmswire.com/digital-marketing/read...
i love the builds but I hate ranking js sites, even pwa is slow to slot.
Nice resource, thanks a lot!
ps all that being said, ive just taken a react site nationally against large MNCs to the top with over 89 #1s but it took time. pm for details
I don't have much experience with web development or web technologies, and decided to build a personal website to help me get familiar with some.
There were a few things I considered when choosing how to pursue this, and thus how to limit decisions. They included:
Since the main goal of this project is to help me in my technical growth, I wanted to roll my own site instead of using a site building service like WIX or SquareSpace.
But I've been developing software professionally for 5 years now, and I've grown to appreciate the idea of "don't reinvent the wheel unless you need to" and of "separating your concerns", so I wanted my tech stack to include cutting-edge web development technologies and allow me to separate my content from my structure from my design from my behavior.
In short, I wanted to develop my site like I would any other bit of software, and so I went looking for a nice blend of power, speed, size, and flexibility.
I quickly decided that using a static site generator was something I wanted: it offered the ability to develop my site like an application, but serve it without all the baggage. I narrowed my decision down to four:
In the end, all seemed great for my use case; I chose Gatsby because it didn't require knowledge of anything beyond JavaScript, HTML, and CSS: the fundamental languages of the web.
Learning to speak those was my overall goal, and I was worried that if I chose Jekyll or Hakyll I'd get lost in the weeds of learning Ruby and Haskell (feats I'm trying to consider "out of scope" for this project).
In the end, I eliminated Hugo because as a product, it felt like it was trying to be too much. I value essentialism: Gatsby had a kernel and allowed extension via plugins, like my favorite text editors; while Hugo seemed to have a lot of useful features that I would never use baked in, which meant sooner or later I'd trip over them.
I haven't made much progress on my site itself, but I've learned a ton about how a website can work already. Gatsby has been a joy to work with so far.
Thanks a lot Daniel!
It's a very interesting insight for many people with the same goal as yours!
I will definitely put it in my article update.
Thanks again for sharing!
these js sites are notoriously harder to rank over traditional, while they on paper the performance an xp the difference is night and day, Google/crawlers still struggle to read them correctly. they even admitted it.
Indeed.
My friend wrote also about server vs client side rendering.
May be helpful with the bigger apps.
blog.pagepro.co/2019/11/13/ssrvscsr/
However, crawling the app itself can be hard, maybe it is a good way to build well-converting and ranked landing page, for the first point of touch with users?
ah great cheers thank you
@meuwka , @Mariusz It depends, guys. I think we all aware of limitations GatsbyJS has: webman.pro/blog/is-gatsbyjs-great-....
But I don't think it makes NextJS better over GatsbyJS or opposite. We need to take a case to determine what fits project better.
@wwwebman thanks, the article is awesome!
Totally agree with you as well. Depends on what's the goal and the case.
I've also made one on When not to use Gatsby:
pagepro.co/blog/2020/01/03/when-no...
Cheers!
Gridsome is the best alternative to Gatsby.
I know of gridsome but didn't take a closer look so far. Have you done production stuff with it? How well does it work? I am curious and would be glad to hear about a good alternative on the vue side of things.
Hi Thomas. I am currently developing an ecommerce pwa based on Gridsome and deployed on Netlify. The site is very fast and very SEO friendly. It will be on production within a month. So far I am very happy with it and I consider Gridsome ready for production.
Great, will have to see it in action :)
Great post!
I have been learning Gatsby, and as a codenewbie, I love it!
What resources you recommend to learn Gatsby besides the documentation?
All tutorials I find focus on building a blog, I have a bigger project that I would love to use Gatsby for, so I need some more learning material.
Thanks.
Thanks a lot @pachi!
Indeed, there are not too many resources. I mostly learn as I go.
Soon we will prepare our own internal materials, I will definitely put them here in the near future!
Patternlab is a good alternative.
Interesting, thanks!
You can't use Gatsby for a web store? I'm getting confused with what would be a static or dynamic page.
You can definitely use Gatsby for e-commerce. I have used Snipcart for a simple store, but I have seen a ton of Gatsby sites using Shopify.
Also with Gatsby you can mix static and dynamite content on a page or have dynamic routes along with the static ‘normal’ pages. Gatsby is super flexible and powerful.
You can have dynamic code inside. For stores I prefer Next.js.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.