Building a Website with GatsbyJS
Last updated: 2023-01-13
GatsbyJS is a framework based on React generating static pages which then can be deployed to a static hosting platform. We were particularly interested in how search engines crawl such a site and how long it takes to be indexed. We also had a close look at code complexity and resource necessary for efficient deployment of website content.
Key Takeaways
- A GatsbyJS powered website accelerates navigating through a website
- Building a GatsbyJS site or migrating to a GatsbyJS site is straight-forward task
- Some stacks variants may require migration of one or the other to another setup
- SEO is slightly delayed but no other downside to be expected
- A GatsbyJS powered website is a monolithic application
- A GatsbyJS powered website depends on plugins which may not be maintained anymore
Pro GatsbyJS
The major reason why choosing GatsbyJS as platform for a website is due to fast loading of web pages because the content preload. Whenever a page is visited, linked pages on that page are pre-loaded anticipating a click one of the links. This turns navigation very fast and therefore user-friendly.
Setup and Migration
We worked mainly with two sites, Fauna & Flora Photography and Discovery Mexico. Both sites were using before MySQL database for content storage and Google App Engine application in Python/Flask/Jinja2 for rendering pages.
Migration to GatsbyJS was smooth and fast. Connecting to the MySQL worked fine on the first intend using the "gatsby-source-mysql" plugin. Adding content from a handful markdown files was also simple.
Once we successfully connected the database and markdown files, building the different components and templates as well as implementing the logic for url structure and content was a simple task. We migrated both sites in less than a couple of days.
We worked on migration of the Discovery Mexico Forum. We failed because of an issue of having dynamically created url structure for forum conversations and replies within the rigid permanent url structure of the rest of the website. Without going into details, we ended up being able to restore functionality of the forum using GatsbyJS but the solution didn't satisfy our expectations regarding code simplicity and user experience.
We aren't using GatsbyJS for our site Muuuh Wildlife Photography because we haven't been able to connect GatsbyJS to Firestore.
SEO Results
Both sites where published using GatsbyJS for a few months. As expected, indexing is slower than with with a static website (from max 3 days to max 3 weeks). Search engines are able to pull the content (page inspector Google and Bing) though.
Our understanding is that indexing by search engines can be delayed by having javascript on the page even if these scripts aren't relevant for the page content itself.
If you mix up components with api calls to pull additional content, the pulled content isn't indexed. Don't hide important content with api calls.
Why not Using GatsbyJS
GatsbyJS converts a web site into a monolithic application where even content, and not just code and design, is bundled into one huge web app which has to be built and deployed as a whole each time a change to either code, design or content has been done.
We consider "monolithic applications" a thing from the past. This is the main reason why we dropped GatsbyJS as platform for our websites.
Overtime, we added more and more plugins. Plugins depend on the community to stay up to date. A liability for a website in production. Depending just on a few, popular plugins can be maintained but once a website relies on many different plugins incompatibility issues among those plugins and bugs within plugins delay deployment process.
Because content updates relies on website deployment, such a delay isn't acceptable.