DEV Community

Mariusz for Pagepro

Posted on • Updated on • Originally published at pagepro.co

Is GatsbyJS The Best Framework For Building Static Websites? What Are The Other Alternatives?

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)

Collapse
 
thomasjunkos profile image
Thomas Junkツ

Is GatsbyJS The Best Framework For Building Static Websites?

No. By far not. For building static websites it is overly complex.

Are there any other good alternatives to Gatsby?

This question is a different beast. You could rephrase it to

Is there anything doing Gastsbythings as good as Gatsby

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.

Collapse
 
maniekm profile image
Mariusz

Thanks for great insight!

Collapse
 
ianwijma profile image
Ian Wijma

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.

Collapse
 
lucis profile image
Lucis

More than 1000 "items" is a no go to Gatsby. Use Next.js instead

Collapse
 
brentrobbins profile image
Brent Robbins

You might be interested in this. gatsbyjs.org/blog/2019-06-12-perfo...

Collapse
 
rodolphonetto profile image
Rodolpho Netto

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?

Thread Thread
 
r_martinezduque profile image
Reyes Martínez • Edited

Hi Rodolpho, as per your requirements you may also find Frontity useful, very similar to Next.js but 100% focused on WordPress.

Collapse
 
simondodson profile image
SIMON DODSON

'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.

Collapse
 
maniekm profile image
Mariusz

Nice resource, thanks a lot!

Collapse
 
simondodson profile image
SIMON DODSON

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

Collapse
 
daniel13rady profile image
Daniel Brady

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:

  • Do I want to use an off-the-shelf product, or roll my own?

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:

  • Jekyll
  • Hakyll
  • Gatsby
  • Hugo

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.

Collapse
 
maniekm profile image
Mariusz • Edited

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!

Collapse
 
simondodson profile image
SIMON DODSON

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.

Collapse
 
maniekm profile image
Mariusz • Edited

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?

Collapse
 
simondodson profile image
SIMON DODSON

ah great cheers thank you

Collapse
 
dmytro_dmytro_dmytro profile image
Dmytro Dmytro • Edited

@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.

Collapse
 
maniekm profile image
Mariusz

@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!

Collapse
 
jsappme profile image
JSapp.me

Gridsome is the best alternative to Gatsby.

Collapse
 
thomasjunkos profile image
Thomas Junkツ

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.

Collapse
 
jsappme profile image
JSapp.me

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.

Thread Thread
 
maniekm profile image
Mariusz

Great, will have to see it in action :)

Collapse
 
pachicodes profile image
Pachi 🥑

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.

Collapse
 
maniekm profile image
Mariusz

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!

Collapse
 
arvindr21 profile image
Arvind Ravulavaru

Patternlab is a good alternative.

Collapse
 
maniekm profile image
Mariusz

Interesting, thanks!

Collapse
 
drdougtheman profile image
drdougtheman

You can't use Gatsby for a web store? I'm getting confused with what would be a static or dynamic page.

Collapse
 
brentrobbins profile image
Brent Robbins

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.

Collapse
 
lucis profile image
Lucis

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.