前端之家收集整理的这篇文章主要介绍了
vue服务端渲染缓存应用详解，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
服务端渲染简介
服务端渲染不是一个新的技术；在 Web 最初的时候，页面就是通过服务端渲染来返回的，用 PHP 来说，通常是使用 Smarty 等模板写模板文件，然后 PHP 服务端框架将数据和模板渲染为页面返回，这样的服务端渲染有个缺点就是一旦要查看新的页面，就需要请求服务端，刷新页面。
但如今的前端，为了追求一些体验上的优化，通常整个渲染在浏览器端使用 JS 来完成，配合 history.pushState 等方式来做单页应用（SPA: Single-Page Application），也收到不错的效果，但是这样还是有一些缺点：第一次加载过慢，用户需要等待较长时间来等待浏览器端渲染完成；对搜索引擎爬虫等不友好。这时候就出现了类似于 React，Vue 2.0 等前端框架来做服务端渲染。
本文重点给大家介绍vue服务端渲染缓存应用，先看下vue缓存分为哪几种吧。
vue缓存分为页面缓存、组建缓存、接口缓存，这里我主要说到了页面缓存和组建缓存
页面缓存：
在server.js中设置
{
//判断是否需要
页面缓存
if (req.url && req.url === '/') {
return req.url
} else {
return false
}
}
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) // 设置当前缓存
页面的
内容
})
})@H_
301_17@
组建缓存：
在server.js中设置如下：
{
renderer = createRenderer(bundle,template)
})
}@H_
301_17@
要缓存的组建
serverCacheKey 返回的 key 应该包含足够的信息，来表示渲染结果的具体情况。如果渲染结果仅由 props.item.id 决定，则上述是一个很好的实现。但是，如果具有相同 id 的 item 可能会随时间而变化，或者如果渲染结果依赖于其他 prop，则需要修改 serverCacheKey 的实现，以考虑其他变量。如果 serverCacheKey返回常量将导致组件始终被缓存，这对纯静态组件是有好处的。
总结
以上所述是小编给大家介绍的vue服务端渲染缓存应用详解 。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/30261.html
