after.js

If you are NOT using babel-plugin-after, you must manually configure asyncComponent in your routes.js file to ensure assets are sent correctly. This requires two things:

1. Adding a /* webpackChunkName: "name" */ magic comment inside the import() statement.
2. Providing a chunkName property in the asyncComponent configuration that matches the magic comment exactly.

Important: If the same component is used across different routes, the webpackChunkName and chunkName must be identical in all instances.

// routes.js

import Home from './Home';
import { asyncComponent } from '@jaredpalmer/after';

export default [
  {
    path: '/',
    exact: true,
    component: Home,
  },
  {
    path: '/about',
    exact: true,
    component: asyncComponent({
      loader: () => import(/* webpackChunkName: "whatever" */ './About'),
      chunkName: 'whatever',
    }),
  },
  {
    path: '/contact-us',
    exact: true,
    component: asyncComponent({
      loader: () => import(/* webpackChunkName: "ContactUs" */ './Contact'),
      chunkName: 'ContactUs',
    }),
  },
];

To build static webapps using After.js and Razzle, you must implement two exported functions in a static_export.js file:

1. render: An async function that returns the HTML and data. It uses the renderStatic function from @jaredpalmer/after to handle data loading from static files instead of calling getInitialProps after the export is complete.
2. routes: An async function that returns an array of all page paths you want to statically generate.

Build and Export Commands:

• Build the app: yarn build
• Run the static export: yarn export
• The output is located in the build/public directory.

// ./src/static_export.js

import { renderStatic } from '@jaredpalmer/after';
import appRoutes from './routes';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);

export const render = async (req, res) => {
  const { html, data } = await renderStatic({
    req,
    res,
    routes: appRoutes,
    assets,
    chunks,
  });
  res.json({ html, data });
};

export const routes = () => {
  return ['/', '/about'];
};

When upgrading to v3, you must import the chunks.json file generated by Razzle and pass it as the chunks parameter to the render method in your server.js file.

1. Import the manifest: const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);
2. Pass it to render: Add chunks to the object passed to the render function.

// server.js

import express from 'express';
import { render } from '@jaredpalmer/after';
import routes from './routes';
import MyDocument from './Document';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST); // 👈 import chunks.json

const server = express();
server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', async (req, res) => {
    try {
      // Pass document in here.
      const html = await render({
        req,
        res,
        document: MyDocument,
        chunks, // 👈 pass it to render method
        routes,
        assets,
      });
      res.send(html);
    } catch (error) {
      console.log(error);
      res.json(error);
    }
  });

export default server;