Server-side rendering with code-splitting using Loadable/Components

yarn add  @loadable/babel-plugin @loadable/component @loadable/server @loadable/webpack-plugin

{
  target: 'node',
  plugins: [
    ...,
    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })
  ]
}

{
  plugins: [
    ...,
     new LoadablePlugin({ filename: 'loadable-stats.json' })
  ]
}

{
  "plugins": ["@loadable/babel-plugin"]
}

import load from '@loadable/component'
const MyComponent = load(() => import('./MyComponent'))

ChunkLoadError: Loading chunk 6 failed.
(error: https://www.cityfalcon.com/packs/js/News-58215546ef43bc340bac.chunk.js)

// https://gist.github.com/briancavalier/842626
const consoleDebug = (fn) => {
  if (typeof console.debug !== 'undefined') {
    console.debug(fn());
  }
};
const retry = (fn, retryMessage = '', retriesLeft = 3, interval = 500) => new Promise((resolve, reject) => {
  fn()
    .then(resolve)
    .catch(() => {
      setTimeout(() => {
        if (retriesLeft === 1) {
          console.warn(`Maximum retries exceeded, retryMessage: ${retryMessage}. Reloading page...`);
          window.location.reload();
          return;
        }
        // Passing on "reject" is the important part
        consoleDebug(() => `Trying request, retryMessage: ${retryMessage}, retriesLeft: ${retriesLeft - 1}`);
        retry(fn, retryMessage, retriesLeft - 1, interval).then(resolve, reject);
      }, interval);
    });
});
export default retry;

import retry from 'utils/retry';
const HomePage = loadable(() => retry(() => import('./HomePage')));

import React from 'react';
import ReactOnRails from 'react-on-rails';
import { hydrateRoot } from 'react-dom/client'
import { loadableReady } from '@loadable/component'
import App from './App';

const ClientApp = (props, railsContext, domId) => {
  loadableReady(() => {
    const root = document.getElementById(domId)
    hydrateRoot(root, <App {...props} />);
  })
}

ReactOnRails.register({
  App: ClientApp,
});

import React from 'react';
import ReactOnRails from 'react-on-rails';
import { ChunkExtractor } from '@loadable/server'
import App from './App'
import path from 'path'

const ServerApp = (props, railsContext) => {
  // This loadable-stats file was generated by `LoadablePlugin` in client webpack config.
  // You must configure the path to resolve per your setup. If you are copying the file to
  // a remote server, the file should be a sibling of this file. 
  // __dirname is going to be the directory where the server-bundle.js exists
  // Note, React on Rails Pro automatically copies the loadable-stats.json to the same place as the
  // server-bundle.js. Thus, the __dirname of this code is where we can find loadable-stats.json.
  // Be sure to configure ReactOnRailsPro.config.assets_top_copy to this file.
  const statsFile = path.resolve(__dirname, 'loadable-stats.json');

  // This object is used to search filenames by corresponding chunk names.
  // See https://loadable-components.com/docs/api-loadable-server/#chunkextractor
  // for the entryPoints, pass an array of all your entryPoints using dynamic imports
  const extractor = new ChunkExtractor({ statsFile, entrypoints: ['client-bundle'] })

  // It creates the wrapper `ChunkExtractorManager` around `App` to collect chunk names of rendered components.
  const jsx = extractor.collectChunks(<App {...props} railsContext={railsContext} />)

  const componentHtml = renderToString(jsx);

  return {
    renderedHtml: {
      componentHtml,
      // Returns all the files with rendered chunks for furture insert into rails view.
      linkTags: extractor.getLinkTags(),
      styleTags: extractor.getStyleTags(),
      scriptTags: extractor.getScriptTags()
    }
  };
};

ReactOnRails.register({
  App: ServerApp,
});

  config.assets_to_copy = Rails.root.join("public", "webpack", Rails.env, "loadable-stats.json")

  const statsFile = path.resolve(__dirname, 'loadable-stats.json');

const path = require('path');
const env = process.env;
const { reactOnRailsProNodeRenderer } = require('@shakacode-tools/react-on-rails-pro-node-renderer');

const config = {
  ...
  supportModules: env.RENDERER_SUPPORT_MODULES || null,
};
...

reactOnRailsProNodeRenderer(config);

<% res = react_component_hash("App", props: {}, prerender: true) %>
<%= content_for :link_tags, res['linkTags'] %>
<%= content_for :style_tags, res['styleTags'] %> 

<%= res['componentHtml'].html_safe %>

<%= content_for :script_tags, res['scriptTags'] %>

if (isWebpackDevServer) {
  environment.plugins.append(
    'NormalModuleReplacement',
    new webpack.NormalModuleReplacementPlugin(/(.*)\.imports-loadable(\.jsx)?/, (resource) => {
      /* eslint-disable no-param-reassign */
      resource.request = resource.request.replace(/imports-loadable/, 'imports-hmr');
      /* eslint-enable no-param-reassign */
      return resource.request;
    }),
  );
}