SSR概念
SSR即通过服务端渲染生成后输出给客户端。在SPA之前我们的WEB架构大都是SSR，如WordPress、DEDECMS、Discuz等，都是通过服务端取出数据和模板组合生成html输出给前端，且路由是在服务端控制的。
为什么要使用SSR
首屏优化 非SPA页面后台渲染好了直接返回HTML给浏览器，浏览器直接展示页面。而SPA页面后台给浏览器返回一堆js，前台再执行js去渲染页面，就导致打开很慢。
有助于seo 搜索引擎会通过蜘蛛发http get请求的方式去访问你的网页，并根据网站的内容来建立索引。蜘蛛是不会用js来渲染页面然后再爬里面的内容的，它们通常就是爬一个html文件。因此SPA页面就凉凉了。
SSR的实现原理和缺陷
使用SSR渲染是为了解决单页面应用SEO能力不足的问题。所有的操作仍然是单页面控制，所谓的服务端渲染只是在平时返回的单页面应用的html上增加了对应路由的页面信息，好让爬虫获取到而已。
所以SSR项目需要服务端渲染和客户端渲染，服务端渲染就是根据vue实例获取对应路由的SEO信息并添加到单页面应用的HTML上，客户端渲染就是平时我们所熟悉的单页面应用。
vue-server-renderer
将Vue实例渲染成html
构建服务器端渲染我们需要借助vue-server-renderer，为了了解它的作用，我们先看一段代码(先安装vue和vue-server-renderer，yarn add vue vue-server-renderer,vue-server-renderer和vue必须匹配版本)：
const Vue = require('vue')
const app = new Vue({
template: `<div>hello world</div>`
})
const renderer = require('vue-server-renderer').createRenderer()
renderer.renderToString(app,(err, html)=>{
if(err) throw err
console.log(html)
})
执行node server.js可以看到打印<div>Hello World</div>，从这段代码可以明白vue-server-renderer的作用是拿到Vue实例并渲染成html
将html代码渲染到页面上
为了将代码渲染到页面上，我们需要构建一个服务(官方使用的是express，也可以使用koa)，接下来我们对上面的server.js进行改造(安装express，yarn add express)。
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*',(req, res)=>{
const app = new Vue({
template: `<div>hello world</div>`
})
renderer.renderToString(app,(err, html)=>{
if(err){
res.status(500).end('Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)
执行node server.js并在浏览器上打开localhost:8080，页面上显示hello world说明服务已经启动。
1、使用页面模板
创建一个页面模板index.template.html，内容如下，<!--vue-ssr-outlet-->这里将是应用程序 HTML 标记注入的地方
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
2、模板插值
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
const renderer = createRenderer({
template: require('fs').readFileSync('./index.template.html', 'utf-8')
})使用 JavaScript 实现分屏视觉效果
今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛，比如 Corsair website。
CSS3的过渡效果，使用transition实现鼠标移入/移出效果
在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。
js如何实现新手引导效果？
js最近有个小伙伴问到了怎么实现新手引导的效果，然后便去网上找了下实现方案。可以通过css的border来实现。
css3 斜切角/斜边的实现方式
设计图含有斜切角的效果时，我们一般想到的方法是切出四个角为背景，然后用border连起来，这样就能显示出该效果了，那么直接使用css呢？下面就整理css做斜边的效果。
JavaScript 实现打字机效果,跑马灯效果
这篇文章在不使用任何插件的情况，以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。
CSS遮罩效果(模糊效果，阴影效果，毛玻璃效果)
一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样，唯一不同的是设置.mask遮罩的背景色用rgba()表示，当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现
纯css实现气泡效果
主要运用的是1.border 组成的直角三角形。2，before 和 after 伪元素 。3，z-index属性;将元素的长宽设置为0，并且将border的3条边设置为透明的，就会出现border颜色的直角三角形
css文字选中效果
文字选中效果，这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的，不过可以通过CSS进行设置。::selection定义元素上的伪选择器，以便在选定元素时设置其中文本的样式。
text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩
发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this：看着挺酷炫的还不错 就看了下实现方式。还挺简单的。
Vue 中多个元素、组件的过渡，及列表过渡
多元素之间如何实现过渡动画效果呢？这么写行不行呢？肯定是不行的，因为 Vue 在两个元素进行切换的时候，会尽量复用dom，就是因为这个原因，导致现在动画效果不会出现。如果不让 Vue 复用dom的话，应该怎么做呢？只需要给这两个div不同的key值就行了
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!