SSR 前后端同构

SSR，Server-Side Rendering 服务器端渲染页面的技术
页面的 HTML 是在服务器端生成的，然后这个已渲染的页面被发送到客户端。
客户端接收到这个页面后，不需要再进行额外的 HTML 构建，只需处理 JavaScript 绑定的事件和操作即可。

SSR 领域做到最好，聚焦，极致

同构的原理和意义，学习新的概念、新值模型和编程思想。
SSR中使用路由
SSR中使用redux
SEO优化，预渲染 prerender
脱水
注水
前端接管 SSR 渲染的 html 页面
服务端获取数据

Koa2+Next.js服务端渲染实战
ReactDomServer.renderToString()
VueServerRender.renderToString()
const ReactDOMServer = require(‘react-dom/server’)const reactString = ReactDOMServer.renderToString()

前后端同构

react + vue同构的最大问题：数据渲染成 html
react服务端渲染，需要渲染 jsx，把 jsx渲染成 静态的 html字符串，然后返回给前端
这个渲染过程消耗的性能，比用模板渲染性能要差

前后端同构的关键

不是你用了什么框架，而是要处理

• 环境：前端环境？还是服务端环境？
  • 环境的分离
• 数据

职责分离的模式同构开发

• 那些代码是用来处理数据的
• 那些代码是用来处理前端环境&服务端环境
  • 前端对 url的操作
  • 后端对文件的写入

SSR 场景

1. 官网项目，例如 CMS，内容管理系统
2. 博客系统
3. 公司内部工具平台
4. 业务量非常稳定的轻量业务，比如
   1. 心理职业测试
   2. 在线工具
   3. 文档查询等

Node.js 框架，可以在 TypeScript 和 JavaScript (ES6、ES7、ES8)之上构 建高效、可伸缩的企业级服务器端应用程序。
Nest 是 Node.js 版的 Spring 框架
TypeScript 编写并且结合了
OOP（面向对象编程）
FP（函数式编程）
FRP （函数式响应编程）的相关理念。

在设计上的很多灵感来自于 Angular，Angular 的很多模 式又来自于 Java 中的 Spring 框架，依赖注入、面向切面编程等
底层 HTTP 平台默认是基于 Express 实现的
提供了一个层与层直接的耦合度极小,抽象化极高的一个架构 体系
对工程理解越深，加分越多