Development

Making the Switch to Gatsby for (Not So) Static Websites

Share
Making the Switch to Gatsby for (Not So) Static Websites

Trying to find a good compromise between speed and utility when you’re building a static website can be insanely difficult with the number of options nowadays. WordPress, Squarespace, Wix, etc. are all fast in terms of development, but hinder the end result of the product you deliver. Coding a website from scratch (from scratch meaning vanilla HTML, CSS, and JavaScript) is time-consuming, and you’d be hard-pressed to bring value to anyone within a reasonable budget/timeframe for the project. There is always the option of using a JavaScript framework like React or Vue, but there are some major downfalls to rendering your website in the browser with JavaScript. Search engines like Google miss a lot of valuable information that they need to categorize and rank your pages since the pages of your website are rendered each time someone visits the site, they aren’t statically served.

For example, if you go to BuiltBetter Blog at builtbetter.tech/blog, right-click the web page in Chrome or any other modern browser, and click “View Page Source” you will find a bunch of minified CSS, HTML, and JavaScript Code. It looks like a total mess, but if you scroll down the page you’ll eventually find HTML header and meta tags for the page along with all the structure for the HTML that actually builds the layout of the site. 

 

Page source of builtbetter.tech/blog

 

This is great because that means search engines like Google can find this information too and bring up your SEO scores.

On the other hand, if you visit a purely ReactJS built site, like this one here dariansampare.ca, and follow the same process of viewing the page source, you will see nothing but a few measly lines of JavaScript and a couple of meta tags.

 

Page source of dariansampare.ca built with ReactJS

 

That’s because React handles everything in the client's view with JavaScript. It injects HTML and CSS into the website based on the where/what the user is doing. This is really cool for development and I personally love working in the React ecosystem, but it’s pretty terrible for sites that need top-notch SEO. 

A Modern Approach to Static Websites

So you don’t want to use a web builder, but you don’t want to code this site from scratch, and Javascript isn’t cutting it for Google, welcome to GatsbyJS, a JavaScript/React framework that fits right in the middle of this web development triangle of frustration.

 

👏👏

 

What makes Gatsby so great?

First of all, Gatsby is built using React. This means that any experience you have with React, or even just modern JavaScript programming can be applied in Gatsby. You’ll be in a development environment that should be really comfortable for the up to date web developer, and get all the tools like NPM/Yarn for your package managers and easy support for the component architecture that has made React so popular on the web development scene.

But What About SEO?

This is where the real magic of Gatsby happens. The thing that really makes Gatsby stand out for developing static sites is that it builds the entire application you create using NodeJS before displaying it to the end-user. Basically, Gatsby parses the whole React application you’ve created on the front-end, and spits out all of the HTML, CSS, and JavaScript for your entire site and serves it to the client. This is why you don’t just see JavaScript in the page source, you see real HTML, CSS, and JavaScript just as if you weren’t using a JavaScript framework at all! Pretty handy, and the best part is that Google and any other search engines looking at your site can see this too.

Let's Talk About Speed

As you might have imagined, pre-building the website versus rendering everything in JavaScript is going to be a faster experience for any visitors to your website. But honestly, having all the HTML and CSS ready to go instead of rendering it with JavaScript on page load only saves the end-user about half a second of load time. Personally, I can’t notice the difference and don’t really care, but that half-second might be the difference between losing out on millions of dollars in revenue for you, so to each their own.

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.

 

Just be patient people...

 

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

Bonus Perks

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.

Summing Up

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!

Subscribe

Like what you see and want more?
Subscribe today and we’ll keep you up to date.