手把手教你 Vue 服务端渲染
写在前面
在写这篇文章之前,我有写一篇 Vue 预渲染的教程 以及 在线示例,有需要的可以看一下~
【下面开始 Vue 服务端渲染】
服务端渲染 = SSR = Server-Side Rendering
Vue 服务器渲染 可以说是我们学习 Vue 技术的最后一个环节了;也是上手难度稍为高一点的一个环节。
目前还没有发现很好的学习资料或者教程,文档也不是特别明白,这也导致了很多人没能拿下 vue 的 ssr。
所以就想着写一个曲线平滑,循序渐进,明了易懂的 教程 来帮助大家找到 Vue SSR 的感觉。
导读
由于内容较多,如果只写一篇文章就想把 Vue SSR 介绍清晰透彻的话,我觉得不太现实;所以就想着把一个完整的 Vue SSR 项目细分开来,每一个小节讲解一个知识点,这样效果应该会好一点吧。这个项目虽然不大,但已经包含了 Vue SSR 的所有内容。
项目仓库:github.com/Neveryu/vue…
1、这个教程 分为 7 个小节,每个小节都是一个独立的可以运行的小项目,这样可以减少大家出错的概率(如果只给出最终的代码,那万一又跑不起来,岂不凉凉,影响大家学习的心情);每个小节简单配备了 运行步骤 以及 简要说明 来帮助大家运行项目以及了解本节的知识点。
2、其次,每个小节都是在前一小节的基础上,继续补充写代码的,这样,大家对比就能知道,这一节具体增加了哪些代码,哪些内容;方便大家学习某一个小节的知识(如果笼统的一次性给出最终代码,这样在找代码之间逻辑关系时,比较吃力)
章节介绍
第一节:一个最简单的服务端渲染原型(10 行代码)【难度:★】
第二节:与服务器集成,使用 Express 作为服务器提供服务【难度:★】
第三节:使用一个页面模版【难度:★】
第四节:开发客户端与服务端入口文件,配置webpack【难度:★★★】
第五节:使用vue-router来做路由【难度:★★】
第六节:数据,vuex,状态容器【难度:★★★★★】
第七节:增加一些额外的功能,完善项目【难度:★★】
如何学习
- 1、建议你先看一遍 Vue SSR 的文档,看不懂的地方不要慌,留个印象也行
- 2、学习 这个课程 的时候,打开 Vue SSR 的文档;找到当前这一小节对应文档中的文字介绍部分
- 3、如果你基础有点薄弱的话,不要太过于着急
- 4、不能保证所有人看一遍就能学会,但是能保证所有人,两遍应该没问题
- 5、如果你能跟着动手敲的话,将会事半功倍
知识点
1、避免单例状态 在 app.js
中,暴露一个可以重复执行的工厂函数,为每个请求创建新的应用程序实例。
相关文档
2、配置webpack webpack
配置文件包含:基本配置(base config)、客户端配置(client config)、服务器配置(server config)。 基本配置包含两个环境(客户端环境,服务器环境)共享的配置;然后客户端配置和服务器配置都会通过使用 webpack-merge
来简单的扩展基本配置。
相关文档
教程中的
webpack
相关的配置已经配置好了,你可以直接全部拿过来用就行了
3、createBundleRenderer 我们在前三节使用的都是 vue-server-renderer
中的 createRenderer
方法;从第四节开始,我们使用的是 createBundleRenderer
,所创建的 bundle renderer
,用法和普通 renderer
相同。 createBundleRenderer
接收一个 server bundle
生成的特殊 JSON
文件。但是 bundle renderer
提供以下优点:
- 内置的
source map
支持(在webpack
配置中使用devtool: 'source-map'
) - 在开发环境甚至部署过程中热重载(通过读取更新后的
bundle
,然后重新创建renderer
实例) - 关键
CSS(critical CSS)
注入(在使用*.vue
文件时):自动内联在渲染过程中用到的组件所需的CSS
。更多细节请查看CSS
章节。 - 使用
clientManifest
进行资源注入:自动推断出最佳的预加载(preload
)和预取(prefetch
)指令,以及初始渲染所需的代码分割chunk
。
相关文档
Vue SSR 性能
从原理上来说,Vue SSR 肯定要比纯字符串模板渲染要慢,而从数据来看,也能证明这一点(通过压力测试,发现 Vue SSR 很快会出现时间瓶颈)。
查看 vue-server-renderer
源码发现 Vue SSR 是使用了 vm
做沙盒来运行 render
部分代码,起到隔离 server
环境的目的,而 vm
的 context
回收可能存在问题,存在一定的内存泄漏。
至于官方提到提高性能的方式有一种方式是组件缓存,我们增加组件的 servercachekey
之后发现内存回收更加频繁,可能是因为 lru-cache
本身就是内存缓存,占用内存。
交流
项目仓库:github.com/Neveryu/vue…
当然,如果你有任何建议或者疑问,欢迎通过各种方式与我联系~谢谢!
写在最后
我的主页: neveryu.github.io/index.html
QQ群:685486827
手把手教你 Vue 服务端渲染相关推荐
- Vue 服务端渲染 预渲染
文章目录 简介 那么 什么是服务端渲染 为什么使用服务端渲染 服务端渲染 or 预渲染 区别 如何使用预渲染 如何搭建一个预渲染开发环境 Tip 写在最后 简介 关于 Vue 的 SPA 说的已经太多 ...
- Vue 服务端渲染(SSR)、Nuxt.js - 从入门到实践
前言 10月初有幸接到公司官网改版需求,要求采用服务端渲染模式对原网站进行seo优化. 由于团队一直使用的vue技术栈,所以我第一时间想到的就是采用vue 服务端渲染(SSR)来实现该需求,即能减少团 ...
- egg html模板,egg+vue服务端渲染模板项目介绍
egg-vue-webpack-boilerplate 基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目,包括前台系统(SSR MPA)和后台管理系统( ...
- vue服务端渲染——基础
文章目录 vue服务端渲染(基础) Nuxt框架 文件目录结构 项目启动.打包 生命周期 SSR nuxtserverInit middleware 中间件 全局中间件 页面级中间件 validate ...
- java vue 服务端渲染_vue服务端渲染缓存应用详解
服务端渲染简介 服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲 ...
- Vue 服务端渲染原理 拆分成三步个步骤简单的实现一个案例
前言 可能我们平常接触比较多的是使用 vue + vue全家桶来搭建起一个单页(SPA)应用.用 服务端渲染 搭建项目比较少,本文是记录我在学习 服务端渲染 过程中的一些见解,如有出错或疏漏,麻烦帮忙 ...
- vue服务端渲染之nuxtjs
前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...
- vue服务端渲染 MySQL_vue服务端渲染简单入门实例
想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务 ...
- java vue 服务端渲染_vue ssr服务端渲染小白解惑
vue ssr服务端渲染小白解惑 >初学ssr入坑 初学vue服务端渲染疑惑非常多,我们大部分前端都是半路出家,上手都是前后端分离,对服务端并不了解,不说java.php语言了,连node服务都 ...
最新文章
- 安装 kubernetes-dashboard
- android 中XML和对象转换利器Xstream的使用
- 用类氢轨道计算交换积分和Li原子2S谱项能级
- 电视机原理图_电工电气,如何看电气原理图和接线图,如何设计图纸?
- [算法]浅谈求n范围以内的质数(素数)
- 记TensorFlow项目开源一周年
- 学会智能标注与海量复杂文本分类
- 西数linux驱动程序,下载:西数移动硬盘WD SES Driver驱动更新
- 数据库系统的结构(三级模式、两级映像)
- android 2个 微信,手机挂2个微信可以吗?安卓手机挂2个微信以上教程
- 那一年马云34岁,李彦宏30岁,马化腾27岁
- 王家林 大数据Spark超经典视频链接全集[转]
- 古代神话体系--古希腊、罗马、北欧和中国
- POI实现Excel文件加密
- katacontainers启动分析
- 利用python生成二维码 以及批量生成二维码
- 港科夜闻|全国政协副主席梁振英一行到访香港科技大学(广州)
- 程序员抛弃大厂涌进工厂!南洋理工海归:这里上班比整天盯着电脑有意思的多!...
- Hbase JavaAPi介绍和使用示例(待更新)
- K8S ingress nginx 如何设置访问白名单