$30 off During Our Annual Pro Sale. View Details »

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. Nuxt.js で SSR 対応をする
    2019.1.19 v-kansai Vue.js/Nuxt.js meetup #2

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

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

    View Slide

  7. 「SSRって何?」
    「なぜするの?」

    View Slide

  8. SSRとは?
    ▷ サーバーサイドでレンダリングすること
    ○ サーバー上で Vue.js を HTML にする、とか
    ▷ メリット
    ○ ブラウザ以外の場所(サーバー)で HTML を生成することができ

    ○ ブラウザに表示される前にHTMLにデータを埋め込むことができ
    るため、SEO的に強かったりする
    ▷ デメリット
    ○ 実装が面倒
    ■ ブラウザで使える関数がサーバー上では使えなかったりする
    ので、その辺を考慮しなければならない

    View Slide

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

    View Slide

  10. 「どうやってするの?」

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. ▷ 動的なパラメータが必要な場合は 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
    }
    }
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. 実際に使ってみる
    //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 などが取れる

    View Slide

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

    View Slide

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

    View Slide

  23. 参考
    ▷ 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

    View Slide

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

    View Slide