Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js で SSR 対応する

Nuxt.js で SSR 対応する

2019/1/19 v-kansai での発表スライドです。
Nuxt でSSRするのはそんなに難しくなかったよ〜というお話。

ショウノシオリ

January 19, 2019
Tweet

More Decks by ショウノシオリ

Other Decks in Programming

Transcript

  1. SSRとは? ▷ サーバーサイドでレンダリングすること ◦ サーバー上で Vue.js を HTML にする、とか ▷

    メリット ◦ ブラウザ以外の場所(サーバー)で HTML を生成することができ る ◦ ブラウザに表示される前にHTMLにデータを埋め込むことができ るため、SEO的に強かったりする ▷ デメリット ◦ 実装が面倒 ▪ ブラウザで使える関数がサーバー上では使えなかったりする ので、その辺を考慮しなければならない
  2. Nuxt.js の SSR 対応 ▷ Nuxt.js には SSR の機能が備わっている ◦

    Nuxt.js は SSR機能、vuex、vue-router などアプリケーション構築 に便利なツールが備わった Vue.js の FW (Vue.js で SSR するには vue-server-render を入れる必要有) ◦ 今回試したのは generate の SSR
  3. 1. 動的URLページを静的ページ化する ▷ Nuxt.js はファイル名を _ 始まりにすると、複数のURLで同じ コンポーネントを表示させることができる ◦ 今回のファイルは

    pages/sponsor/_name.vue ◦ _ name.vue のパラメータは $route.param.name でとれる ▷ ただし、_ 始まりのファイルは generate 時に書き出されない ◦ generate は実際に HTML ファイルに変換して書き出す作業を行う ◦ _ で始まるファイルを HTML に書き出したい場合は設定が必要
  4. ▷ nuxt.config.js の generate プロパティ下にある routes オプ ションに配列で設定 設定方法 //nuxt.config.js

    module.exports = { generate: { routes: [ ‘/sponsor/株式会社A’, ‘/sponsor/株式会社B’, ‘/sponsor/株式会社C’, ] } }
  5. ▷ 動的なパラメータが必要な場合は 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 } } }
  6. 2. ページコンポーネントで SSR する ▷ SSR せず、mounted() や created() でデータをとってくると、

    ブラウザで読み込まれた段階でデータは空っぽになってし まっている ▷ ページコンポーネント内で SSR するには asyncData / fetch が使える ◦ 両者ができることは同じだが、readability の観点から使い分けるの がよい ◦ vuex にデータを入れるときは fetch、ページコンポーネントでデータ を使うときは asyncData
  7. asyncData / fetch ▷ ページコンポーネントがロードされる前に呼び出される ▷ SSRやページ遷移前にも呼び出される ▷ 第一引数に context

    オブジェクトを受け取ることができる ▷ ページコンポーネントが初期化される前に呼び出されるた め、asyncData/fetch の中で this は使えない
  8. 実際に使ってみる //sponsor/_name.vue <script> export default { name: ‘sponsor’, async asyncData({store,

    route}) { const [sponsor] = await Promise.all([ store.dispatch(“fetchSponsorData”, route.params.name), ]) return {sponsor} } } </script> ▷ 今回はページコンポーネント内でデータを使うため asyncData を使用 ◦ context オブジェクトからは store、route などが取れる
  9. 「Nuxt.js で SSR 対応してみた」感想 ▷ Nuxt.js で作ったサイトであれば SSR 対応をするハードル はあまり高くない

    ◦ 作ったサイトやサービスをより良くしていくためにも、必要であれば 取り入れるのが良さそう ▷ ただし、面倒くささは確かにある ◦ 必要なページコンポーネントでだけ実装するのが良さそう