Vue SSR の Cookie に関連する問題を分析する

この記事は主に Vue SSR の Cookie の問題を紹介しています。内容が非常に優れているので、参考として共有します。

一度ウェブサイトに複数のユーザーが関与すると、Vue SSR の Cookie は本当に大きな問題であり、初期の Cookie 注入から現在に至るまで、私は 3 つの解決策を考え出しました。ステートに Cookie を注入し、グローバルに Cookie を注入し、コンポーネントの asyncData メソッドに Cookie を注入します。

Vue のアップグレードにより、最初の解決策は適用できなくなり、2 番目の解決策も利用可能になりました。多くの制限があるため、私は 3 番目のオプションを考えました。具体的な実装方法について話しましょう:

最初のオプション

最初のオプションは適用されなくなりました。ここでは詳細には触れません

2 つのオプション

アイデア: ssr のコンテキストに cookie を挿入し、API をリクエストするときにそれらを読み取り、axios のヘッダーに追加します

1、まず、server.js のコンテキストに cookie を追加します

const context = {
 title: 'M.M.F 小屋',
 description: 'M.M.F 小屋',
 url: req.url,
 cookies: req.cookies
}
renderer.renderToString(context, (err, html) => {
 if (err) {
  return errorHandler(err)
 }
 res.end(html)
})

その後、Vue は global.__VUE_SSR_CONTEXT__

2 にコンテキストを追加し、api.js で Cookie を読み取ります

import axios from 'axios'
import qs from 'qs'
import md5 from 'md5'
import config from './config-server'

const SSR = global.__VUE_SSR_CONTEXT__
const cookies = SSR.cookies || {}
const parseCookie = cookies => {
 let cookie = ''
 Object.keys(cookies).forEach(item => {
  cookie+= item + '=' + cookies[item] + '; '
 })
 return cookie
}

export default {
 async post(url, data) {
  const cookie = parseCookie(cookies)
  const res = await axios({
   method: 'post',
   url: config.api + url,
   data: qs.stringify(data),
   timeout: config.timeout,
   headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    cookie
   }
  })
  return res
 },
}

なぜこれができるのですか?

デフォルトでは、Vue レンダーごとに、バンドル レンダラー新しい V8 コンテキストを作成し、バンドル全体を再実行します。アプリケーション コードはサーバー プロセスから分離されているため、アクセスされる各ユーザー コンテキストは独立しており、相互に影響しません

ただし、Vue@2.3.0 以降、createBundleRenderer メソッドのオプションに runInNewContext オプションが追加されています。 runInNewContext : false、バンドル コードはサーバー プロセスと同じグローバル コンテキストで実行されるため、グローバルに Cookie を置くことはできなくなりました。これにより、すべてのユーザーが同じ Cookie を共有することになるからです。

それでは、引き続き runInNewContext を true に設定しましょう。もちろんそれは可能ですが、特にアプリケーションが大きい場合、コンテキストを再作成してバンドル全体を実行するのは依然としてかなりのコストがかかります
たとえば、以前は 5 つのルーティング コンポーネントのみがレンダリングされ、loadtest の RPS は約 50 でした。しかし、SSR にバックグラウンドで 12 のルーティング コンポーネントを追加した後、RPS は直接 1 桁に下がりました...

それで今は3 番目の解決策が表示されます

3 番目の解決策

アイデア: コンポーネントの asyncData メソッドに Cookie をパラメータとして挿入し、パラメータを渡すことで Cookie を API に渡す このメソッドは非常に優れていると言わざるを得ません。面倒ですが、これが私が考えるより良い方法です
ステップ 1:

server.js で、コンテキストに Cookie を挿入します

const context = {
 title: 'M.M.F 小屋',
 url: req.url,
 cookies: req.cookies,
}
renderer.renderToString(context, (err, html) => {
 if (err) {
  return handleError(err)
 }
 res.end(html)
})

ステップ 2:

entry-server.js で、Cookie を渡しますasyncData メソッドのパラメータとして

Promise.all(matchedComponents.map(({asyncData}) => asyncData && asyncData({
 store,
 route: router.currentRoute,
 cookies: context.cookies,
 isServer: true,
 isClient: false
}))).then(() => {
 context.state = store.state
 context.isProd = process.env.NODE_ENV === 'production'
 resolve(app)
}).catch(reject)

ステップ 3:

コンポーネントで、Cookie をパラメータとして Vuex アクションに渡します

export default {
 name: 'frontend-index',
 async asyncData({store, route, cookies}, config = { page: 1}) {
  config.cookies = cookies
  await store.dispatch('frontend/article/getArticleList', config)
 }
 // .....
}

ステップ 4:

Vuex では、Cookie がパラメータとしてapi

import api from '~api'

const state = () => ({
 lists: {
  data: [],
  hasNext: 0,
  page: 1,
  path: ''
 },
})

const actions = {
 async ['getArticleList']({commit, state}, config) {
  // vuex 作为临时缓存
  if (state.lists.data.length > 0 && config.path === state.lists.path && config.page === 1) {
   return
  }
  let cookies
  if (config.cookies) {
   cookies = config.cookies
   delete config.cookies
  }
  const { data: { data, code} } = await api.get('frontend/article/list', {...config, cache: true}, cookies)
  if (data && code === 200) {
   commit('receiveArticleList', {
    ...config,
    ...data,
   })
  }
 },
}

const mutations = {
 ['receiveArticleList'](state, {list, hasNext, hasPrev, page, path}) {
  if (page === 1) {
   list = [].concat(list)
  } else {
   list = state.lists.data.concat(list)
  }
  state.lists = {
   data: list, hasNext, hasPrev, page, path
  }
 },
}

const getters = {

}

export default {
 namespaced: true,
 state,
 actions,
 mutations,
 getters
}

ここで、状態は関数の戻り値で初期化する必要があることに注意してください。そうでないと、状態はすべてのユーザーによって共有されます

ステップ 5:

API で Cookie を受信し、それに追加しますAxios のヘッダー

import axios from 'axios'
import qs from 'qs'
import config from './config-server'

const parseCookie = cookies => {
 let cookie = ''
 Object.keys(cookies).forEach(item => {
  cookie+= item + '=' + cookies[item] + '; '
 })
 return cookie
}

export default {
 get(url, data, cookies = {}) {
  const cookie = parseCookie(cookies)
  return axios({
   method: 'get',
   url: config.api + url,
   data: qs.stringify(data),
   timeout: config.timeout,
   headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    cookie
   }
  })
 },
}

4 番目のスキーム

ステップ 1: Server.js 内で、コンテキスト内に Cookie を注入します

const context = {
  title: 'M.M.F 小屋',
  url: req.url,
  cookies: req.cookies,
}
renderer.renderToString(context, (err, html) => {
  if (err) {
    return handleError(err)
  }
  res.end(html)
})

ステップ 2:

:

エントリー中- server.js では、Cookie をパラメータとして api.setCookies メソッドに渡します。 api.setCookies とは何ですか。その後に

api.setCookies(context.cookies) // 这一句
Promise.all(matchedComponents.map(({asyncData}) => asyncData && asyncData({
 store,
 route: router.currentRoute,
 cookies: context.cookies,
 isServer: true,
 isClient: false
}))).then(() => {
 // ...
}

ステップ 3:

api.js

import axios from 'axios'
import qs from 'qs'
import config from './config-server'

const parseCookie = cookies => {
  let cookie = ''
  Object.keys(cookies).forEach(item => {
    cookie+= item + '=' + cookies[item] + '; '
  })
  return cookie
}

export default {
  api: null,
  cookies: {},
  setCookies(value) {
    value = value || {}
    this.cookies = value
    this.api = axios.create({
      baseURL: config.api,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        cookie: parseCookie(value)
      },
      timeout: config.timeout,
    })
  },
  post(url, data) {
    if (!this.api) this.setCookies()
    return this.api({
      method: 'post',
      url,
      data: qs.stringify(data),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      }
    }).then(res => {
      return res
    })
  },
  get(url, params) {
    if (!this.api) this.setCookies()
    return this.api({
      method: 'get',
      url,
      params,
    }).then(res => {
      return res
    })
  }
}

を書き換えます。 ステップ 4:

ステップ 4 はもうありません。API 呼び出しを直接導入するだけです

axios を再パッケージ化していない場合は、5 番目のステップを省略して、4 番目の部分で cookie を axios に直接与えることもできます

プラン 2 の具体例: https ://github.com/lincenying/mmf-blog-vue2-ssr

プラン 3 の具体例: https://github.com/lincenying/mmf-blog-vue2-pwa-ssr

オプション 4 の具体例: https://github.com/lincenying/mmf-blog-vue2-pwa-ssr

要約すると、プロジェクトが大きくない場合は、オプション 2 を使用するだけです。プロジェクトには多くのページがあり、大きいため、一部のページはすべてのユーザーに同じです。オプション 3 を検討することもできます。または、より良い方法がある場合は、ぜひ議論してください

Vue SSR には SEO が必要で、各ユーザーに表示されるコンテンツはキャッシュによって一貫性があり、非常に良い経験になります...

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

Vue2 SSRのAPIデータのキャッシュ方法について

Vue2.0プロジェクトのルーティングジャンプ方法の紹介

以上がVue SSR の Cookie に関連する問題を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。