vue SSR

最新推荐文章于 2023-08-13 17:28:09 发布

niuyueyang

最新推荐文章于 2023-08-13 17:28:09 发布

阅读量212

点赞数

分类专栏： vue ssr 文章标签： ssr

本文链接：https://blog.csdn.net/qq_33332184/article/details/93038091

版权

vue 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

ssr

1 篇文章 0 订阅

订阅专栏

定义

服务端渲染，指的是把vue组件在服务器端渲染为组装好的HTML字符串，然后将它们直接发送到浏览器，最后需要将这些静态标记"激活"为客户端上完全可交互的应用程序。

优点

更好的SEO，搜索引擎爬虫可以抓取渲染好的页面
更快的内容到达时间（首屏加载更快），因为服务端只需要返回渲染好的HTML，这部分代码量很小的，所以用户体验更好。

缺点

首先就是开发成本比较高，比如某些声明周期钩子函数（如beforeCreate、created）能同时运行在服务端和客户端，因此第三方库要做特殊处理，才能在服务器渲染应用程序中运行。
由于服务端渲染要用Nodejs做中间层，所以部署项目时，需要处于Node.js server运行环境。在高流量环境下，还要做好服务器负载和缓存策略

解释

基本用法

var vue=require('vue');
const app=new vue({
	template:'<div>app</div>'
})
const render=require('vue-server-renderer').createRenderer();
render.renderToString(app).then(html=>{
	console.log(html)
}).catch(err=>{
	console.log(err)
})

服务端集成

var Vue=require('vue');
var server=require('express')();
var renderer=require('vue-server-renderer').createRenderer();
server.get('*',(req,res)=>{
	const app=new Vue({
		data:{
			url:req.url
		},
		template:'<div>您访问的{{url}}</div>'
	})
	renderer.renderToString(app).then((html)=>{
		
		res.end(`
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="UTF-8">
					<title></title>
				</head>
				<body>
					${html}
				</body>
			</html>

		`)
	}).catch(err=>{
		if(err){
			res.status(500).end('server error');
			return;
		}
	})
})
server.listen(3000)

引入html文件
server.js

var Vue=require('vue');
var app=new Vue({
	template:'<div>hello world</div>'
})
var render=require('vue-server-renderer').createRenderer({
	template:require('fs').readFileSync('./index.template.html','utf-8')
})
var context={
	title:'hello',
	meta:`
		<meta charset="UTF-8">
	`,
	css:`
		<link rel="stylesheet" href="css/swiper.min.css" />
	`,
	javascripts:`
		<script type="text/javascript" src="js/ast.js" ></script>
	`
}
render.renderToString(app,context).then(html=>{
	console.log(html)
}).catch(err=>{
	console.log(err)
})

index.template.html

<!DOCTYPE html>
<html>
	<head>
		{{{meta}}}
		<title>{{title}}</title>
		{{{css}}}
	</head>
	<body>
		<!--vue-ssr-outlet-->
	</body>
	{{{javascripts}}}
</html>

原理解析

https://github.com/niuyueyang/vueSSR

niuyueyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue SSR

解释基本用法var vue=require('vue');const app=new vue({ template:'<div>app</div>'})const render=require('vue-server-renderer').createRenderer();render.renderToString(app).then(html=>{...
复制链接

扫一扫

专栏目录