Optimizing SEO with Loadable Components in Gatsby
The Challenge of Asynchronous Loading
When building a website with dynamic data, we often face the dilemma of choosing between asynchronous loading and SEO optimization. Asynchronous loading can improve user experience, but it can also hinder search engine crawlers from indexing our content. In this article, we’ll explore a solution that balances both worlds using loadable components in a Gatsby project.
The Problem Statement
We have a Gatsby site that uses Contentful, a content management system, to render information and modules. The site is a blog that displays posts from Contentful, and we’d like to add custom blocks to render non-blog post content. However, these custom blocks require different React components depending on their design. To implement this, we created a file that uses the custom block’s name to render its corresponding component.
The Limitation of Current Implementation
Our current implementation loads all custom blocks and their components simultaneously, which can lead to performance issues. Imagine having numerous custom blocks – it would be inefficient to load them all at once. This is where loadable components come in.
Introducing Loadable Components
Loadable components allow us to load components asynchronously, optimizing performance. By adding loadable components to our code, we can ensure that custom blocks are loaded only when needed. This approach solves the initial problem, but it raises another issue: the content of the custom block is not pre-rendered into the static HTML.
Configuring Loadable Components for SEO
To address this, we need to make some configurations to our loadable component setup. We’ll install the necessary dependencies, add a custom Babel plugin, and modify our webpack plugin. The final step is to use the fallback prop of loadable components to pre-render custom block elements in static HTML.
Pre-rendering Custom Block Elements
The fallback prop determines what to display while the component is being loaded asynchronously. We can use this prop to ensure that asynchronous components get rendered to the static HTML. By setting an id to CustomBlock__, adding a fallback prop, and using the getRenderedContent function, we can pre-render custom block elements in static HTML.
The Result
With these configurations in place, we can build and run our site in production. The dates are now visible in the page source, indicating that custom block elements are being pre-rendered, making it possible for crawlers to successfully crawl the page.
Try it Out
To simulate this setup, you can visit our GitHub repository, which contains the codebase for the Gatsby project and an exported Contentful space. Follow the instructions to set up the project and connect it to your Contentful space.
Get Started with LogRocket
Want to optimize your application’s performance? Try LogRocket, a modern React error tracking solution. Sign up for a free account and get started in minutes.