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
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.
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,
Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun
Top comments (57)
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:
How is it like to work with GatsbyJS as a Nuxt.js developer?
Adnan Babakan (he/him) ・ Nov 8 '19 ・ 6 min read
Will check it out Adnan 🙂
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 :)
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
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.
Okay thank you
Good 😄, Explained all in less time. I can see
GatsbyJscan be usefull to buid things fast by using Plugins.Some Questions:
CSS, JSCDNThen Why
GatsbyJs for speed ?If
GatsbyJsbuild time increase when pages increase , then GatsbyJs is not useful for blogs, because its obvious that my blog pages will increase in coming years,Does
GatsbyJshave admin page from were we can create new blog post or we should useVS Codeto create new blog post ?Jamstackuses 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 ?Does
GatsbyJsrenders.mdfile tohtmlfile ?Is
GatsbyJsfree ?Why did you use
GatsbyJsfor your blog when there ishugo?Hii,
I've tried my best to answer you. 🙂
Thanks for taking time to write 😄,
Hugois also Static site generator , its written inGo. Its also fast. You can check below post to know more.dev.to/pluralsight/how-i-got-my-we...
Okay thank you 🙂
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.
gatsbyjs.org/blog/2020-05-26-intro...
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? 🙂
netlify.com/blog/2020/04/23/enable...
the feature is called incremental builds :)
Ah I see.. I learned another new thing today then.. I'll check it out. Thanks a lot! 🙂
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 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
yeah
Yeah
Sure, definitely 🙂
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!
Yeah, Canva is my favourite too!
Amazing!
yeah Canva is my favourite too!
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! 🙂
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 🙂
Okay will check it out
Sure, give it a go, if you know HTML, CSS, JavaScript and ReactJs basics.
Okay thank you