您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　12.3.4 支持服务器和浏览器获取共同数据源

　　脱水数据只在浏览器访问的首页发挥作用，之后，用户可以操作网页跳转，这时候网页需要自己获得数据提供给React组件。

　　举个例子，我们希望Counter页面显示的计数初始值由服务器端确定，而不是一个代码中固定的数字。用户首先直接访问http://localhost:9000/home页面，然后又通过点击顶栏的“Counter”链接进入http://localhost:9000/counter页面，因为这是一个单页应用，Counter页面的HTML是完全由浏览器端渲染的，所以没有服务器的脱水数据，所以浏览器需要一个API请求来获取初始值。同样，用户可能在Counter页面点击浏览器刷新按钮，或者在另一个窗口直接输入Counter页面的地址，这时网页的HTML是服务器端渲染产生的，这样服务器也需要有能够获取初始值的能力。

　　很明显，最简单的方法，就是有一个API服务器提供接口让服务器和浏览器都能够访问，这样无论是什么样的场景，服务器和浏览器获得数据都是一致的。

　　API服务器作为独立的服务器可能并不在网页服务器同一个域名下，这样如果要浏览器端访问，就要在API服务器配置跨域访问策略，有的时候，API服务器并不在一个产品的控制范围内，无法配置跨域策略，这样，就需要网页服务器同域名下搭起一个代理，把请求转发到API服务器。

　　在我们的例子中，我们在server/app.dev.js中增加一个路由规则，模拟一个API服务器，提供一个计数初始值的接口：

　　app.use('/api/count', (req, res) => {

　　res.json({count: 100});

　　});

　　到现在为止，我们的理论准备工作差不多了，接下来就要实践同构。 深入浅出React和Redux