Product
Introducing Reports: An Extensible Reporting Framework for Socket Data
Explore exportable charts for vulnerabilities, dependencies, and usage with Reports, Socket’s new extensible reporting framework.
By André Staltz - Apr 21, 2026
Launch Week Day 1: Socket for Jira Is Now Available.Learn More →
afterjs-assets
Advanced tools
After.js Assets
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.
FAQs
Load After.js css and javascript files faster
We found that afterjs-assets demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 15 Jun 2019
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Socket for Jira Is Now Available
Socket for Jira lets teams turn alerts into Jira tickets with manual creation, automated ticketing rules, and two-way sync.
By Jeppe Hasseriis - Apr 20, 2026
Company News
Socket Named Top Sales Organization by RepVue
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
By Sarah Gooding - Apr 17, 2026