Nuxt.js で SSR 対応する

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

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
    user@mail.me
    

    View Slide