Vue コンポーネントをキャッシュするには?

Vue の SSR は非常に高速ですが、コンポーネントインスタンスや仮想 DOM ノードの作成コストのため純粋な文字ベースのテンプレートのパフォーマンスにはかないません。 SSR のパフォーマンスが重大である場合、キャッシュを賢く活用することで応答時間が大幅に改善され、サーバーの負荷が軽減されます。

ボイラープレートを避けるために、Nuxt.js でコンポーネントキャッシュモデルを使用してください。このモジュールは、Vue コンポーネント向けに vue-server-renderer を使って LRU キャッシュのサポートを追加します。

使い方

  • Yarn または npm を使用してプロジェクトに @nuxtjs/component-cache の依存関係を追加してください
  • nuxt.config.jsmodules セクションに @nuxtjs/component-cache を追加してください
{
  modules: [
    // シンプルな使い方
    '@nuxtjs/component-cache',

    // オプション
    ['@nuxtjs/component-cache', {
      max: 10000,
      maxAge: 1000 * 60 * 60
    }],
  ]
}

より詳しい情報はコンポーネントレベルでのキャッシュを参照してください。

忘れないでください

  • キャッシュ可能なコンポーネントは ユニークな name オプションを定義する必要があります。
  • 以下のコンポーネントはキャッシュしないでください。
    • グローバルな状態に依存する子コンポーネントを持つ
    • レンダリングされる context に副作用をもたらす子コンポーネントを持つ

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する