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.
Oldest comments (32)
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.
Will check 11ty seems nice
You can't use Gatsby for a web store? I'm getting confused with what would be a static or dynamic page.
You can have dynamic code inside. For stores I prefer Next.js.
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.
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!
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 :)
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
'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.
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
Nice resource, thanks a lot!
Patternlab is a good alternative.
Interesting, thanks!
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!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.