#Nuxt.jsのComponent単位でSSRしたかったけどダメだった話

2019/01/23 16:18:18 更新 fetch()メソッドからのStore経由でPropsを使わないSSRが実現できたので追記

Componentが正しくSSRされない

先日、こんな感じ↓でComponentの設計をした。

omiend.hatenablog.jp

利用するデータは極力Component内部だけで完結させたく、SectionComponent単位でaxiosの処理を行うように実装をしていた。

これはメンテナンス性の向上を図り、SectionComponent単位で独自の機能とすることとしたかったため。

f:id:omiend:20190122205821p:plain

さらに、今回構築しているサイトはSSRが必須なため、同じくSectionComponent内部でasyncDataを定義。

f:id:omiend:20190122205457p:plain

そして正しくSSRされているか試したところ、どうにも上手くレンダリングされなかった。

そもそも

そもそも、ComponentはasyncDataを持っていないとのこと。

コンポーネントは asyncData メソッドを持たないため、サーバーサイドでコンポーネント内で非同期にデータを取得することは直接的にはできません。

参考: コンポーネント内の非同期データ - Nuxt.js

SSRを試したらasyncData内部の処理も動くことは動いていており、何回か試したところ正常にSSRされることは確認した。

しかし、基本的にはSSRされず。

f:id:omiend:20190122205510p:plain

上記のページにて、

ページコンポーネントの asyncData() または fetch() メソッド内に API コールを作成し、データを props としてサブコンポーネントへ渡すこと。この方法ではサーバーサイドレンダリングでもうまく機能します。マイナスな側面: ページ内 asyncData() または fetch() が他のコンポーネントのデータをロードするため、可読性が落ちるかもしれません。

とあるので、とりあえずはこの方法でSSRすることにする。

f:id:omiend:20190122210737p:plain

ただ、SSRの場合はpropsを使うしか無いというのが・・・。

fetchメソッド

fetchメソッドを利用してStore経由でComponentにデータを渡すことで、Propsを利用せずにSSRを実現することが出来た。

2019/01/23 16:18:18 更新 fetch()メソッドからのStore経由でPropsを使わないSSRが実現できたので追記

fetchメソッドとは。

fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。コンポーネントのデータをセットしないという点を除いては asyncData メソッドとよく似ています。

fetch メソッドが設定されている場合、コンポーネント(ページコンポーネントに限ります)がロードされる前に毎回呼び出されます。サーバーサイドレンダリングや、ページを遷移する前にも呼び出されます。

参考:ja.nuxtjs.org

axiosを利用してAPIからデータを取得し、mutationsを呼び出すactionsを定義する。(actions自体にasyncをつける)

そして、fetch内部で当該actionsを呼びだし、Promiseを返却すればOK。

f:id:omiend:20190123163310p:plain