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)　　
　　　　   　　}　
      }

const errorHandler = err => {
  if (err && err.code === 404) {
    // 未找到页面
    res.status(404).sendfile('public/404.html');
  } else {
    // 页面渲染错误
    res.status(500).end('500 - Internal Server Error')
    console.error(`error during render : ${req.url}`)
    console.error(err)
  }
}

const context = {
  title: 'vue',
  keywords: 'vue-ssr服务端脚手架',
  description: 'vue-ssr-template, vue-server-renderer',
  version: v,
  url: req.url,
  cookies: req.cookies
}

renderer.renderToString(context, (err, html) => {
  if (err) {
    return errorHandler(err)
  }
  res.end(html)
  microCache.set(req.url, html)
})
})

어셈블리 캐시:

<em id="__mceDel">
</em>

function createRenderer(bundle, template) {
return require('vue-server-renderer').createBundleRenderer(bundle, {
template,
cache: LRU({
max: 1000,
maxAge: 1000 * 60 * 5 // 组建缓存时间
})
})
}

캐시됨

let renderer
if (isProd) {
  // 生产环境使用本地打包文件来渲染
  const bundle = require('./output/vue-ssr-bundle.json')
  const template = fs.readFileSync(resolve('./output/index.html'), 'utf-8')
  renderer = createRenderer(bundle, template)
} else {
  // 开发环境使用webpack热更新服务
  require('./build/dev-server')(app, (bundle, template) => {
    renderer = createRenderer(bundle, template)
  })
}

serverCacheKey를 빌드하여 반환된 키에는 렌더링 결과의 특정 상황을 나타내는 데 충분한 정보가 포함되어야 합니다. 위의 내용은 렌더링 결과가 props.item.id에 의해서만 결정되는 경우 좋은 구현입니다. 그러나 동일한 ID를 가진 항목이 시간이 지남에 따라 변경되거나 렌더링 결과가 다른 props에 따라 달라지는 경우 다른 변수를 고려하여 serverCacheKey 구현을 수정해야 합니다. serverCacheKey가 상수를 반환하면 구성 요소가 항상 캐시되므로 순수하게 정적 구성 요소에 적합합니다.

관련 권장 사항:

서버 측 렌더링을 위한 Vue+Nuxt.js

Vue+Nuxt.js를 사용하여 서버 측 렌더링을 구현하는 방법

위 내용은 Vue 서버 측 렌더링 캐시 애플리케이션의 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!