使ってSPAサイトのSEO対策をする株式会社なすびのウェブサイトは、Vue.jsを用いたSPAで作られています(2017年4月現在)。コーポレートサイトのような情報の提供に重きを置くサイトで、SPAのアーキテクチャを使うことはSEOの面からあまり適した用途であるとは言えません。それは、GoogleボットこそJSを実行してからパースしてくれるので問題にはならないのですが、FacebookなどのSNSにシェアされた場合は未だにJSの実行までしてくれないからです。これを解決するためには、サーバーからのレスポンスでHTMLを返す必要性が絶対的にあるのですが、いかんせんSSRを前提に環境の構築を考えると、サーバサイドでNode.jsを噛ませる必要があったりなど、なかなかに敷居が高いのです。コーポレートサイトのような、ページ数も動的コンテンツも少ない小規模サイトであれば、プリレンダリングという選択肢もあります。今回はwebpackプラグインでサクッとプリレンダリングする方法の紹介です。Pluginhttps://github.com/chrisvfritz/prerender-spa-pluginこのプラグインを使って、webpackのbuild過程で静的HTMLを書き出してしまいます。]}上記のように保存先とエンドポイントを設定してbuildすると、下記3ファイルが書き出されます。違うファイルを指しているため、この状態でリロードすると404になってしまいます。