An SEO approach to async components with loadable-components

In this article, the author explores the challenges of rendering asynchronous components in a Gatsby project for improved SEO, particularly when using dynamic content from Contentful. The project initially faced issues with custom blocks not being pre-rendered into static HTML, which is crucial for crawlers indexing the site. To address this, the article introduces the use of loadable-components, allowing components to be loaded asynchronously only when needed, thereby optimizing performance. However, this approach initially prevented content from being pre-rendered. To solve this, the article details a method involving additional configurations, such as using Babel and Webpack plugins, and employing a fallback prop to ensure that asynchronous components are rendered in static HTML. This technique ultimately allows the content to be visible in the page source, benefiting SEO. The article also provides a GitHub repository for readers to simulate the discussed setup and highlights tools like LogRocket for improving digital experiences.