NuxtServer Initと[nuxt]fetch、asyncDataを組み合わせて使用

fetch vs asyncData

fetchとasyncDataは同じSSRデータfetch hookですが、それらの使用状況や呼び出し時間も異なります.そしてこの内容についての情報は、ご確認ください!( 👉🏻 [Nuxt]asyncDataとfetchの違い )
簡単に言えば、両者の違いは:

asyncData

page-level componentのみ使用可能

このオプションは使用できませんが、コンテキストオブジェクトは使用できます.

returnでは、ローカルデータに追加できます.

fetch

コンポーネントとページの両方が使用可能

thisは使用可能です.

returnはローカルデータに追加できません.(fetch結果をローカルデータに変異させる必要がある)

nuxtServerInit

NuxtLifecycle hooksの呼び出し順序を見ると、asyncDataとfetchの前に呼び出されたhookがいくつかありますが、今日はその中の1つのNuxtServer Initを見て、その使い方を紹介します.

nuxtServer Initとは?

If the action nuxtServerInit is defined in the store and the mode is universal, Nuxt will call it with the context (only from the server-side). It's useful when we have some data on the server we want to give directly to the client-side.
NuxtServerInitは動作で定義され、Nuxt Universalモードでは、Nuxtはコンテキストオブジェクトとともにサーバ側からNuxtServerInit hookを呼び出す.
この機能は、クライアント側にすぐに転送する必要があるサーバ上のデータがある場合に便利です.nuxtServerInitでは、クライアントが画面を描画する前に、サーバ側が処理する必要がある論理を定義できます.

nuxtServer Initの使用方法

この操作を実行するにはstoreのルートにnuxtServer Initを定義する必要があります.store/index.jsまたはstore/actions.jsで定義してください!

nuxtServerInit(vuexContext, context) {
   const { commit, state } = vuexContext
   
   const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context
   
  // Server-side
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }
},

nuxtServerInitの最初のパラメータは通常のvuex操作と同じで、vuexContextは2番目のパラメータとしてnuxtのコンテキストオブジェクトに入ります.
2番目のパラメータのコンテキストオブジェクトは、asyncData、plugins、middlewareのパラメータcontextと同じです.
nuxtServerInitはasyncDataと同じコンテキストオブジェクトを使用できますが、asyncDataはページコンポーネントからのみ呼び出されるため、コンテキストを使用する論理をすべてのページに挿入する場合は、asyncDataをすべてのページコンポーネントに挿入する必要があります.
すべてのページにコンテキストを使用する同じ論理を追加する場合はnuxtServer Initを使用します.

使用例

NuxtServer Initを使用する必要がある場合は、次のようになります.

すべてのページをレンダリングするときに呼び出さなければならないAPIがある

layoutコンポーネントは、fetch hookを使用して対応するapiを呼び出す.(asyncDataはページコンポーネントにのみ適用されるため)

このAPIは、ドメインに従って他のデータ

を伝達するためにHeaderのreferを参照することによって実現される.

server-side呼び出しapiにはreferは含まれていないので、呼び出す前にsetHeaderロジック

を追加する必要があります.
fetch hookを呼び出す前に、setHeaderに提供される論理をnuxtServer Initを使用する場所に追加する必要があります.store/actions.js

export default {
  nuxtServerInit (_, { req, app, env }) {
    if (process.server) {
      const isLocalhost = req.headers.host.includes('localhost')
      const referer = isLocalhost
        ? env.TEST_BRAND_URL
        : 'https://' + req.headers.host
      app.$axios.setHeader('referer', referer)
    }
  },
}

localhost実行時としてenvに適用されるTEST BRAND URL(req)を使用します.headers.hostはreferとしてaxiosヘッダファイルに注入される.
\9660;▼▼▼▼▼▼▼▼▼▼▼▼▼▼\96⚠️

参考資料📕

https://nuxtjs.org/docs/internals-glossary/context

https://nuxtjs.org/docs/directory-structure/store#the-nuxtserverinit-action