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

developertharun profile image Tharun Shiv Updated on ・4 min read

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

Posted on by:

developertharun profile

Tharun Shiv

@developertharun

Web Developer | DevOps Engineer | Programmer | Course Instructor

Discussion

markdown guide
 

Great article! What are the pre requisites for GatsbyJs?

 

HTML, CSS, JavaScript, ReactJs

GraphQL knowledge will help

 
 

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

 

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!

 

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

 

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:

 

Will check it out Adnan πŸ™‚

 

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

 

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.

 
 

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

It's also possible on netlify :)

Oh that's amazing!! Where can I learn more about it? πŸ™‚

Ah I see.. I learned another new thing today then.. I'll check it out. Thanks a lot! πŸ™‚

 

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

 

Definitely David..! I feel exactly the same way! πŸ™‚
Thank you πŸ™‚

 

What role does GraphQL play in Gatsby?

 

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.

 
 

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 ?

 

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. πŸ™‚

 

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

Okay thank you πŸ™‚

 

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

 

Thanks a lot! This definitely motivates me to write more. πŸ™‚

 

I like the style of the header image :)

 

I see I have a similar style to yours πŸ˜… Great articles you got by the way.. will go through them now . πŸ™‚

 

πŸ˜…thanks for noticing it. Glad you liked it. I focus equally on the cover images of my posts too.

 

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

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!

 

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

 

That's a positive sign!

Thank you for sharing. But what was the website about? πŸ™‚

 

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

Okay.. cool.. all the best! πŸ™‚

 

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

 

Yes, video tutorials will be helpful

 
 
 

Sure, definitely πŸ™‚

 

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

 

The documentation πŸ™‚ Gatsby has the best documentation I've ever seen πŸ™‚

 

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

 

Will you suggest Gatsby for eCommerce websites?

 

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. πŸ™‚

 

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

 

Thanks a lot Carl for the appreciation. πŸ™‚ For what kind of projects have you used Gatsby?