DEV Community

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

Posted on • Updated on • Originally published at tharunshiv.com

Why you should use GatsbyJs and when not to use it

What is GatsbyJS?

It is a blazingly fast modern site generator for React. ( The website defines it this way ). What they mean is:

  • It is blazingly fast! Take my word, anyone who visits your website will go like Whoa!
  • It is a modern site generator: You can build websites using it
  • for React Yes, it works with React.

Do I have a demo?

Yeah sure, my blog is completely based on GatsbyJs, you can visit it to experience its speed : https://www.tharunshiv.com

How it basically works?

Gatsby does the data sourcing and the fetches the files during the build time itself. All this built data is then used to generate the HTML, CSS and JavaScript file necessary to run a super fast website. This static rendering is the backbone of Gatsby.

Why you should consider using GatsbyJs??

1. The Speed

I would mentioned the word 'fast' and 'speed' a lot of times in this post, this is pretty much the same where ever you read about Gatsby, because it is indeed superfast. By employing the speed of Gatsby and the power of PWA, you will be able to build a mobile app like experience, where the user will feel like switching pages in a mobile app, rather than a website.

A PWA is a progressive web app. Read about how you can convert any website into a PWA in 3 simple steps here

2. The Plugins

There are amazingly useful plugins that are available at Gatsby's official website, which you can npm instal or yarn add ( ways of installing packages to your project ). Some useful plugins are:

  • gatsby-plugin-manifest : Make your site a installable and a PWA with this plugin
  • gatsby-plugin-offline : Make your site run offline with this plugin.
  • gatsby-plugin-google-analytics : Use Google analytics for your website with this plugin
  • gatsby-remark-embed-youtube : Embed YouTube videos into your website

GatsbyJS Plugins

And a lot more amazing plugins that you can use to speed up most of the work efficiently and make your website look feature rich.

3. Starters & templates

There are a sufficient amount of GatsbyJs Starter repositories and templates that is as simple as cloning and changing the content of them. In this way you can completely develop websites like your Blog, super quick and efficient. The documentation is super friendly, and I would definitely recommend you starting from there if you want to learn Gatsby.

GatsbyJS Starter Library Link

4. The rise of the Jamstack

Jamstack is the culture of using JavaScript, APIs and Markup to build website. They mainly focus on how you can use these technologies to build websites that don't depend on managing servers, but decouple the front-end and the backend, supported by the CDN ( Content delivery Network ).
Building websites with Gatsby is again a way of following the Jamstack culture. This results in a better performance, increased security, cheap and easy scaling, better developer experience.

5. ReactJs based

Since it is nothing but ReactJs itself, you can use the existing techniques and components of ReactJs here. The ReactJs community is powerful with a lot of existing components that are one click away. This is a huge advantage as you need not worry about how new GatsbyJs is.

6. Ease of use with Markdown

If you are using dev.to , you will definitely know what Markdown is. Markdown is a simple syntax that can be used to write rich text. You can use Markdowns in Gatsby and convert it into a blog based on Markdown. Everytime you need to write a new article, all you need to do is add a new .md file and push the code, that is it! How simple is that?

7. SEO

The use of GatsbyJs enables your websites to harness a lot of optimization techniques used by the internal code. This results in your website being ranked higher on search engines. There are also a lot of plugins that can help you boost this.

Why should you avoid Gatsby?

1. Increasing build times

As the content in your website increases, the build time also increases. This is not only disappointing during development, but also consumes time during deployment. So if you want to build a site that changes very often, Gatsby is not recommended.

2. Completely Dynamic website

If your website is completely a Dynamic one, then I would recommend you to go with similarly advantageous technology such as Next.js . Gatsby is more suitable for Blogs, portfolios, landing pages and other websites with lesser dynamic activities. ( feel free to correct me in the discussions if I'm wrong )

Consider subscribing to my YouTube channel if you like it : https://youtube.com/c/developerTharun

Thank you very much for reading, let me know in the discussions if you have any doubts or suggestions.
Written by:

developertharun image

Discussion (57)

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

Sure, definitely 🙂

Collapse
vuesomedev profile image
Gábor Soós

I like the style of the header image :)

Collapse
developertharun profile image
Tharun Shiv Author

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 Author

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

Collapse
vuesomedev profile image
Gábor Soós

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

Thread Thread
developertharun profile image
Tharun Shiv Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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?