パート4〜Heroku + WordPress + Netlify + Nuxtで無料ブログ環境構築してみた〜の巻

何に苦戦したかを簡単にいうと「WP REST APIの呼び出し回数を減らすこと」です。

そもそも、アップデート前の構成は以下のような感じでした。

　①トップページ用のvueファイルの中で各記事用のvueファイルを動的に生成する（ここでAPIを呼ぶ）

　②トップページ用のvueファイルの中でカテゴリページ用のvueファイルを動的に生成する（ここでもAPIを呼ぶ）

　③各記事用のvueファイルの中でその記事のidに紐付く投稿を取得する（ここでもAPIを呼ぶ）

　④各カテゴリページ用のvueファイルの中でそのcategoryに紐づく投稿を取得する（ここではAPIを2回呼ぶ）

そう。API呼びすぎていたんですねw

無料のHerokuのDBにしているという背景もあって、APIを叩きすぎるとDBへのアクセスが遮断されてしまうようになってしまったのです。（1時間待つと解放されるのですが、それは待てないので、、）

④も「叩きすぎだろ！」なんですけど、なんといっても③が問題。

記事が増えるとその分APIを呼ぶ回数が比例して増えるで「これはまずい」と。（④はそんなにカテゴリーは増えないだろうから二の次）

なのでこの③のAPI叩きすぎ問題を解決することになったのですが、これが私をだいぶ疲れさせましたw

この課題を解決するために以下の方法を試しました。最後のもので解決できたのですが、かなり紆余曲折しましたね、、w

　①各記事用のページでの記事データの取得はAPI呼び出しではなくNuxtのstore機能を使うようにする

　②そうするためにstore機能を使うために/storeディレクトリにガイドラインに沿ってファイルを作成する

　③トップページ用のvueファイルのasyncDataメソッドの中でstoreにデータを格納する処理を実装する

　④各記事用のvueファイルの中でstoreからデータを持ってくる処理を実装する

　⑤「あれ？全然動かなくない？」となりasyncDataメソッドをfetchメソッドにしたりdata()やcomputed()にしたりして改善を試みる

　⑥「あれ？全然動かなくない？」となりcontextのデータの取り方を”＄”をつけたりつけなかったりthisをつけたりつけなかったり試行錯誤してみる

　⑦試行錯誤のうえ、上手くデータは取れるようにはなったものの、なぜかページの初回読み込み時は正常に表示されるが、リロードするとデータがクリアされるようになる

　⑧asyncDataやfetchメソッドはビルド時以外にも動作してしまうことをここで知る

　⑨storeの中身がビルド時以外は空になるので、ビルド時以外のasyncDataやfetchメソッド呼び出して真っ白になることにここで気づく

　⑩諦めかけたその時、payloadを使えば良さそうなことが運命的に見つかり無事実装できる

はい。やっとここでやりたかったAPI呼び出し回数を減らすことができましたw長すぎw

知っている人からすれば「この人、、頭に積んでるCPU弱すぎ」と思われるかも知れませんが、初めてNuxtを触ったのでご容赦を、、。

今回私を救ってくれたのがcontextの中に持っているpayloadというものでした。

payloadはAPIなどで取得したデータを保持し、動的ルーティングで生成したページで使用できるというものです！

そう。これこそ私が望んでいたことだったんです！もっと早くこの記事を見たかったw

URLや変数名こそ違えどほぼ上記の記事のまま実装し、無事完成できました。

公式の仕様ガイドって結構読み解くの難しいことが多いので敬遠しがちだったのですが、今回のは分かりやすくどストライクでした！感謝！

もし「NuxtのSSGモードでAPIの呼び出し回数を減らしたい」「一度取得したデータを動的生成したファイルで使用したい」という人には、

「payload使ってみな、飛ぶぞ！」って教えてあげたいですwこの記事がそんな悩める人に届きますように。

最後まで読んでくださりありがとうございました！