同构应用小记

同构应用是指写一份代码但可同时运行在浏览器和服务器的应用。

浏览器端渲染的缺点：

1. 搜索引擎无法收录我们的网页，因为展示的数据都是在浏览器端异步渲染出来的，大部分爬虫无法获取。
2. 渲染过程的计算量大，存在性能问题，用户能明显感知首屏的渲染延迟。

而服务器端渲染能解决SEO、减少首屏渲染问题。

React、Vue、Angular等主流前端框架都支持同构。

其中，React同构应用的运行原理的核心在于虚拟DOM。不直接操作DOM，而是通过JavaScript Object描述原本的DOM结构。

• 操作DOM树是耗时、耗性能的。而通过DOM Diff算法能找出两个不同Object的最小差异，得出最小的DOM操作。
• 虚拟DOM在渲染时不仅可以通过操作DOM树表示结果，也可以渲染成字符串（服务器端渲染），或者渲染成手机App原生的UI组件。

react-dom在渲染虚拟DOM树时有两种方式：

• 通过render()函数去操作浏览器DOM
• 通过renderToString()计算表示虚拟DOM的HTML形式的字符串。

angular的服务端渲染参考：https://www.cnblogs.com/laixiangran/p/8664480.html

同构应用最终应输出两份js代码，一份用于浏览器，一份用于nodejs环境。nodejs环境中的js代码，需要注意：

• 不能包含浏览器环境提供的API，比如document
• 不能包含CSS代码，渲染出CSS代码会额外增加计算量，影响服务端渲染性能
• 不要打包node_modules里的第三方模块，通过CommonJS规范引入