2019/1/19 v-kansai での発表スライドです。 Nuxt でSSRするのはそんなに難しくなかったよ〜というお話。
Nuxt.js で SSR 対応をする2019.1.19 v-kansai Vue.js/Nuxt.js meetup #2
View Slide
ショウノシオリ@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.jsmodule.exports = {generate: {routes: [‘/sponsor/株式会社A’,‘/sponsor/株式会社B’,‘/sponsor/株式会社C’,]}}
▷ 動的なパラメータが必要な場合は Promise を返す関数を使うことができる○ callback + 関数 でもOKimport 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<br/>export default {<br/>name: ‘sponsor’,<br/>async asyncData({store, route}) {<br/>const [sponsor] = await Promise.all([<br/>store.dispatch(“fetchSponsorData”, route.params.name),<br/>])<br/>return {sponsor}<br/>}<br/>}<br/>▷ 今回はページコンポーネント内でデータを使うため asyncData を使用○ context オブジェクトからは store、route などが取れる
完成!!スポンサー詳細画面の SSR 対応が完了しました
「Nuxt.js で SSR 対応してみた」感想▷ Nuxt.js で作ったサイトであれば SSR 対応をするハードルはあまり高くない○ 作ったサイトやサービスをより良くしていくためにも、必要であれば取り入れるのが良さそう▷ ただし、面倒くささは確かにある○ 必要なページコンポーネントでだけ実装するのが良さそう
参考▷ https://speakerdeck.com/bumptakayuki/nuxt-dot-jsdehazimeru-sabasaidorendaringu?slide=8▷ https://zen-web.net/blog/nuxtjs-asyncdata-fetch/▷ https://ja.nuxtjs.org/api/configuration-generate/#generate-%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]