关于 react 的 ssr、服务端渲染的完美方案！ 大家帮忙看看是不是可行？谢谢

[find456789]

手上有个网站，大约只有 5 个页面（某些页面，传入不同 id 返回不同结果，由于模板一致（网页结构），算作一个页面）

想要实现：

1、首屏速度在 1 秒内：

这个已经实现，服务端吐纯 html，然后放在 cdn 上，速度已经是毫秒级别
用户信息，在客户端发送 ajax 请求单独获取（虽然多了一个请求，但整体速度更快）

2、用 react 来提升页面之间的跳转速度（前后分离，页面跳转只请求必要数据，而不是请求整个页面）

这个有点麻烦，目前的服务端已经写好了 restful 接口

我的打算是这样的：
	先用 react 实现网站的所有功能
    然后在浏览器里复制渲染好的 html 结构，让服务端用这个 html 结构来渲染出网站内容，当用户首次请求，就吐这个内容
    当用户再次访问其他页面的时候，就用 react 来控制

这样就实现了，不但首次加载超级快，而且 用户跳转其他页面，还可以享受 react 带来的速度

但是仔细思考，我就发现了一个问题：

当用户首次 获得网站内容后，x 秒后，react 运行了，重新渲染了页面， 用户就会看到网页 闪烁了一下

那怎么办呢？

有没有办法 解决这个问题呢？

虽然我知道可以用服务端渲染， 但是服务端渲染 成本有点高，要准备一台新机器

通过 3 楼的 v 友提醒， 可以用 hydration 来实现这个功能

但是我发现了另外一个问题， 那就是 客户端收到服务端传送的 渲染完毕的 html 之后，

客户端的 react 启动的时候，还会去请求对应 rest 接口，渲染数据，好用来和服务端传来的 html 做对比

这也就是说， 我本意是为了减少请求，才在服务端渲染的

现在客户端在收到服务器已经渲染好的数据后，自己居然又发送 ajax 请求了（它的 目的是为了渲染新的界面，和服务器返回的 html 做对比）


我在想，能不能让客户端，自己判断，如果收到的是服务端发送的 html，那么，就不再发送多余 ajax 请求数据（本意是为了减少请求），客户端只发送请求用户信息的 ajax 请求

这样来来去去， 可能我还是应该直接用 spa， 但这样 seo 又是个问题

各种方案都特别麻烦
。。。。
我再思考思考看看

[lianyue]

加载 运行 react 并不会重新渲染页面

[find456789]

@lianyue

谢谢

从这里看（ https://www.chkui.com/article/react/react_server_render_with_checksum
）

，我所用的方法 是会重新渲染的， （我的方法删除了所有无用的属性，包括 checksum ）



看来只能用 前后端同构的方案 了

[noe132]

这个称为 hydration。
https://reactjs.org/docs/react-dom.html#hydrate
如果页面内容是静态不变的，通过 ssr 渲染出来缓存结果就可以了
如果是动态的内容，最好是在服务端加一个 ssr 中间件。