Routerで構築したSPAを事前描画した状態でビルドします。今回の開発環境は以下の通りです。Routerの環境を前提で進めます。環境構築については、VueRouterの基本とルーティングを構築するはじめの一歩を確認してください。プリレンダリングプリレンダリング(Prerendering)は、事前描画を意味します。その際に、複数の機能(画面)も予め書き出してしまおう。Routerを利用して複数の機能(画面)を用意するとします。1つのファイルしか物理的に存在しないのがベーシックなSPAのため、Googleのインデックスが意図通りに行かずSEO的に不利になる場合があります。そんな時に強い味方となるのがSSR(サーバーサイドレンダリング)ですが、サーバ側処理の構築が必要です。紹介したルーティングで工夫をする場合でも、catch-allフォールバックを用いる場合にサーバ側の設定が必要です。そこをまず考える必要があります。それには、時間も労力もかかるからです。小規模なアプリケーションであってもコストを最小に抑え、確実な描画結果を担保したい。そこで登場するのが、プリレンダリングです。いう仕組みなのか複数の画面があるということは、ルーティングを行っているということになりますが、ルート以外にもパスが存在しているということになります。//about/product/recruitみたいな感じです。CLIで通常のビルドを行うと、生成されるHTMLファイルは1つだけ(index.html)です。これをプリレンダリングを用いることで、以下のHTMLファイル(とその関連ファイル群)を予め生成することができます。/index.html/about/index.html/product/index.html/recruit/index.html完全に静的なページとしてリリースする事で、SSRなどを用いなくても確実な画面分割を実現できます。これが、プリレンダリングです。プリレンダリングの導入と設定それでは導入と設定を行っていきます。Pluginを導入します。https://github.com/chrisvfritz/prerender-spa-plugin以下のnpmコマンドを叩いてインストールします。prerender-spa-pluginインストールが完了したら、プロジェクトルートに設定ファイルを作成し、Webpackの設定を行います。}}staticDirプロパティに出力先を指定しています。routesプロパティにプリレンダリングにて生成する画面を指定しています。CLIでビルドを行う事で、プリレンダリングが行われます。buildプリレンダリングを行わない通常のビルドと、プリレンダリングを行った場合のビルドの違いを見てみます。静的なページの遷移と同じになります。metaやOGPなどのhead情報は予め切り替えられた状態で書き出される。サンプルページ通常のビルドプリレンダリングを用いたビルドサンプルページで確認すると、ルーティング周りの挙動の違いも確認できます。プリレンダリングを行った場合は物理的にページが存在するので画面をどこでリロードしても正常に表示されます。デプロイ先の環境によっては出力先のパス(ディレクトリ階層)が異なっていたりする場合に、それ用にビルドしたい時があります。以下のような場合です。これを本番のURLで動作するようにビルド時にまるっとパスを変更する事も出来ます。それには、以下の用に設定します。}}こうする事で、metaタグの各種ファイル読み込みからナビゲーションメニューのパスまで全てが、指定したパスが付与された状態でビルドされます。コンパイルしてからプリレンダが走るので、ベースセットも含め適切な場所に出力してあげる事がポイントです。href="/parent/child/recruit">Recruit</a></div>出力ディレクトリも指定の通りの構成になります。index.htmlまとめ以上で作業は終了です。Vue.jsで小規模なアプリケーションを作成する場合や、サーバーサイドまで手を付けるのにはちょっと自信や時間が無い場合にはとても有効なので是非試してみてください。CLIでVue.jsの開発環境をサクッと構築する(Vuex/VueRouter/SFC)Vue.jsでドラッグアンドドロップによる要素の並べ替えと移動を実装するLaravelにReactを導入する。SESを使ってAPIメール送信を行う(Mailableクラス&SimpleEmailService)2019.12.3MySQL8.0.16で追加されたCHECK制約を試してみる。RitoLaboこのサイトについて利用規約プライバシーポリシ。