React.jsのSPAサイトをprerender-spa-pluginでプリレンダリングしてみた
react.jsで作ったSPAサイトがSEOであんまりだったので、SSRとかプリレンダリングしたかったけど、レンタルサーバーで、node.jsが使えないので、調べたところ prerender-spa-plugin
を使ってコンパイル時に静的ファイルを書き出す方法があったのでやってみました。
コンパイルはwebpackです。
って長く読みにくくすみません。。。
npm
まずはnpmでインストールしましょう
1 |
npm install --save-dev prerender-spa-plugin |
webpack.config.js
webpack.config.jsに以下を追加
pluginsはplugins項目があればそこに追加してください。
1 2 3 4 5 6 7 8 9 10 |
const PrerenderSPAPlugin = require('prerender-spa-plugin'); plugins: [ new PrerenderSPAPlugin({ // `/distribution`のとこに出力先のフォルダ staticDir: path.join(__dirname, './distribution'), // プリレンダリングするページ routes: [ '/', '/aboutus', '/contactus', '/privacy' ], }) ] |
でコンパイルすれば。出来上がりです。
簡単です。
今の所、サーチコンソールでは綺麗にインデックスされているようですが、どうなるのでしょうか
よろしければコメントをどうぞ