vue サーバー側レンダリング キャッシュ アプリケーションのサンプル コード

この記事の内容は、Vue サーバー側レンダリング キャッシュ アプリケーションのサンプル コードです。必要な方は参考にしていただければ幸いです。

Vueキャッシュはページキャッシュ、アセンブリキャッシュ、インターフェースキャッシュに分かれています

ページキャッシュ:

server.jsで設定

アセンブリキャッシュ:

const LRU = require('lru-cache')

const microCache = LRU({
  max: 100, // 最大缓存的数目
  maxAge: 1000 // 重要提示：条目在 1 秒后过期。
})
 
const isCacheable = req => {
  //判断是否需要页面缓存<br>　　if (req.url 
&& req.url === &#39;/&#39;) {<br> 　　 return req.url<br>　　} 
else {<br><em id="__mceDel"><em id="__mceDel"> 
　　return false<br></em></em><em 
id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em 
id="__mceDel"><em 
id="__mceDel">　　}<br></em></em></em></em></em><em
 id="__mceDel">}</em>

キャッシュ済み

app.get('*', (req, res) => {
const cacheable = isCacheable(req)
　　if (cacheable) {
　　　　const hit = microCache.get(req.url) 　　　　
　　　　if (hit) { 
　　　　   　　return res.end(hit)　　
　　　　   　　}　
      }

serverCacheKey の構築によって返されるキーには、レンダリング結果の特定の状況を表すのに十分な情報が含まれている必要があります。レンダリング結果が props.item.id によってのみ決定される場合、上記は適切な実装です。ただし、同じ ID を持つアイテムが時間の経過とともに変化する可能性がある場合、またはレンダリング結果が他のプロパティに依存する場合は、他の変数を考慮して serverCacheKey の実装を変更する必要があります。 serverCacheKey が定数を返す場合、コンポーネントは常にキャッシュされるため、純粋に静的なコンポーネントに適しています。

関連する推奨事項:

サーバーサイドレンダリングのための Vue+Nuxt.js

Vue+Nuxt.js を使用してサーバーサイドレンダリングを実現する方法

以上がvue サーバー側レンダリング キャッシュ アプリケーションのサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。