Open into-piece opened 3 years ago
React SSR 详解【近 1W 字】+ 2个项目实战 SSR 之所以能够实现，本质上是因为虚拟 DOM 的存在 React 中同构（SSR）原理脉络梳理
因为服务端返回的 HTML 是字符串，虽然有内容，但是各个组件没有事件，客户端的仓库中也没有数据，可以看做是干瘪的字符串。客户端会根据这些字符串完成 React 的初始化工作，比如创建组件实例、绑定事件、初始化仓库数据等。hydrate 在这个过程中起到了非常重要的作用，俗称“注水”，可以理解为给干瘪的种子注入水分，使其更具生机。
在使用 Next.js 时， 打开浏览器控制台 => 找到 network => 找到当前路由的请求并查看 response => 可以看到服务端返回的 html 里包含着当前页面需要的数据，这样客户端就不会重新发起请求了，靠的就是 ReactDOM.hydrate 。
React SSR 详解【近 1W 字】+ 2个项目实战 SSR 之所以能够实现，本质上是因为虚拟 DOM 的存在 React 中同构（SSR）原理脉络梳理
因为服务端返回的 HTML 是字符串，虽然有内容，但是各个组件没有事件，客户端的仓库中也没有数据，可以看做是干瘪的字符串。客户端会根据这些字符串完成 React 的初始化工作，比如创建组件实例、绑定事件、初始化仓库数据等。hydrate 在这个过程中起到了非常重要的作用，俗称“注水”，可以理解为给干瘪的种子注入水分，使其更具生机。
在使用 Next.js 时， 打开浏览器控制台 => 找到 network => 找到当前路由的请求并查看 response => 可以看到服务端返回的 html 里包含着当前页面需要的数据，这样客户端就不会重新发起请求了，靠的就是 ReactDOM.hydrate 。