第５回 JS ビアバッシュ初心者勉強会 in西新宿

# nuxt-client-init-module

第５回JS ビアバッシュ 初心者勉強会 in西新宿<br />
2018-12-08<br />
okamuuu

---

# こんにちは

---

# 最近 Nuxt.js を使っています

お客様が SSR したいっぽいので後から言われても困らないように Nuxt.js を選定しました。

---

# お話の前に

Nuxt.js の SSR mode でユーザーが 画面を reload した場合の挙動について説明します

---

# こういう挙動をしています

* SSR で HTML がレンダリングされてブラウザはそれを読み込む
* ブラウザに画面が表示され始める
* しばらくするとブラウザが Javascript を読み終える
* そのタイミングで今度はJS がもう一度 rendering

https://practice-nuxt-client-init-module-vpibzdenhn.now.sh/one

---

# 本題に入ります

---

# とある問題を解決したい

* CSS の適用が遅れて画面のデザインが一瞬崩れる
* デザインが崩れるのは一瞬だけ
* fade in させよう

---

# 以下のようなコードを書いた

```javascript
async nuxtServerInit (store, context) {
  setTimeout(function() {
    store.state.isLoading = false
  }, 500)
}
```

isLoading が true から false になったら loading 完了にする

https://practice-nuxt-client-init-module-vpibzdenhn.now.sh/two

---

# いつまでも isLoading

```javascript
async nuxtServerInit (store, context) {
  setTimeout(function() {
    store.state.isLoading = false
  }, 500)
}
```

* nuxtServerInit は実行直後の state を元に HTML を書き出している。
* その後に setTimeout で state 変えても意味がない。
* isLoading を false にする処理はここ以外にないので永遠に isLoading のまま

---

# nuxtClientInit が欲しい

* Nuxt.js は client 側で最初の一回だけ呼び出す関数を用意していません。
* nuxt-client-init-module を使うといいです

```javascript
async nuxtServerInit (store, context) { ... },
async nuxtClientInit (store, context) {
  setTimeout(function() {
    store.state.isLoading = false
  }, 500)
}
```

https://practice-nuxt-client-init-module-vpibzdenhn.now.sh/three

---

# まとめ

* Nuxt.js は SSR した直後に、すぐに仮想 DOM でレンダリングをやり直している
* そのタイミングで実行される関数が欲しい
* nuxt-client-init-module を使えば良いでしょう

---

# おしまい