CODEWITHSUNDEEP
javascriptreactjsgatsby
jessepinho
jessepinho

Reputation: 5762

GatsbyJS: How do I load a component synchronously at build time, but asynchronously at runtime?

I have a Gatsby site with a React component called ArticleBody that uses react-markdown to convert an article written in Markdown to a React tree.

As this is a bit of an expensive operation and a somewhat large component — and for SEO reasons — I'd like to pre-render ArticleBody at build time. However, I'd also like to load ArticleBody asynchronously in the client. Since the article body will already be included in the HTML, there's no rush to load and render the Markdown component in the client, so async should be fine.

How would I accomplish this? It's almost as if I want to have two different JS bundles — one bundle that loads ArticleBody synchronously, for the build, and one that loads it asynchronously, for the client. Is this possible in Gatsby?

Thanks!

Upvotes: 1

Views: 706

Answers (1)

Henrik W.
Henrik W.

Reputation: 44

Instead of React.lazy which is not supported, you can use loadable components. There is a Gatsby plugin to handle SSR correctly gatsby-plugin-loadable-components-ssr

Currently there is an issue with it since Gatsby 3.x, but there is a way to implement it yourself without the extra plugin. See the comment in the issue here. Also add the changes mentioned in the comment below of it.

I haven't tried this specific implementation yet, but it should work with the following steps:

npm install --save-dev @loadable/babel-plugin @loadable/server @loadable/webpack-plugin @loadable/component

gatsby-browser.js

import { loadableReady } from '@loadable/component'
import { hydrate } from 'react-dom'

export const replaceHydrateFunction = () => (element, container, callback) => {
  loadableReady(() => {
    hydrate(element, container, callback)
  })
}

gatsby-node.js

exports.onCreateWebpackConfig = ({ actions, stage }) => {
  if (
    stage === "build-javascript" ||
    stage === "develop" ||
    stage === "develop-html"
  ) {
    actions.setWebpackConfig({
      plugins: [
        new LoadablePlugin({
          filename:
            stage === "develop"
              ? `public/loadable-stats.json`
              : "loadable-stats.json",
          writeToDisk: true
        })
      ]
    });
  }
};

gatsby-ssr.js

import { ChunkExtractor } from '@loadable/server'
import path from 'path'

const extractor = new ChunkExtractor({
  // Read the stats file generated by webpack loadable plugin.
  statsFile: path.resolve('./public/loadable-stats.json'),
  entrypoints: [],
})

// extractor.collectChunks() will wrap the application in a ChunkExtractorManager
export const wrapRootElement = ({ element }) =>
  extractor.collectChunks(element)

export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
  // Set link rel="preload" tags in the head to start the request asap. This will NOT parse the assets fetched
  setHeadComponents(extractor.getLinkElements())

  // Set script and style tags at the end of the document to parse the assets.
  setPostBodyComponents([...extractor.getScriptElements(), ...extractor.getStyleElements()])

  // Reset collected chunks after each page is rendered
  extractor.chunks = []
}

If you have DEV_SSR enabled, you should not add stage === "develop-html". Otherwise, you are good.

Hope this summary of the issue's comments help to get you started.

Upvotes: 1

Related Questions