Nuxt.js で SSR 対応をする 2019.1.19 v-kansai Vue.js/Nuxt.js meetup #2

ショウノシオリ @shosho_egg 株式会社 chatbox （Web制作、IT系イベントの運営・支援 etc） フロント＆バックエンドエンジニア Vue.js・Nuxt.js / PHP（Laravel） PHPカンファレンス関西 2017＆2018 実行委員長

Nuxt.js で SSR 対応をすることになったきっかけ

「Laravel JP Conference のスポンサー詳細ページ を SSR対応にしてください」 （Nuxt.js で作ったサイト）

“ 「SSRって聞いたことあるけど、何？」 「なぜするの？」 「どうやってするの？」

と私が実際に疑問に思ったことを中心に 学んだことなどを紹介しようと思います

「SSRって何？」 「なぜするの？」

SSRとは? ▷ サーバーサイドでレンダリングすること ○ サーバー上で Vue.js を HTML にする、とか ▷ メリット ○ ブラウザ以外の場所（サーバー）で HTML を生成することができ る ○ ブラウザに表示される前にHTMLにデータを埋め込むことができ るため、SEO的に強かったりする ▷ デメリット ○ 実装が面倒 ■ ブラウザで使える関数がサーバー上では使えなかったりする ので、その辺を考慮しなければならない

Nuxt.js の SSR 対応 ▷ Nuxt.js には SSR の機能が備わっている ○ Nuxt.js は SSR機能、vuex、vue-router などアプリケーション構築 に便利なツールが備わった Vue.js の FW （Vue.js で SSR するには vue-server-render を入れる必要有） ○ 今回試したのは generate の SSR

「どうやってするの？」

今回 SSR 対応 するページ ○ pages/sponsor/_name.vue ○ コーディングのみ完了 ○ スポンサー情報は API で取得 ○ SSR 対応するとスポンサー情報がSEO的に◎

やることは2つ 1. 動的URLページを静的ページ化する 2. ページコンポーネントで SSR する

1. 動的URLページを静的ページ化する ▷ Nuxt.js はファイル名を _ 始まりにすると、複数のURLで同じ コンポーネントを表示させることができる ○ 今回のファイルは pages/sponsor/_name.vue ○ _ name.vue のパラメータは $route.param.name でとれる ▷ ただし、_ 始まりのファイルは generate 時に書き出されない ○ generate は実際に HTML ファイルに変換して書き出す作業を行う ○ _ で始まるファイルを HTML に書き出したい場合は設定が必要

▷ nuxt.config.js の generate プロパティ下にある routes オプ ションに配列で設定 設定方法 //nuxt.config.js module.exports = { generate: { routes: [ ‘/sponsor/株式会社A’, ‘/sponsor/株式会社B’, ‘/sponsor/株式会社C’, ] } }

▷ 動的なパラメータが必要な場合は Promise を返す関数を使う ことができる ○ callback + 関数 でもOK import axios from “axios” module.exports = { generate: { async routes() { const path = [] const request = axios.create({ baseURL: ‘https://...’ }) const {data} = await request(“/sponsors”) for (let plan of data.sponsor_plans { for (let sponsor of plan.sponsors) { path.push(`/sponsor/${sponsor.name}`) } } return path } } }

2. ページコンポーネントで SSR する ▷ SSR せず、mounted() や created() でデータをとってくると、 ブラウザで読み込まれた段階でデータは空っぽになってし まっている ▷ ページコンポーネント内で SSR するには asyncData / fetch が使える ○ 両者ができることは同じだが、readability の観点から使い分けるの がよい ○ vuex にデータを入れるときは fetch、ページコンポーネントでデータ を使うときは asyncData

▷ ページコンポーネントで SSR しない場合 ○ generate した場合、mounted() は呼び出されないので data() がその まま出力される

▷ ページコンポーネントで asyncData を使って SSR する場合 ○ generate時に asyncData が呼び出されるので、data() は上書きされる

asyncData / fetch ▷ ページコンポーネントがロードされる前に呼び出される ▷ SSRやページ遷移前にも呼び出される ▷ 第一引数に context オブジェクトを受け取ることができる ▷ ページコンポーネントが初期化される前に呼び出されるた め、asyncData/fetch の中で this は使えない

実際に使ってみる //sponsor/_name.vue export default { name: ‘sponsor’, async asyncData({store, route}) { const [sponsor] = await Promise.all([ store.dispatch(“fetchSponsorData”, route.params.name), ]) return {sponsor} } } ▷ 今回はページコンポーネント内でデータを使うため asyncData を使用 ○ context オブジェクトからは store、route などが取れる

完成！！ スポンサー詳細画面の SSR 対応が完了しました

「Nuxt.js で SSR 対応してみた」感想 ▷ Nuxt.js で作ったサイトであれば SSR 対応をするハードル はあまり高くない ○ 作ったサイトやサービスをより良くしていくためにも、必要であれば 取り入れるのが良さそう ▷ ただし、面倒くささは確かにある ○ 必要なページコンポーネントでだけ実装するのが良さそう

参考 ▷ https://speakerdeck.com/bumptakayuki/nuxt-dot-js dehazimeru-sabasaidorendaringu?slide=8 ▷ https://zen-web.net/blog/nuxtjs-asyncdata-fetch/ ▷ https://ja.nuxtjs.org/api/configuration-generate/#ge nerate-%E3%83%97%E3%83%AD%E3%83%91%E3 %83%86%E3%82%A3

Thanks! Any questions? You can find me at: @username [email protected]