技术标签： node.js JavaScript 前端 NodeJS javascript
众所周知，当用户输入url到浏览器展示页面会经历以下流程：
浏览器找服务器拿静态页面（HTML）
浏览器找服务器（也可以是CDN）拿CSS
浏览器找服务器（也可以是CDN）拿JS
执行JS，请求数据就是在这一步
拿请求到的数据渲染页面。
显而易见，页面最终渲染出来之前需要经过多次请求，且直到拿到数据页面才能最终渲染完成。
此外，如果采用了vue/react等mvvm框架，由于使用了virtual dom的缘故，html是靠js生成的，于是在获取到所有js并加载完成之前，页面都无法展示，这也就造成了单页面应用的首页白屏问题。
mvvm框架使用js生成页面这一步是如此耗时，那我们是不是可以把这一步从浏览器挪到客户端来做呢？
我们把这种做法称之为服务端渲染/预渲染；是服务端渲染还是预渲染取决于渲染发生在请求数据前还是请求数据后。
用户请求前的服务器渲染即为「预渲染」。
用户请求后的服务器渲染即为「服务端渲染」。
知道了服务端渲染与预渲染的区别，那么我们该什么时候使用服务端渲染，什么时候使用预渲染呢？
当我们需要构建一个静态页面，这个页面并不需要与服务端进行数据交互，不需要进行请求时，我们就可以采用预渲染，让服务端将页面渲染（js生成html）的工作完成，就能直接对浏览器输出html。
因为浏览器是直接拿到html而不是像mvvm框架那样等待js生成html，因此浏览器不需要等待js加载完成就可以展现页面，而且由于预渲染可以让服务端直接输出渲染好的html，它还能解决单页面应用的SEO问题。
首先npm init出一个目录，我这边直接npm init ssr来创建一个名为ssr的项目。
然后npm install这些东西：
现在我们需要使用express来创建一个node服务，在ssr目录下创建index.js，并写出这些代码：
const express = require("express");
const app = express();
app.get('*',(request,respones) => {
respones.end("ok");
})
app.listen(3000,() => {
console.log("好耶！")
});
再改一下package.json，方便我们把服务跑起来
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
}
现在可以在命令行执行npm start，然后浏览器访问localhost:3000，看到“ok”就说明服务跑起来了。
我们的目标是把vue给渲染成html输出出去，这就是我们引入vue-server-renderer的原因，执行vue-server-renderer的createRenderer方法，就能创建一个渲染实例，它能将vue实例给转换成html的形式，然后就可以被服务端输出出去。
那我们现在需要的就是一个vue实例了，我们可以new出一个vue实例，然后将其作为参数放到渲染实例的renderToString方法中，renderToString方法就是我们将vue转换成html的秘密所在。
我们把index.js改成这样：
文章浏览阅读1.7k次，点赞5次，收藏9次。结合数据手册，分析寄存器_ad7192 id寄存器
文章浏览阅读3.2k次，点赞4次，收藏9次。1、参考Instruction scheduling in LLVM - 知乎，在中后端均存在指令调度指令调度模型2、在llvm12->llvm14 中Machine Instruction Scheduler有个patch增强了load/store指令的合并，也就是指令调度不仅仅只是改变指令的顺序，该优化类似gcc中的store-merge优化....................................................................._llvm编译器指令
文章浏览阅读4.1k次。大家好，我是北妈0.从我3月初决定开启朋友圈每天碎碎念以来，每天坚定不移的至少发一条，一段每天感悟和金句。作为总结，也把它当成一个日记给自己和好友，甚至是未来的孩子去回顾，如果有可能随着时...
文章浏览阅读218次。import random# 电脑出拳 电脑产生一个1-3的随机数computer = random.randint(1, 3) # 数字# print(computer)# print(computer)# 我们出拳our = int(input("请出拳（1石头 2 布 3剪刀）：")) # 字符串# print(our)# 判断谁输谁赢 orif computer ..._机器学习 划拳游戏
文章浏览阅读4.9k次。一直以来，编程语言都是程序员非常关注的话题。年末将至，是否会有程序员发出疑问——“2022 年行业需求最大的编程语言，花落谁家?”从 2021 年 10 月到 2022 年 11 月，DevJobsScanner 分析了超过 1200 万个开发人员职位。从这 1200 万份工作中，DevJobsScanner 挑选了明确需要编程语言的工作岗位。现在，一起回顾 2022 年行业需求最大的 8 种编程语言。_2022年编程语言排行榜
文章浏览阅读696次。错误：未能找到引用的组件“System.Windows.Forms.DataVisualization”原因：代码中是MSChart表格插件未在当前系统中安装。解决：下载对应版本的MSChart.exe安装程序，安装后再次在项目中添加引用即可。相关：......_system.windows.forms.datavisualization netframework 3.5.1
文章浏览阅读2.7k次，点赞2次，收藏11次。昨天琢磨着 跑一下ECO，苦于这个电脑没有GPU，只能跑CPU版的了，就是run_demo_ECO，配置过程其实不难，主要是把要准备的包都准备好，然后mex -setup对，接下来就顺利了，下面介绍流程：Win7+VS2013+Matlab2016a+Matconvnet-1.0-beta23 直接参考下面这个博客，简单粗暴的教程，步骤简洁详细，没有冗余： http..._eco跟踪算法
文章浏览阅读1.3k次，点赞21次，收藏18次。tensorflow 2 mac os 系统安装 步骤_mac装tensorflow
文章浏览阅读5.8k次，点赞4次，收藏21次。ES 安装教程注意：除了最后启动ES的时候在es账户下执行，其他都是在root 下执行的。⼀、前期准备java 11 的安装，请大家自行安装。elasticsearch启动不能以root⽤户运⾏，所以创建es⽤户（root⽤户状态下操作）useradd espasswd es然后输入两次：zong2015如果需要删除用户userdel -r es将elasticsearch⽤户添加到sudoersvim /etc/sudoers..._安装elasticsearch
文章浏览阅读2.1k次。起因：短信发送的应用场景非常多，在较大的系统中，短信一般作为单独的服务独立运行，而短信发送任务的触发基本有两种方式。1、定时获取Redis中短信发送任务，2、消息中间件订阅短息任务队列。RabbitMQ订阅短信：短信服务：短信服务为独立工程。将阿里云 SmsServer抽取为工具类。1、pom依赖： <!--RabbitMQ-->&..._basevo依赖
文章浏览阅读2.4k次，点赞3次，收藏3次。uiautomatoruiautomatorviewer拉取手机竖屏却显示为横屏的问题拉取的页面显示解决方法将保存下来的图片进行旋转，旋转为竖屏显示并保存点击open，导入图片和uix格式文件显示正常uiautomatorviewer拉取手机竖屏却显示为横屏的问题拉取的页面显示解决方法点击save将保存下来的图片进行旋转，旋转为竖屏显示并保存点击open，导入图片和uix格式文..._uiautomatorviewer方向倒了
文章浏览阅读1.3w次，点赞7次，收藏32次。参考文章：信息加密技术简介 [浅谈加密技术]（https://blog.csdn.net/fanyunda1988/article/details/50897216）加解密简介加解密分类常见的加密技术介绍其余问题，有关于AES 和 RSA 加密技术，对称加密，非对称加密。优点和缺点，以及API会用， 加密的原理。涉及到位运算。让你走一个算法的话你会怎么走？ HTTP 和 H..._加密技术