Router未対応だが、とりあえずイニシャルページが確定的で事前にコンパイルできるケースでSSRする。
やり方
- ejs で html をビルド時に SSR して埋めてしまう。
- その時のコンテキストは node なので babel-register を叩けば動くはず
コード
src/ssr/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<%
require('babel-register');
const React = require('react')
const ReactDOM = require('react-dom/server');
const App = require('../components/App').default;
%>
<div id='app-root'><%= ReactDOM.renderToString(React.createElement(App)) %></div>
<script src="index.bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path')
const webpack = require('webpack')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ENV = process.env.NODE_ENV || 'development'
module.exports = {
entry: { /* */ },
output: { /* */ },
module: { /* */ },
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/ssr/index.ejs'),
minify: false,
inject: false
})
]
}
html-webpack-plugin で minify してしまうと SSR の引き継ぎに失敗するので、その点だけ注意