直出与同构

发表于

直出与同构

直出：直接服务器生成HTML，返回给前端，由浏览器渲染。服务器访问数据接口，拿到数据后，根据相应页面模板（Node modules）生成相应的html返回给浏览器。速度快，有利于seo；

MVVM：如React/Vue，浏览器请求接口，得到数据后，在浏览器端渲染出页面；

同构：直出与MVVM的结合。

React 同构

React 虚拟Dom

React虚拟Dom存在于前后端两种展示原型的形式

1.客户端上，虚拟Dom通过ReactDOM的Render方法渲染到页面中；

2.服务端上，react通过ReactDOMServer.renderToString和ReactDOMServer.renderToStaticMarkup 将其渲染成HTML字符串

栗子：

1
2
3
import ReactDOMServer from 'react-dom/server';
import App from './app.js'
const reactHtml = ReactDOMServer.renderToString(<App data = {templData}>);

app.js

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
    <div>
        react app test
    </div>,
    document.getElementById('react-html-container')
);

index.html

1
2
3
4
5
<html>
<body>
<div id="react-html-container"><%=#reactHtml%></div>
</body>
</html>