DEV Community

Cover image for Why you should use GatsbyJs and when not to use it

Why you should use GatsbyJs and when not to use it

Tharun Shiv on May 31, 2020

What is GatsbyJS? It is a blazingly fast modern site generator for React. ( The website defines it this way ). What they mean is: It ...
Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

Gatsby is fast no doubt in it but it is pretty hard to develop in especially in Windows. Last time I used Gatsby I got so much headache because of some of the design patterns that I never went back to it.
You can check my article here:

Collapse
 
developertharun profile image
Tharun Shiv

Will check it out Adnan 🙂

Collapse
 
iamposti profile image
Pablo Postigo • Edited

Great article @developertharun

For anyone ending up in this article and struggling with the build times or the static limitations, I'd like to recommend Frontity (frontity.org). With Frontity you always have a Node server or a serverless function running, so your pages are generated dynamically, and you don't have to deal with build times.

Frontity is a free and open source framework. It enables you to easily build a React-based frontend for a headless (or decoupled) WordPress site. Your WordPress site serves its data via the REST API, and the frontend that you build with Frontity consumes this data and renders it in the browser as a SPA (Single Page Application) which you can configure and style to your liking.

Disclaimer: I'm one of the creators :)

Collapse
 
developertharun profile image
Tharun Shiv

Just wow! Can't wait to have an hands on. Will do it this weekend. Thanks a lot, both for your work and for the comment!

Collapse
 
iamposti profile image
Pablo Postigo

Great to read this! I'd love to know your impressions :)

Collapse
 
omarel profile image
Omar Elbaga

This is very interesting. But isn't it possible to use wordpress API for data in react either way by just fetching the json? How does frontify enhance the process

Collapse
 
venkat121998 profile image
venkat anirudh

What role does GraphQL play in Gatsby?

Collapse
 
developertharun profile image
Tharun Shiv

It is a Query language. It can be used for various purposes like ,
Getting information from the external sources to reading the internal .md files and creating articles out of them.

Collapse
 
venkat121998 profile image
venkat anirudh

Okay thank you

Collapse
 
shaijut profile image
Shaiju T • Edited

Good 😄, Explained all in less time. I can see GatsbyJs can be usefull to buid things fast by using Plugins.

Some Questions:

  1. GatsbyJs can increase the speed for Static , Landing pages. But I can do this by own for my static pages.
  • Bundle CSS, JS
  • Use Prefetch techniques
  • Cache Assets
  • Use CDN

Then Why GatsbyJs for speed ?

  1. If GatsbyJs build time increase when pages increase , then GatsbyJs is not useful for blogs, because its obvious that my blog pages will increase in coming years,

  2. Does GatsbyJshave admin page from were we can create new blog post or we should use VS Code to create new blog post ?

  3. Jamstack uses APIs for back end , But for a typical blog I dont need a API or DB backend, I would use just static html pages , So what is the use of Jamstack ?

  4. Does GatsbyJs renders .md file to html file ?

  5. Is GatsbyJs free ?

  6. Why did you use GatsbyJs for your blog when there is hugo ?

Collapse
 
developertharun profile image
Tharun Shiv

Hii,

  1. If you're able to build fast websites, then that's amazing. Need not rely on such frameworks.
  2. We use VS Code to write the markdown files.
  3. Yes you're right, even my blog doesn't use a backend. But I've seen people deliver their blog posts via API server, and use Gatsby for other purposes using a decoupled backend.
  4. I don't have knowledge about this, although I think it does render md files to HTML.
  5. Yes it's completely free
  6. I am not aware of Hugo, can you give me an introduction about it? I will check it out 🙂

I've tried my best to answer you. 🙂

Collapse
 
shaijut profile image
Shaiju T

Thanks for taking time to write 😄, Hugo is also Static site generator , its written in Go. Its also fast. You can check below post to know more.

dev.to/pluralsight/how-i-got-my-we...

Thread Thread
 
developertharun profile image
Tharun Shiv

Okay thank you 🙂

Collapse
 
faizhameed profile image
Faiz Hameed

I am building a news website for my client in gatsby. Am I doing wrong now, obviously the site content can increase. But Last week I have seen some major update to gatsby that they increased the speed of build time by x1000

Collapse
 
developertharun profile image
Tharun Shiv

Oh that's amazing! At the end of the day, it all depends on the architecture of your application. Since you have already chosen and worked on it, I'm sure you are already handling the downsides in your own way.
You're good to go🙂 let us know how well it went, once you're done with the project.

Collapse
 
faizhameed profile image
Faiz Hameed
Collapse
 
developertharun profile image
Tharun Shiv

Great! But I think this is only when we host our code on Gatsby Cloud, correct me if I'm wrong. 🙂

Thread Thread
 
leiferic93 profile image
leif-eric-93

It's also possible on netlify :)

Thread Thread
 
developertharun profile image
Tharun Shiv

Oh that's amazing!! Where can I learn more about it? 🙂

Thread Thread
 
leiferic93 profile image
leif-eric-93

netlify.com/blog/2020/04/23/enable...

the feature is called incremental builds :)

Thread Thread
 
developertharun profile image
Tharun Shiv

Ah I see.. I learned another new thing today then.. I'll check it out. Thanks a lot! 🙂

Collapse
 
webdev_chen profile image
Uchena Miller

I've always thought about using gatsby. This among others are making things clearer

Collapse
 
developertharun profile image
Tharun Shiv

Thanks a lot! This definitely motivates me to write more. 🙂

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

I am very new to GatsbyJs, but this article made things clear to me about Gatsby. Well written. I noticed you tell that the documentation is great! Would love to check it out sometime. It would be helpful if you created video tutorials on it too. 😊

Collapse
 
venkat121998 profile image
venkat anirudh

Yes, video tutorials will be helpful

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

yeah

Collapse
 
uma_bcc profile image
umamaheswari.v

Yeah

Collapse
 
developertharun profile image
Tharun Shiv

Sure, definitely 🙂

Collapse
 
sonicoder profile image
Gábor Soós

I like the style of the header image :)

Collapse
 
developertharun profile image
Tharun Shiv

I see I have a similar style to yours 😅 Great articles you got by the way.. will go through them now . 🙂

Collapse
 
developertharun profile image
Tharun Shiv

😅thanks for noticing it. Glad you liked it. I focus equally on the cover images of my posts too.

Collapse
 
sonicoder profile image
Gábor Soós

I do similar headers...are you also using Canva? :D

Thread Thread
 
developertharun profile image
Tharun Shiv

Yeah!! My all time favourite! I use Canva for my dev.to posts, my blog posts, My YouTube channel thumbnails and even for presentation and slides..

Canva is a blessing!

Thread Thread
 
uma_bcc profile image
umamaheswari.v

Yeah, Canva is my favourite too!

Thread Thread
 
developertharun profile image
Tharun Shiv

Amazing!

Thread Thread
 
chandrika56 profile image
Jaya chandrika reddy

yeah Canva is my favourite too!

Collapse
 
leiferic93 profile image
leif-eric-93

Nice Overview of Gatsby!

In a recent project I gave gatsby a try for a more dynamic website, and so far I am very positive. As always their excellent documentation is a great help! (e.g. gatsbyjs.org/docs/data-fetching/)

Collapse
 
developertharun profile image
Tharun Shiv

That's a positive sign!

Thank you for sharing. But what was the website about? 🙂

Collapse
 
leiferic93 profile image
leif-eric-93

Nothing too fancy to be honest. It just has some dynamic elements with a calender and availability fetching at browser runtime.

Thread Thread
 
developertharun profile image
Tharun Shiv

Okay.. cool.. all the best! 🙂

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

Good explanation of the advantages. Can't wait to try Gatsby. Do you know the best place to start learning GatsbyJs?

Collapse
 
developertharun profile image
Tharun Shiv

The documentation 🙂 Gatsby has the best documentation I've ever seen 🙂

Collapse
 
uma_bcc profile image
umamaheswari.v

Okay will check it out

Thread Thread
 
developertharun profile image
Tharun Shiv

Sure, give it a go, if you know HTML, CSS, JavaScript and ReactJs basics.

Thread Thread
 
uma_bcc profile image
umamaheswari.v

Okay thank you

Collapse
 
uma_bcc profile image
umamaheswari.v

Great article! What are the pre requisites for GatsbyJs?

Collapse
 
developertharun profile image
Tharun Shiv

HTML, CSS, JavaScript, ReactJs

GraphQL knowledge will help

Collapse
 
uma_bcc profile image
umamaheswari.v

I see, okay thank you.

Thread Thread
 
developertharun profile image
Tharun Shiv

Glad it helps 🙂

Collapse
 
davidyaonz profile image
David Yao

Gasby documentation is the best and really easy to follow. Thanks for this amazing article.

Collapse
 
developertharun profile image
Tharun Shiv

Definitely David..! I feel exactly the same way! 🙂
Thank you 🙂

Collapse
 
shaijut profile image
Shaiju T • Edited

Visiting again :)

  1. Hugo is fast
  2. Jekyll second place

It seems Gatsbyjs will become slow as files increases.

Compare the results check below:

css-tricks.com/comparing-static-si...

Collapse
 
jitheshkt profile image
Jithesh. KT

Will you suggest Gatsby for eCommerce websites?

Collapse
 
developertharun profile image
Tharun Shiv

Hi Jithesh,
As per my knowledge, if you want similar experience, check out Next.js . It is more suitable to websites like ecommerce which keeps changing often.

Next.js is Server side rendered and provides a very fast and smooth user experience. 🙂

Collapse
 
carlclloyd profile image
Carl Lloyd

Great article. I use Gatsby.js myself, and it is fast and lightweight.

Collapse
 
developertharun profile image
Tharun Shiv

Thanks a lot Carl for the appreciation. 🙂 For what kind of projects have you used Gatsby?

Collapse
 
vincevegas profile image
vince vegas

How long does it take to learn Gatsby

Can I learn the advanced Gatsby in a week?