This is great because that means search engines like Google can find this information too and bring up your SEO scores.
A Modern Approach to Static Websites
What makes Gatsby so great?
But What About SEO?
Let's Talk About Speed
The time Gatsby really saved me and so many other websites, is displaying dynamic data. In a typical React App, you’d have to fetch any dynamic data you want to pull in, and the user would have to wait for React to request it, receive it and display it. If you were using a site builder like WordPress, this data would be getting queried from a database each time a user visits the site, better, but still not as fast as having the content ready to go.
But, Gatbsy does things differently. Gatsby uses GraphQL to create your pages at build time using whatever data you throw at it. So, when you’re developing your site, you can use data from any API/CMS you want that supports GraphQL (or there is Gatsby plugin for), and this data will be pulled each time your site builds and be included in the files that Gatbsy served to your website! 🥳
This means that dynamic content doesn’t have to be fetched each time the user visits your site, just each time the site builds. So there you have it, React development environment with server-side rendering SEO and speed.
Do I Need a Server to Run Gatsby?
Nope, another great thing about Gatsby is it’s just built in React. Anywhere you can host a front end website, you can host a Gatsby site (just use Netlify, seriously).
Ultimately, my favorite reason for using Gatsby and the reason I got the motivation to write this blog post is the freedom it gives me in my development process. If you’re an avid web developer, you don't want to resort to a web builder because they cripple your ability to make awesome products.
Gatsby puts the power back in the hand of the developer. You get to choose, what content on your site should be created at build time and what shouldn't? Say you want to source your own blog content that creates blog pages at build time, you can use a headless CMS to source the data and let Gatsby handle it for you. But say you want an Instagram feed that updates in real-time, each time a user visits your site, you want your latest social media content. Well, Gatsby is just React, so you can still fetch that data the React way and have that one section of your site completely dynamically rendered.
What Gatsby Isn’t
In my experience, Gatsby is not a replacement for CRUD (Create, Read, Update, Delete) applications. Since a gatsby site has to be built each time the content updates, it’s not a great tool if you’re updating content thousands of times per day. This would lead to thousands of builds running anywhere from seconds to minutes long. Depending on the size of your site, this can get expensive.
For most websites, this is no problem at all. We use BuildingBlocks CMS for our content management, and it allows us to re-deploy the site whenever we update content, like this blog post. We have to update content on our site on a weekly (sometimes daily basis), so this is no issue at all.
Overall, I’ve found GatsbyJS to be the perfect sweet spot for giving value to your clients and having a rewarding developer experience. Gatsby is fast for the end-user, and for the experienced Gatsby developer, it’s fast and efficient for creating (not so) static websites. On top of everything that we’ve talked about here, there is also a massive community around Gatsby and the newly adopted JAMstack (check out this article for more info on the JAMstack). So if you get stuck, there is usually someone who has run into the same problem and has a solution or just built a plugin for it. 🎉
You can check out the docs and a lot of great example sites for GatsbyJs at https://www.gatsbyjs.org/.
Thanks for reading!