CSR与SSR区别

CSR与SSR区别，如何将CSR与SSR结合起来？

SSR

SSR的全称是Server Side Rendering（服务端渲染），也就是渲染的工作放在服务端进行。 浏览器得到完整的结构后就可直接进行 DOM 的解析、构建、加载资源及后续的渲染。

优点：

• 1.首屏加载快
• 2.对搜索引擎友好，利于SEO

缺点：

• 1.访问量较大时，会对服务器造成很大压力
• 2.页面之间频繁刷新跳转体验不是很好

CSR

CSR的全称是Client Side Rendering（客户端渲染），服务器返回初始HTML内容，然后再通过js异步加载数据，完成页面的渲染，比如基于vue或者react开发的SPA应用都是典型的CSR案例。

优点：

• 1.页面路由放在客户端，页面间切换很快
• 2.数据渲染放在客户端，大大降低服务器的压力

缺点：

• 1.首屏渲染较慢，可能会出现白屏现象
• 2.不利于SEO

两者结合的方案

首页基于SSR，后续点击等事件交互基于CSR渲染，可以避免首页加载较慢，又能解决SEO问题。

对于客户端和服务端代码采用同构。

服务端采用react-dom/server的renderToString方法，将Index组件直出：

const { renderToString}  = require( 'react-dom/server');
const http = require('http');

// Index 组件
class Index extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return <h1>{this.props.data.title}</h1>
  }
}

// server服务
http.createServer((req, res) => {
  if (req.url === '/') {
    res.writeHead(200, {
      'Content-Type': 'text/html'
    });
    const html = renderToString(<Index />);
    res.end(html);
  }
}).listen(8080);

客户端使用react-dom的ReactDOM.hydrate方法替代ReactDOM.render方法，它用于在ReactDOMServer渲染的容器中对HTML的内容进行hydrate操作。React会尝试在已有标记上绑定事件监听器。

import ReactDOM from 'react-dom';
ReactDom.hydrate(<Index />, document.getElementById('root'));// 绑定Index组件的事件监听到页面