Sample code for vue server-side rendering cache application-JS Tutorial-php.cn

Sample code for vue server-side rendering cache application

不言

Release： 2018-09-12 15:23:21

Original

1369 people have browsed it

The content of this article is about the sample code of vue server-side rendering cache application. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Vue cache is divided into page cache, component cache, and interface cache. Here I mainly talk about page cache and interface cache.

Page cache:

Set in server.js

const LRU = require(&#39;lru-cache&#39;)

Copy after login

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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

Component cache:

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

Copy after login

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

Copy after login

Component to be cached

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

Copy after login

serverCacheKey The returned key should contain enough information to represent the specific situation of the rendering result. The above is a good implementation if the rendering result is determined only by props.item.id . However, if items with the same id may change over time, or if the rendering results depend on other props, the implementation of serverCacheKey will need to be modified to account for other variables. If serverCacheKey returns a constant, it will cause the component to always be cached, which is good for purely static components.

Related recommendations:

Vue Nuxt.js makes server-side rendering

How to use Vue Nuxt.js to implement services Side rendering

The above is the detailed content of Sample code for vue server-side rendering cache application. For more information, please follow other related articles on the PHP Chinese website!