iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >vue服务端渲染缓存的示例分析
  • 371
分享到

vue服务端渲染缓存的示例分析

2024-04-02 19:04:59 371人浏览 薄情痞子
摘要

这篇文章给大家分享的是有关Vue服务端渲染缓存的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。服务端渲染简介服务端渲染不是一个新的技术;在 WEB 最初的时候,页面就是通

这篇文章给大家分享的是有关Vue服务端渲染缓存的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

服务端渲染简介

服务端渲染不是一个新的技术;在 WEB 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 php 服务端框架将数据和模板渲染为页面返回,这样的服务端渲染有个缺点就是一旦要查看新的页面,就需要请求服务端,刷新页面。

但如今的前端,为了追求一些体验上的优化,通常整个渲染在浏览器端使用 js 来完成,配合 history.pushState 等方式来做单页应用(SPA: Single-Page Application),也收到不错的效果,但是这样还是有一些缺点:第一次加载过慢,用户需要等待较长时间来等待浏览器端渲染完成;对搜索引爬虫等不友好。这时候就出现了类似于 React,Vue 2.0 等前端框架来做服务端渲染。

vue缓存分为页面缓存、组建缓存、接口缓存,这里我主要说到了页面缓存和组建缓存

页面缓存:

  在server.js中设置

const LRU = require('lru-cache')
const microCache = LRU({
 max: 100, // 最大缓存的数目
 maxAge: 1000 // 重要提示:条目在 1 秒后过期。
})
const isCacheable = req => {
 //判断是否需要页面缓存
  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) // 设置当前缓存页面的内容
})
})

 组建缓存:

在server.js中设置如下:

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

 要缓存的组建

export default {
 name: 'Home',
 title() {
  return {
   title: 'vue-ssr',
   keywords: 'vue-ssr服务端脚手架, home',
   description: 'vue-ssr-template, vue-server-renderer, home'
  }
 },
 created() {
 },
 computed: {},
 asyncData({ store }) {},
 methods: {},
 serverCacheKey: props => props.id
}

 serverCacheKey 返回的 key 应该包含足够的信息,来表示渲染结果的具体情况。如果渲染结果仅由 props.item.id 决定,则上述是一个很好的实现。但是,如果具有相同 id 的 item 可能会随时间而变化,或者如果渲染结果依赖于其他 prop,则需要修改 serverCacheKey 的实现,以考虑其他变量。如果 serverCacheKey返回常量将导致组件始终被缓存,这对纯静态组件是有好处的。

感谢各位的阅读!关于“vue服务端渲染缓存的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: vue服务端渲染缓存的示例分析

本文链接: https://www.lsjlt.com/news/78950.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue服务端渲染缓存的示例分析
    这篇文章给大家分享的是有关vue服务端渲染缓存的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。服务端渲染简介服务端渲染不是一个新的技术;在 Web 最初的时候,页面就是通...
    99+
    2024-04-02
  • vue服务端渲染页面缓存和组件缓存的示例分析
    这篇文章将为大家详细讲解有关vue服务端渲染页面缓存和组件缓存的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。vue缓存分为页面缓存、组建缓存、接口缓存,这里我主...
    99+
    2024-04-02
  • vue服务端渲染SSR的示例分析
    小编给大家分享一下vue服务端渲染SSR的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!前言首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回...
    99+
    2024-04-02
  • Vue服务端渲染和Vue浏览器端渲染性能对比的示例分析
    Vue服务端渲染和Vue浏览器端渲染性能对比的示例分析,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。本人在做Vue项目的时候,一直苦于产品...
    99+
    2024-04-02
  • Vue渲染的示例分析
    小编给大家分享一下Vue渲染的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Vue 推荐在绝大多数情况下使用 templ...
    99+
    2024-04-02
  • React服务端渲染的示例分析
    这篇文章主要介绍了React服务端渲染的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、前言为什么需要服务端渲染?什么情况下进行服...
    99+
    2024-04-02
  • Vue组件中服务器端渲染的示例分析
    这篇文章主要为大家展示了“Vue组件中服务器端渲染的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue组件中服务器端渲染的示例分析”这篇文章吧。现在,...
    99+
    2024-04-02
  • Vue服务器渲染Nuxt的示例分析
    这篇文章主要介绍Vue服务器渲染Nuxt的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是SSR?SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文...
    99+
    2024-04-02
  • Nuxt中Vue.js服务端渲染的示例分析
    这篇文章主要为大家展示了“Nuxt中Vue.js服务端渲染的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Nuxt中Vue.js服务端渲染的示例分析”这...
    99+
    2024-04-02
  • Vue中条件渲染和列表渲染的示例分析
    这篇文章将为大家详细讲解有关Vue中条件渲染和列表渲染的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言什么是条件渲染?在我们的页面中会有很多这样的应用场景,比如说我们今天要上架一个活动,这个活...
    99+
    2023-06-25
  • vue的ssr服务端渲染示例详解
    为什么使用服务器端渲染 (SSR) 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 请注意,截至目前,Google 和 Bing 可以很好对同...
    99+
    2024-04-02
  • Vue 服务端渲染SSR示例详解
    目录手写Vue服务端渲染一.开始vue-ssr之旅二.采用模板渲染三.ssr目录创建四.通过webpack实现编译vue项目app.jsclient-entry.jsserver-e...
    99+
    2024-04-02
  • react服务器渲染的示例分析
    这篇文章给大家分享的是有关react服务器渲染的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言本文是基于react ssr的入门教程,在实际项目中使用还需要做更多的配...
    99+
    2024-04-02
  • Egg Vue SSR服务端渲染数据请求与asyncData的示例分析
    小编给大家分享一下Egg Vue SSR服务端渲染数据请求与asyncData的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!服务端渲染 Node 层直接获取数据在 Egg 项目如...
    99+
    2024-04-02
  • webpack配置之后端渲染的示例分析
    这篇文章主要介绍webpack配置之后端渲染的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图原理原理说起来还是很简单的:1、独立启动静态资源服务器打包生成资源列表(ma...
    99+
    2024-04-02
  • Vue列表页渲染优化的示例分析
    小编给大家分享一下Vue列表页渲染优化的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!想法初始化时,vue会对data做...
    99+
    2024-04-02
  • 浏览器渲染的示例分析
    这篇文章将为大家详细讲解有关浏览器渲染的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。浏览器渲染1.浏览器渲染图解浏览器渲染页面主要经历了下面的步骤:处理 HTML 标记并构建 DOM 树。处理 ...
    99+
    2023-06-15
  • Angular 服务器端渲染缓存功能问题
    关于通过 Angular Universal 渲染出的页面源代码,我们有两种缓存方式: HTTP cache 使用网络缓存时,一切都是为了在服务器上设置正确的响应标头。 它们指定缓存...
    99+
    2024-04-02
  • React中条件渲染的示例分析
    小编给大家分享一下React中条件渲染的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!前言在React中,你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分,这...
    99+
    2024-04-02
  • vue3中渲染系统的示例分析
    这篇文章给大家分享的是有关vue3中渲染系统的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。思考在开始今天的文章之前,大家可以想一下:vue文件是如何转换成DOM节点,并渲染到浏览器上的?数据更新时,整个...
    99+
    2023-06-22
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作