After.js Assets

afterjs-assets-status

The Problem with After.js

If you ever tried to build an Server Side Renderd App with After.js you well notice that when you code spilit your components, After.js only send the main css and js files then in client side in ensureReady method tries to fetch javascript and css files. it's too slow (even Google PageSpeed Insights warns about it)

After.js Assets solves problem by adding a plugin to razzle and call a fucntion in custom Document file

Setup

First Install afterjs-assets:

yarn add afterjs-assets

then create a razzle.config.js file in root of project (next to the package.json) and put this content inside it:

// razzle.config.js
 
module.exports = {
  plugins: ["manifest"],
}

this will load razzle-plugin-manifest, this plugin will generate manifest.json file next to the server.js file in build folder. (we will use this file in next steps). checkout it's repo for more options and configuration.

Add name and chunkName to routes

// ./src/routes.js
 
import React from "react"
import Home from "./Home"
import { asyncComponent } from "@jaredpalmer/after"
 
export default [
  // normal route
  {
    name: "HomePage", // pick a random name
    path: "/",
    exact: true,
    component: Home,
  },
  // codesplit route
  {
    name: "AboutUs", // pick a random name
    path: "/about",
    exact: true,
    component: asyncComponent({
                    // this must b as same as name property 👇
      loader: () => import(/* webpackChunkName: "AboutUs" */ "./About"), // required
      Placeholder: () => <div>...LOADING...</div>, // this is optional, just returns null by default
    }),
  },
]

Note 1: name must be uniqe and all routes must have a name with uniqe value.

Note 2: we used webpackChunkName with dynamic import, chunk name Must be as same as name property.

{
  name: "AboutUs",
  path: '/about',
  component: asyncComponent({
          // this must b as same as name property 👇
    loader: () => import(/* webpackChunkName: "AboutUs" */ './About'),
  }),
},
{
  name: "Shop",
  path: '/shop',
  component: asyncComponent({
        // this must b as same as name property 👇
    loader: () => import(/* webpackChunkName: "Shop" */ './ShopComponent'),
  }),
},

Create Custom `<Document>`

Based on After.js Guide create a file in ./src/Document.js like so:

// ./src/Document.js
 
import React from "react"
import { AfterRoot, AfterData } from "@jaredpalmer/after"
 
class Document extends React.Component {
  static async getInitialProps({ assets, data, renderPage }) {
    const page = await renderPage()
    return { assets, data, ...page }
  }
 
  render() {
    const { helmet, assets, data } = this.props
    // get attributes from React Helmet
    const htmlAttrs = helmet.htmlAttributes.toComponent()
    const bodyAttrs = helmet.bodyAttributes.toComponent()
 
    return (
      <html {...htmlAttrs}>
        <head>
          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          {helmet.title.toComponent()}
          {helmet.meta.toComponent()}
          {helmet.link.toComponent()}
          {assets.client.css && (
            <link rel="stylesheet" href={assets.client.css} />
          )}
        </head>
        <body {...bodyAttrs}>
          <AfterRoot />
          <AfterData data={data} />
          <script
            type="text/javascript"
            src={assets.client.js}
            defer
            crossOrigin="anonymous"
          />
        </body>
      </html>
    )
  }
}
 
export default Document

Then import getAssets from afterjs-assets and call it in static getInitialProps:

Note: manifest.json will get generated at build time so don't worry if it's not already exist.

// ./src/Document.js
 
import manifest from '../build/manifest.json';
import { getAssests } from 'afterjs-assets';
 
const prefix =
  process.env.NODE_ENV === "production"
    ? "/"
    : `http://${process.env.HOST}:${parseInt(process.env.PORT, 10) + 1}/`
 
 
class Document extends React.Component {
 
  static async getInitialProps({ assets, data, renderPage, req }) {
    const page = await renderPage();
 
    // call getAssests and pass styles and scripts to component
    const { styles, scripts } = getAssests({ req, routes, manifest });
    return { assets, data, styles, scripts, ...page };
  }
 
}

then in render method just loop through scripts and styles

  render() {
    const { helmet, assets, data } = this.props;
    const htmlAttrs = helmet.htmlAttributes.toComponent();
    const bodyAttrs = helmet.bodyAttributes.toComponent();
 
    return (
      <html {...htmlAttrs}>
        <head>
          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          {helmet.title.toComponent()}
          {helmet.meta.toComponent()}
          {helmet.link.toComponent()}
          {assets.client.css && (
            <link rel="stylesheet" href={assets.client.css} />
                    )}
          {styles.map((path) => (
            <link key={path} rel="stylesheet" href={path} />
          ))}
        </head>
        <body {...bodyAttrs}>
          <AfterRoot />
          <AfterData data={data} />
          <script
            type="text/javascript"
            src={assets.client.js}
            defer
            crossOrigin="anonymous"
          />
          {scripts.map((path) => (
            <script
              key={path}
              defer
              type="text/javascript"
              src={prefix + path}
              crossOrigin="anonymous"
            />
          ))}
        </body>
      </html>
    );
  }

To use your custom <Document>, pass it to the Document option of your After.js render function.

// ./src/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 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,
        routes,
        assets,
      });
      res.send(html);
    } catch (error) {
      console.log(error);
      res.json(error);
    }
  });
 
export default server;

Call ensureReady after Window Load

if we call ensureReady on browser (client), it will try to download styles and scripts for second time, (i don't know why browsers allow this). to fix this just call ensureReady on windows.onload method:

window.onload = () => {
  ensureReady(routes).then(data =>
    hydrate(
      <BrowserRouter>
        <After data={data} routes={routes} />
      </BrowserRouter>,
      document.getElementById("root")
    )
  )
}

Typescript Support

This Project Written in TypeScript and types available in index.d.ts so there is no need to install any @types/ package.

Contribution

Feel free to propose changes or open issues.

I'm really thinking about duplicate values in routes (name and webpackChunkName) but couldn't find any suitable solution.

we can use webpackChunkName with dynamic import to name chunks by requested filename.

// routes.js
 
function myAsyncComponentLoader(page) {
  return asyncComponent({
    loader: () => import(/* webpackChunkName: "[request]" */ `./pages/${page}`),
  })
}
 
const routes = [
  {
    name: "About", // About.js file which located in ./pages/About.js
    path: "/about",
  },
  {
    name: "Home", // Home.js file which located in ./pages/Home.js
    path: "/",
    exact: true,
  },
]
 
export default routes.map(route => {
  const { name: componentName } = route
  return { component: myAsyncComponentLoader(componentName), ...route }
})

This project was bootstrapped with TSDX.

afterjs-assets

After.js Assets

The Problem with After.js

Setup

Add name and chunkName to routes

Create Custom `<Document>`

Call ensureReady after Window Load

Typescript Support

Contribution

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

afterjs-assets

After.js Assets

The Problem with After.js

Setup

Add name and chunkName to routes

Create Custom <Document>

Call ensureReady after Window Load

Typescript Support

Contribution

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Create Custom `<Document>`

Weekly Downloads