Generating Layout Markup
Take this further: render the layout for everything else
So any other page would at least have the layout markup (not empty page)
// **** webpack.config.js ****
require('babel/register')
var getConfig = require('hjs-webpack')
var React = require('react')
var PublicPage = require('./src/pages/public')
// ++++ 2. require the layout
var Layout = require('./src/layout')
module.exports = getConfig({
in: 'src/app/js',
out: 'public'.
clearBeforBuild: true,
html: function (context) {
const publicPage = React.renderToString(React.createElement(PublicPage))
// ++++ 1. prerender layouts
const layoutPage = React.renderToString(React.createElement(Layout, {me:{}}))
return {
'index.html': context.defaultTemplate({html: publicPage}),
// ++++ 3. pass the rendered layout
'200.html': context.defaultTemplate({html: Layout})
}
}
})
Note about the context
object: it includes all references to asset files (js, css, img). Is the html file will import all css, js, whatever files and just puts the rendered html in the body
. We might need some data at ++++ 1. point (even an empty object ) like
Good solution for the "white page of death". {me:{}}
You can even add a
db.query(...)
and pre-generate the whole site. You can even pre-generate the JSON.
Talks about the google developers who are very performance focused: the barrier can be too high for new developers.
Another point:The javascript is cached while they're on a static page e.g. the about page