首先，我们来对服务端渲染和客户端渲染两者之间做一个概述及简单的比较，再引出同构的优势

服务端渲染 (SSR)

同构就是在服务端，把⻚⾯所有的内容都初始化好后，将整个⻚⾯的 HTML 丢到浏览器，给浏览器渲染，浏览器渲染的是整个⻚⾯的内容，⻚⾯的任何操作都会引起⻚⾯的刷新，服务端重新⽣成⻚⾯然后 返回整个 html ⽂件到客户端

SSR 相比 SPA 有什么优缺点

优点：

• 更好的⾸屏性能，不需要提前先下载⼀堆 CSS 和 JS 后才看到⻚⾯；
• 更利于 SEO，单纯的页面的爬虫爬取。

缺点：

• 每次⻚⾯的改变都需要服务端把所有的代码都初始化⼀遍，然后⻚⾯刷新⼀下重新显示；
• 占用服务端资源
• 对于 vue 来说，支持的 api 有限，类似于 nuxt，只支持 beforeCreated 和 created 生命周期 （页面都被服务端渲染出来了，mounted 啥的肯定就不走咯~）

客户端渲染 (如 SPA)

服务端只返回必要的⻚⾯ html（只有⼀个框架和占位节点） 和 js 资源， js 在客户端解析、执⾏然后渲 染⽣成⻚⾯，同时 js 执⾏会完成⻚⾯事件的绑定。我们常使用的 vue、react 框架采用的就是客户端渲染的方式，通过接收路由的变更将其挂载的如 div#app 下的 dom 元素全部移除并替换成对应路由下应当渲染的 DOM 元素。

SPA 相比 SSR 有什么优缺点

优点：

• 前后端分离

同构

同构，⼀般是指服务端和客户端的同构，意思是服务端和客户端都可以运⾏的同⼀套代码程序，是 SSR 和 SPA ⽅式的⼀个整合。其大多出现在某个大型应用的首屏或是用户体量大关注度广的页面，从而节省首屏的白屏时间,提⾼代码复⽤率。

基于此，我们需要 node 作为中间层来进行转发，请求接口并生成同构所需的页面返回到前端，首先我们先用 cli 快速创建一个 vue 项目

vue create template

未完待续。。。