第5弾です。
Nuxt.js化計画の概要についてはvol.1を参照ください。 また、過去のシリーズも通してリンクしているのでぜひ御覧ください。
徐々に弊社アプリケーションのフロントエンドもLaravelからNuxt.jsに移行しています。
今回は成約事例一覧とM&Aお役立ち資料ページがめでたくNuxt.js化されました。
実は今までNuxt.jsによる動的なルーティングは使っていませんでした。
今回のリニューアルのタイミングで個別のページはNuxt.jsによるルーティングを利用しています。
成約事例一覧
弊社のプラットフォームであるM&Aクラウド上での成約事例をインタビュー記事として紹介しているページです。
リニューアル前は絞り込み機能はありませんでしたが、今回Nuxt.js化する際に追加されました。
記事についているタグで絞り込むことができます。
M&Aお役立ち資料
M&A時に必須である資料のフォーマットの配布や、弊社調べによる有益な資料をダウンロードすることができるページです。
NotFoundの扱いについて
ここからは少し技術的な話をしたいと思います。
今回のリニューアルから新たにNuxt.jsの動的なルーティングを利用しています。
ここで注意しなくてはならないのは存在しないページの処理についてです。
ページのコンテンツはHTTP APIによってそのリソースが存在するか確認します。
厳密に言うとリソースが存在することを確認するというよりも、リソースを取得できない場合にそのリソースが存在しなかったという結果をHTTPのステータスコードで表現することが一般的だと思います。
Nuxt.jsではaxiosというHTTPクライアントライブラリを利用してHTTP APIからデータを取得しています。
axiosではレスポンスからHTTPのステータスコードをステータスコードが取得できますので、404だった場合はNuxt.jsのerror関数を実行することで404画面を表示することが出来ます。
error({ statusCode: status })
※axiosは200系以外のステータスコードをすべてaxiosErrorという例外で扱われます。適宜設定を替える必要があります。 https://github.com/axios/axios/blob/master/lib/defaults.js#L79-L81
しかし、弊社の場合は取得した値を一旦store（Vuexによるグローバルにアクセスできるデータストア）に格納して、そのstoreからデータを取得するロジックになっています。
そのため、axiosで404の場合はエラーにはせずに、storeからの取得の際にデータがない場合に独自の例外を発生させて404を表現しています。
try { useInterview(store).getInterview() } catch (e) { if (e instanceof NotFoundError) { error({ statusCode: e.statusCode }) } }
SSRとCSRに跨ったシャッフル処理
Nuxt.jsはSSR（サーバーサイドレンダリング）とCSR（クライアントサイドレンダリング）によるユニバーサルなアプリケーションを作ることが出来ます。
この挙動に関してハマリポイントがあったので共有します。
それは、シャッフルを利用したDOMの操作です。
対象の箇所は以下のようなカルーセルです。
ここでは表示する度に要素がシャッフルされる仕様です。
配列をシャッフルしてその配列をeachで表示する至ってシンプルなロジックです。
問題になったのは、SSR時にシャッフルされてレンダリングされた結果と、表示時にCSRでシャッフルしてレンダリングが異なるため一部のレンダリングがずれた事にありました。
imgタグのsrcがCSR時に変わっていなくてタイトルと画像が食い違うという事象がありました。
そのため、シャッフル要素に関しては都度表示が変わるためSEOとしても対応不要としてCSR時のみ実行されるように変更しました。
Nuxt.jsではこの様にSSRとCSR時の挙動も把握する必要があると痛感しました。
最後に
M&Aクラウドではエンジニアを絶賛募集中ですので、興味がありましたら是非以下からご応募ください！
Nuxt.jsの挙動を熟知している方は大歓迎です！
