#Nuxt.jsのComponent単位でSSRしたかったけどダメだった話
2019/01/23 16:18:18 更新 fetch()メソッドからのStore経由でPropsを使わないSSRが実現できたので追記
Componentが正しくSSRされない
先日、こんな感じ↓でComponentの設計をした。
利用するデータは極力Component内部だけで完結させたく、SectionComponent単位でaxiosの処理を行うように実装をしていた。
これはメンテナンス性の向上を図り、SectionComponent単位で独自の機能とすることとしたかったため。
さらに、今回構築しているサイトはSSRが必須なため、同じくSectionComponent内部でasyncDataを定義。
そして正しくSSRされているか試したところ、どうにも上手くレンダリングされなかった。
そもそも
そもそも、ComponentはasyncDataを持っていないとのこと。
コンポーネントは asyncData メソッドを持たないため、サーバーサイドでコンポーネント内で非同期にデータを取得することは直接的にはできません。
SSRを試したらasyncData内部の処理も動くことは動いていており、何回か試したところ正常にSSRされることは確認した。
しかし、基本的にはSSRされず。
上記のページにて、
ページコンポーネントの asyncData() または fetch() メソッド内に API コールを作成し、データを props としてサブコンポーネントへ渡すこと。この方法ではサーバーサイドレンダリングでもうまく機能します。マイナスな側面: ページ内 asyncData() または fetch() が他のコンポーネントのデータをロードするため、可読性が落ちるかもしれません。
とあるので、とりあえずはこの方法でSSRすることにする。
ただ、SSRの場合はpropsを使うしか無いというのが・・・。
fetchメソッド
fetchメソッドを利用してStore経由でComponentにデータを渡すことで、Propsを利用せずにSSRを実現することが出来た。
2019/01/23 16:18:18 更新 fetch()メソッドからのStore経由でPropsを使わないSSRが実現できたので追記
fetchメソッドとは。
fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては asyncData メソッドとよく似ています。
fetch メソッドが設定されている場合、コンポーネント(ページコンポーネントに限ります)がロードされる前に毎回呼び出されます。サーバーサイドレンダリングや、ページを遷移する前にも呼び出されます。
axiosを利用してAPIからデータを取得し、mutationsを呼び出すactionsを定義する。(actions自体にasyncをつける)
そして、fetch内部で当該actionsを呼びだし、Promiseを返却すればOK。