search

110chang / try_react_ssr

0 stars 0 forks source link

単純なSSR #1

Open 110chang opened 6 years ago

110chang commented 6 years ago

サーバーサイド

// renderToNodeStreamの例
app.get('/', (req, res) => {
  renderToNodeStream(
    <Html>
      <App />
    </Html>
  ).pipe(res);
})

本題からはずれるが、babel-registerでNode側でもES6/Reactを使用できる production useでは事前にトランスパイルするのが望ましい(らしい)

require('babel-register')({
  presets: ['env', 'react']
});
require(/* エントリーポイント */);

http://expressjs.com/ja/starter/static-files.html https://github.com/babel/babel/issues/5851

production use

production useでは事前にbabelによるtranspileが必要 このとき、nodeランタイムのためにnode_modulesを無視する必要があるため webpack-node-externalsを使用する

const nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node',
  externals: [nodeExternals()],
  /* ... */
};

https://saku.io/build-for-node-runtime-using-webpack/

110chang commented 6 years ago

はまりポイント

サーバーサイドにassetsを提供するapp.useにディレクトリを指示するとき、エントリーポイントではなくwebpack.configのディレクトリからたどる必要がある(?)

const app = express()
app.use(express.static('./dist'))