webpack html 模板插值,vue-ssr问题
image.png
vue ssr的问题总结
vue与vue-server-renderer的版本必须一致,否则会报错:
2.模板中必须要加入
该注释是vue-ssr的默认内容注入入口,相关源码如下:
image.png
默认是使用该注释作为注入入口,如果没有添加该注释,就会报错 'Content placeholder not found in template'
而且做了兼容,如果没有找到标签,就会找到
标签,如果还是没找到,就会用 所在位置
3.生命周期
由于没有动态更新,所有的生命周期钩子函数中,只有 beforeCreate 和 created 会在服务器端渲染(SSR)过程中被调用。这就是说任何其他生命周期钩子函数中的代码(例如 beforeMount 或 mounted),只会在客户端执行。
此外还需要注意的是,你应该避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码,例如在其中使用 setInterval 设置 timer。在纯客户端(client-side only)的代码中,我们可以设置一个 timer,然后在 beforeDestroy或 destroyed 生命周期时将其销毁。但是,由于在 SSR 期间并不会调用销毁钩子函数,所以 timer 将永远保留下来。为了避免这种情况,请将副作用代码移动到 beforeMount 或 mounted 生命周期中。
4.模板插值
模板还支持简单插值。给定如下模板:
{{ title }}
{{{ meta }}}
我们可以通过传入一个"渲染上下文对象",作为 renderToString 函数的第二个参数,来提供插值数据:
const context = {
title: 'hello',
meta: `
`
}
renderer.renderToString(app, context, (err, html) => {
// page title will be "Hello"
// with meta tags injected
})
5.不可使用全局环境变量
因为代码会运行在node环境中,所以注意不要使用window或者document等依赖浏览器环境的环境变量
6.避免状态单例
当编写纯客户端(client-only)代码时,我们习惯于每次在新的上下文>中对代码进行取值。但是,Node.js 服务器是一个长期运行的进程。>当我们的代码进入该进程时,它将进行一次取值并留存在内存中。这
意味着如果创建一个单例对象,它将在每个传入的请求之间共享。
如果我们在多个请求之间使用一个共享的实例,很容易导致交叉请求状态污染(cross-request state pollution)。
因此,我们不应该直接创建一个应用程序实例,而是应该暴露一个可以重复执行的工厂函数,为每个请求创建新的应用程序实例:
// app.js
const Vue = require('vue')
module.exports = function createApp (context) {
return new Vue({
data: {
url: context.url
},
template: `
`
})
}
并且我们的服务器代码现在变为:
// server.js
const createApp = require('./app')
server.get('*', (req, res) => {
const context = { url: req.url }
const app = createApp(context)
renderer.renderToString(app, (err, html) => {
// 处理错误……
res.end(html)
})
})
同样的规则也适用于 router、store 和 event bus 实例。你不应该直接从模块导出并将其导入到应用程序中,而是需要在 createApp 中创建一个新的实例,并从根 Vue 实例注入。
7.renderToString的注意点
如果在renderer创建的时候就传入了template,如下:
var renderer = serverRender.createRenderer({
template: require('fs').readFileSync(path.resolve(__dirname, '../index.ssr.html'), 'utf-8')
})
8.异步加载组件
在 Vue 2.5 以下的版本中,服务端渲染时异步组件只能用在路由组件上。然而在 2.5+ 的版本中,得益于核心算法的升级,异步组件现在可以在应用中的任何地方使用。
需要注意的是,你任然需要在挂载 app 之前调用 router.onReady,因为路由器必须要提前解析路由配置中的异步组件,才能正确地调用组件中可能存在的路由钩子。
9.状态处理
获取的数据需要位于视图组件之外,即放置在专门的数据预取存储容器(data store)或"状态容器(state container))"中。首先,在服务器端,我们可以在渲染之前预取数据,并将数据填充到 store 中。此外,我们将在 HTML 中序列化(serialize)和内联预置(inline)状态。这样,在挂载(mount)到客户端应用程序之前,可以直接从 store 获取到内联预置(inline)状态。
10.ssr的热加载
vue-server-renderer 提供一个名为 createBundleRenderer 的 API,用于处理此问题,通过使用 webpack 的自定义插件,server bundle 将生成为可传递到 bundle renderer 的特殊 JSON 文件。所创建的 bundle renderer,用法和普通 renderer 相同,但是 bundle renderer 提供以下优点:
内置的 source map 支持(在 webpack 配置中使用 devtool: 'source-map')
在开发环境甚至部署过程中热重载(通过读取更新后的 bundle,然后重新创建 renderer 实例)
关键 CSS(critical CSS) 注入(在使用 *.vue 文件时):自动内联在渲染过程中用到的组件所需的CSS。更多细节请查看 CSS 章节。
使用 clientManifest 进行资源注入:自动推断出最佳的预加载(preload)和预取(prefetch)指令,以及初始渲染所需的代码分割 chunk。
11.Webpack中打包的注意点:
有些属性需要指定: 如target为node,libraryTarget为commonjs2等
在源码中对应,(因为在源码中会检查这些项目)
image.png
webpack html 模板插值,vue-ssr问题相关推荐
- vue模板插值失效问题
用vue的模板插值,出现修改data值页面不变的问题 <button @click="click">{{btnText}}</button>... data ...
- VUE利用webpack创建项目失败--离线安装webpack下载模板
@TOC无法翻墙的–离线安装webpack下载模板 最近在学习vue过程中利用webpack生成模板创建项目的时候发现一直卡在下载模板这一步,如图所示 , 查资料发现自己网无法连接git官网导致下载失 ...
- vue SSR 部署详解
先用vue cli初始化一个项目吧. 输入命令行开始创建项目: vue create my-vue-ssr 记得不要选PWA,不知为何加了这个玩意儿就报错. 后续选router模式记得选 histor ...
- 关于Vue ssr的一点探讨
这很难,里面只是我以比较明显的一个问题,引发对整个ssr的研究.但是我又复习了下Vuex,发现了异步问题.过两天把router也复习了.那异步问题应该就解决了,到时候再出篇稿子.这篇,你可能看不懂,因 ...
- 【服务端渲染】之 Vue SSR
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:内容较多,建议通过左侧导航栏进行阅读 Vue SSR 基本介绍 Vue SSR 是什么 官方文档:https://ssr.vuejs.org/ V ...
- 一个极简版本的 VUE SSR demo
我本人在刚开始看 VUE SSR 官方文档的时候遇到很多问题,它一开始是建立在你有一个可运行的构建环境的,所以它直接讲代码的实现,但是对于刚接触的开发者来说并没有一个运行环境,所以所有的代码片段都无法 ...
- 服务器端渲染-Vue SSR搭建
阅读建议:建议通过左侧导航栏进行阅读 文章简介:本文是Vue.js服务器端渲染的另一种解决方案-SSR(Server-Side Rendering)学习笔记 Vue SSR是什么 官方文档解释:Vue ...
- Vue SSR 从入门到 Case Study
最近两个项目同时开发,使用了Vue2的SSR,这样后端渲染页面首屏可以加快页面呈现,增加SEO和用户体验,但是项目上线后却发现了严重的性能问题,于是在三天内两次重大调整,最后只能放弃Vue SSR,本 ...
- 自定义vue SSR
项目源码地址 : https://github.com/qifutian/learngit/tree/main/vue-ssr 搭建自己的SSR mkdir vue-ssr cd vue-ssr np ...
最新文章
- 六、CPU优化(6)DMV与计数器
- 数据库连接池技术,c3p0
- php怎么从文件中读取数据库连接,PHP连接 读取 写入mysql数据库的方法 附常用代码...
- gRPC学习记录(四)--官方Demo
- 负载均衡和CDN技术
- 文件操作(stat函数)
- java多态和泛型_Java面向对象(二) 接口、多态和泛型
- php网站服务器500,php服务器错误500
- 读取xml并转换为Java对象
- XMLDictionary 解析的使用
- 拓端tecdat|R语言用极大似然和梯度下降算法估计GARCH(p)过程
- 错误及原因推测:sysdeps/x86_64/multiarch/strstr-sse2-unaligned.S: 没有那个文件或目录
- AXURE中SVG矢量图标的使用方法,以及图标颜色的改变方法
- HTML5 webSQL动态查询应用截图
- 北京地铁线路规划程序
- Excel 地址 行列转换
- 【matlab】clc,close,close all,clear,clear all作用
- let , const , var , 的区别
- 模拟cmos集成电路(10)
- 施密特宣布离开谷歌董事会! Facebook却被联邦政府塞高管进来?
热门文章
- Synchro Arts 5折优惠即将结束
- linux系统pdf目录编辑器,使用Master PDF Editor在Ubuntu Linux上编辑PDF文件
- echarts地图列表_ECharts中国地图选择器
- 一个ZFS开发者眼中的苹果最新文件存储系统APFS
- 如何批量将条形码输出为PNG图片
- 计算机写给未来自己的一段话,给计算机老师一句话寄语
- 番外篇2.3 图像处理与深度学习 - 模式识别
- 5.8晚间黄金行情走势分析及短线交易策略
- 问题 1096: Minesweeper
- Inventor安装失败怎样卸载重新安装Inventor,解决Inventor安装失败的方法总结