Skip to content

Instantly share code, notes, and snippets.

Last active Apr 15, 2018
What would you like to do?
Markup for server side render
/* @flow */
import { StaticRouter } from 'react-router-dom';
import { getBundles } from 'react-loadable/webpack';
import App from './../App';
import Loadable from 'react-loadable';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import bundleStats from './../../dist/build/react-loadable.json';
import stats from './../../dist/build/stats.json';
const vendorJsSrc = stats.vendors;
const bundleJsSrc = stats.bundle;
const manifestJsSrc = stats.manifest;
const modules = [];
function fetchModuleName(moduleName: string) {
return modules.push(moduleName);
export function renderStaticMarkup(request: Object) {
const context = {};
const markup = ReactDOMServer.renderToString(
<Loadable.Capture report={fetchModuleName}>
<StaticRouter location={request.url} context={context}>
<App />
const bundles = getBundles(bundleStats, modules);
const bundleScriptTags = => {
return `<script type="text/javascript" src="/js/${bundle.file}"></script>`;
return `
<!-- Doctype HTML5 -->
<html lang="en-us">
<div id="root">${markup}</div>
<script type="text/javascript" src="/js/${manifestJsSrc}"></script>
<script type="text/javascript" src="/js/${vendorJsSrc}"></script>
<script type="text/javascript" src="/js/${bundleJsSrc}"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment