loading...

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

Mariusz on December 12, 2019

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 ... [Read Full]
markdown guide
 

I think if you're trying to build a true static site, a tool like 11ty is the best choice. It's ACTUAL SSG, not a rehydrated SPA. Build times are way faster, SEO is easy peasy, and your site is tiny without big JS bundles.

 
 

It is really great SSG, we are able to achieve A grade 95% page speed using gatsby for solutelabs.com our agency website. We are using headless WordPress to drive blogs and some configurable contents

 

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

 
 

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.

 

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.

 
 

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.

 

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?

 
 

'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

 
 

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!

 

Gridsome is the best alternative to Gatsby.

 

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 :)

 
 

I disagree that Gatsby is more feature-rich than Next.js

 

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

 

@Nataliya, can you share more details please?

I'm more than happy to adjust and update my own knowledge.

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.

 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

Gatsby sucks so hard

 

@Cuong, can you share more details?

Happy to learn more.

code of conduct - report abuse