react系列（10）服务端渲染认识

偏执的太偏执、 2021-09-14 10:26 321阅读 0赞

目前业界开发通用的模式是：后端负责提供数据，前端负责数据展现（也就是渲染），这种开发模式中大量使用了ajax来实现页面的局部刷新。nodejs的出现，让js技术走向后端，开始有了服务端渲染。

## 何为渲染？ ##

如果我们只是想显示一堆不变的数据，那么我们直接写一个a.html丢到服务器上让客户端访问就可以了。但这是基本不可能的事情，数据一般是变化的。你不可能为每套数据写一个视图，所以我们需要分离数据和视图，然后使用一种技术将数据塞到视图中，这种技术就叫渲染。这工作放在服务器上做就是服务器渲染，放在浏览器做就是浏览器渲染。

## 浏览器渲染 ##

单页应用用的基本都是浏览器渲染。优点很明确，后端只提供数据，前端做视图和交互逻辑，分工明确。服务器只提供接口，路由以及渲染都丢给前端，服务器计算压力变轻了。但是弱点就是用户等待时间变长了，尤其在请求数多而且有一定先后顺序的时候。

## 服务器渲染 ##

服务器接到用户请求之后，计算出用户需要的数据，然后将数据更新成视图（也就是一串dom字符）发给客户端，客户端直接将这串字符塞进页面即可。这样做的好处是响应很快，用户体验会比较好，另外对于搜索引擎来说也是友好的，有SEO优化。现在题主说的应该是nodejs层的服务器渲染，这里还有一个明显的好处就是前端性能优化更顺手了，可操作的空间大了。但是缺点也很明显，如果不是增加一个node层的话，前后端责任分工不明，不能很好的并行开发。另外也增加了服务器计算压力（虽然可以做渲染缓存，但毕竟是多做了计算）。

根据以上特点，在用户体验要求比较高的页面（首屏）、重复较多的公共页面可以考虑使用服务器渲染，减少ajax请求和提升用户体验。

模拟服务端渲染Demo：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8" />
    		<title>服务端渲染</title>
    		<script src="../js/libs/react/15.6.2/react.js"></script>
    		<script src="../js/libs/react/15.6.2/react-dom.js"></script>
    		<script src="../js/libs/react/15.6.2/react-dom-server.js"></script>
    		<script src="../js/libs/babel/babel.min.js"></script>
    	</head>
    
    	<body>
    		<div id="example"></div>
    		<script type="text/babel">
    			var HelloMessage = React.createClass({
    		        render: function() {
    		          return <h1>Hello World!</h1>;
    		        }
    		    });
    			
    			//客户端渲染
    		    ReactDOM.render(
    		        <HelloMessage />,
    		        document.getElementById('example')
    		    );
    
    		  	//服务端渲染(没有nodejs条件，在客户端模拟)
    		    var html = ReactDOMServer.renderToString(<HelloMessage />);
    		    document.getElementById('example').innerHTML = html;
    		</script>
    	</body>
    
    </html>