如何使用React、Koa和Rematch构建高效的服务端渲染框架？

本文共计3032个文字，预计阅读时间需要13分钟。

前言：本次讲解的主要内容是使用 React 和 Koa 构建的一套 SSR 框架。

本次搭建的 SSR 框架，是在他人基础上，再添加了一些自己的理念和优化功能。主要思路是将 React 与 Koa 结合，实现服务器端渲染。

所使用的相关技术如下：React | Rematch | React-router | Koa

前言

本次讲述的内容主要是 react 与 koa 搭建的一套 ssr 框架，是在别人造的轮子上再添加了一些自己的想法和完善一下自己的功能。

本次用到的技术为：react |rematch |react-router |koa

react服务端渲染优势

SPA（single page application)单页应用虽然在交互体验上比传统多页更友好，但它也有一个天生的缺陷，就是对搜索引擎不友好，不利于爬虫爬取数据（虽然听说chrome能够异步抓取spa页面数据了）；

SSR与传统 SPA（Single-Page Application - 单页应用程序）相比，服务器端渲染(SSR)的优势主要在于：更好的 SEO 和首屏加载效果。

在 SPA 初始化的时候内容是一个空的 div，必须等待 js 下载完才开始渲染页面，但 SSR 就可以做到直接渲染html结构，极大地优化了首屏加载时间，但上帝是公平的，这种做法也增加了我们极大的开发成本，所以大家必须综合首屏时间对应用程序的重要程度来进行开发，或许还好更好地代替品（骨架屏）。

react服务端渲染流程

组件渲染

首先肯定是根组件的render，而这一部分和SPA有一些小不同。

使用 ReactDOM.render() 来混合服务端渲染的容器已经被弃用，并且会在React 17 中删除。使用hydrate() 来代替。