[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5,"_56":57,"_58":59,"_60":61},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","Hishengs","page",1,"limit",20,"total","id","24297","avatar_url","https://avatars3.githubusercontent.com/u/8407978?v=4","githubUsername","create_at","2016-08-19T08:59:13.459Z","score",10,"topic_count",0,"reply_count",2,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":34,"_48":34,"_31":16,"_49":50,"_25":51,"_52":53},"15364","author_id","14569","tab","share","content","> 原文地址：https://blog.coding.net/blog/React-Server-Side-Rendering-for-SPA-SEO\r\n作者：[书一@Coding](https://blog.coding.net/author/kin)\r\n\r\n\r\n前端技术的流行，衍生了许多前端框架，如 Angular JS、Polymer、Backbone,Ember.js 等，这些前端框架有些支持创建一个单页 Web 应用（Single Page Web Application）。可是，当需要应用支持良好的 SEO 的时候，你可能就会忧伤了，毕竟普通的搜索引擎可能还不支持 SPA 应用。听闻 React 支持 Server Side Rendering，顿时激起我的兴趣，想要一探究竟，于是诞生了这篇博文。\r\n\r\n刚好 Coding 博客需要做一些调整，而博客支持 SEO 也是首要任务，于是在上班之外的时间，用 React 提升了下 Coding 博客的体验。\r\n\r\n写好博客前端的基本组件和页面之后，开始搜索 *React Server Side Rendering* 相关的关键词，Clone 各种项目的源码下来看，找到几个比较好的 React Server Side Rendering 的 Demo：\r\n\r\n> - [React Starter](https://github.com/webpack/react-starter)\r\n> - [isomorphic500](https://github.com/gpbl/isomorphic500)\r\n\r\n看完之后基本理解 React Server Side Rendering 的处理方法了。\r\n\r\n## Server Side Render 需要什么\r\n\r\n最先想到的肯定是，能够直接把一个 SPA 应用输出成 HTML 字符串吧！嗯，没错，就是它。\r\n\r\n### React renderToString 和 renderToStaticMarkup 魔法棒\r\n\r\nReact 提供了俩个神奇的方法，`renderToString` 和 `renderToStaticMarkup`，它们支持将 React Component 直接输出成 HTML 字符串，有了这俩个方法，我们就可以在服务器端执行 React，直接返回渲染之后的结果。\r\n\r\n这样搜索爬虫就能爬出一个具有内容的 HTML 页面，而不是一个 SPA 应用的 Initialize HTML 页面。 \r\n\r\n你可能会奇怪，为什么提供了俩个 React Component To String 的方法，其实它们是有区别的：\r\n\r\n> renderToString 方法，只应用在服务器端，把一个 React Component 渲染成 HTMl ,可以将它通过 response 发送到浏览器端，已达到 SEO 的目的。\r\n\r\n> renderToStaticMarkup 方法，和 renderToString 类似，但是它生成的 HTML Dom 不包含类似 data-react-id 这样的额外属性，可以用于生成简单的静态页面，节省大量字符串。\r\n\r\n可以直接输出 HTML 字符串了，是不是就可以做到服务器端渲染了？\r\n\r\n### 有了魔法还不够\r\n\r\nReact 提供的俩个渲染 HTML 字符串方法，虽然能做到直接渲染出 React Component，但是我们应用中的数据该如何处理、如何管理、如何渲染。\r\n\r\n熟悉 React 的都知道 Flux ，使用 Flux 可以更加方便 React 的数据交互，让 React 更专注于 View 的逻辑。（附图：React Flux 应用交互过程）\r\n![React Flux 应用交互过程](https://dn-coding-net-production-pp.qbox.me/5f297b2b-ae3f-4f4d-9ec7-2bd94ddce266.png)\r\n但是，一个 React Flux 应用即使可以在浏览器端正常的运行，直接在服务器端使用 `renderToString` 方法也只能渲染出 React Component 不包含数据的 HTML Dom，React 的 ComponentDidMount 不会在服务器端触发，你的 Flux Action 事件也无法触发， Store 中不会存在任何数据，并不能解决根本问题。\r\n\r\n所以，我们需要解决哪些问题呢？\r\n\r\n>A：嗯，把 Store 里初始化好数据就可以了！\r\n>B：等等，好像还要解决异步数据请求的问题。\r\n>C：处理 Action 事件的时候似乎应该在数据返回之后。\r\n>D：他们说的好像都对，既然做了服务器端渲染，那么在浏览器端首次就不需要在 ComponentDidMount 的时候去请求数据了，这么一来，Store 中就没有数据了，岂不是好多操作都没法做了？是不是应该在浏览器端存一个数据副本？要不要在浏览器端重新渲染一次？\r\n\r\n从上面的回答，可以看到我们暂时需要解决的问题：\r\n\r\n1. 初始数据异步请求的问题。所有需要在服务器端渲染的数据请求，都需要在返回 HTML 之前处理完毕。\r\n2. Action 和 Store 该如何管理？Action 事件发送是在数据之前还是之后？\r\n3. 服务器端数据需要初始化，浏览器端的数据同样需要初始化。所以，浏览器需要保存一个数据副本。副本如何保存，浏览器端 Store 如何初始化？\r\n4. 客户端端渲染的问题。\r\n\r\n\r\n带着这些问题，也许会有一个轮子可以解决这个问题，不然就得自己造一个轮子了，好吧，看看有没有好用的轮先。在 GitHub 找找，找到 [Redux](https://github.com/rackt/redux) 和 [Fluxible](https://github.com/yahoo/fluxible) 俩个好轮子，看了下文档，选择了 Fluxible，因为觉得它对于 Component Context 的管理比较好，而且是在 Flux 的基础上实现的。（最关键可以用酷酷的 Decorator Pattern）。\r\n\r\n## 怎么用 Fluxible 完成 Server Side Rendering 的魔法\r\n\r\n### 1. 前端路由的选择\r\n\r\n作为 SPA 应用，都需要一个前端路由来处理不同的渲染。Fluxible 提供了自己的 router 组件，当然，使用 react-router 也可以。本文就是使用 react-router 来作为路由组件的。新建一个 Router.jsx ，作为博客的路由入口：\r\n\r\n\r\n```\r\nimport ....;\r\n// polyfill\r\nif (!Object.assign)\r\n Object.assign = React.__spread; // eslint-disable-line no-underscore-dangle\r\n\r\nvar {\r\n Route,\r\n DefaultRoute,\r\n NotFoundRoute,\r\n RouteHandler,\r\n Link\r\n } = Router;\r\n\r\nmodule.exports = (\r\n \r\n \r\n \r\n \r\n);\r\n\r\n```\r\nreact-router 具体使用方法，请参考[文档(v1.3.x)](https://github.com/rackt/react-router/tree/master/docs)\r\n\r\n### 2. Store 、Action、Service\r\n\r\n使用 Fluxible 之后，Store 最好只作为数据存储使用，Store 中不要加入数据请求之类的方法，数据请求方法可以使用 Fluxible Plugins 来管理，也可以自己封装 service 类来管理。Fluxble 提供了 createStore 方法和 BaseStore 基类来创建 Store，可以根据自己的需求选择，下面创建一个 Blog.store.js ：\r\n\r\n\r\n```\r\nimport ...;\r\nvar CHANGE_EVENT = 'change';\r\nclass DemoStore extends BaseStore {\r\n constructor(dispatcher) {\r\n super(dispatcher);\r\n this.dispatcher = dispatcher; // Provides access to waitFor and getStore methods\r\n this.data = null;\r\n }\r\n loadData(data) {\r\n this.data = data;\r\n this.emitChange();\r\n }\r\n getState() {\r\n return {\r\n data: this.data\r\n };\r\n }\r\n // For sending state to the client\r\n dehydrate() {\r\n return this.getState();\r\n }\r\n // For rehydrating server state\r\n rehydrate(state) {\r\n this.data = state.data;\r\n }\r\n}\r\nDemoStore.storeName = 'DemoStore';\r\nDemoStore.handlers = {\r\n \"LOAD_DATA\": \"loadData\",\r\n};\r\nexport default DemoStore;\r\n```\r\n\r\n\r\n可以注意到 BlogStore 中有几个比较重要的方法和属性：\r\n\r\n> - dehydrate 方法，用于将服务器端载入数据之后的 Store 中的 state ，序列化输出到浏览器端。\r\n> - rehydrate 方法，用于将序列化之后的 Store 中的 state，在浏览器端反序列化成 Store 对象。\r\n> - storeName 属性，可以直接使用 storeName 在 Component Context 中获取 Store 实例。\r\n> - handlers 属性，定义 Store 监听的 Action 事件。\r\n\r\n有了 Store 之后，接下来创建一个 Action 。\r\n\r\n\r\n```\r\nimport ...;\r\n\r\nclass DemoAction {\r\n\r\n /**\r\n * @param {string} text\r\n */\r\n static loadData(actionContext, payload, done) {\r\n DemoService.loadData(payload, function (data) {\r\n actionContext.dispatch('LOAD_DATA', data);\r\n done && done();\r\n });\r\n }\r\n\r\n\r\n}\r\n\r\nexport default DemoAction;\r\n```\r\n\r\n\r\nAction 在 Fluxible 中使用 `context.executeAction` 方法来执行，会将`actionContext` 上下文作为参数传入 Action 中。\r\nAction 有一个回调函数 `done` 主要用于使用 `async` 处理异步请求时使用（不需要在服务器端加载数据的 Action 可以不传入此函数）。\r\nAction 只负责分发事件，以及处理在不同业务逻辑下的事件分发。具体数据加载交给 Service 来处理。\r\n\r\n\r\n```\r\nimport Request from 'superagent';\r\nclass BlogService {\r\n\r\n static loadData(payload, done) {\r\n var req = Request\r\n .get(\"http://127.0.0.1:4011/api/data\");\r\n if (payload.req) {\r\n req.set(\"Cookie\", payload.req.headers.cookie || \"\");\r\n }\r\n req.query(payload.form)\r\n .end(function (err, res) {\r\n var result = res.body;\r\n done && done(result, done);\r\n });\r\n }\r\n\r\n\r\n}\r\nexport default BlogService;\r\n```\r\n\r\n\r\n有了 Store、Action、Service ，数据和事件的绑定也就有了，下面只需要把数据跟 React Component 交互处理好就可以了。\r\n\r\n###3. 增加一个 Route Page\r\n使用 react-router 作为路由组件，它为每一个 url 正则都指定了一个 Handler，这个 Handler 就是一个 React Component，react-router 会直接渲染这个 React Component 以及它的子节点。\r\n\r\n\r\n```\r\nimport React from 'react';\r\nimport DemoStore from \"Demo.store.js\";\r\nimport DemoAction from \"Demo.action.js\";\r\n\r\nimport { connectToStores } from 'fluxible-addons-react';\r\n@connectToStores([DemoStore], (context) => ({\r\n DemoStore: context.getStore(DemoStore).getState()\r\n})) class Demo extends React.Component {\r\n\r\n static contextTypes = {\r\n getStore: React.PropTypes.func,\r\n executeAction: React.PropTypes.func\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n reload() {\r\n this.context.executeAction(DemoAction.loadData, {});\r\n }\r\n\r\n /**\r\n * @return {object}\r\n */\r\n render() {\r\n console.info(this.props.DemoStore);\r\n var data = this.props.DemoStore.data || [];\r\n var itemContent = data.map(function (item, i) {\r\n return (

{item.content}

);\r\n });\r\n return (\r\n

\r\n {itemContent}\r\n

\r\n 重新加载\r\n

\r\n

\r\n );\r\n }\r\n\r\n\r\n}\r\n\r\nDemo.loadAction = [DemoAction.loadData];\r\n\r\nexport default Demo;\r\n```\r\n\r\n\r\n从上面的代码中可以看到几个比较重要的地方：\r\n\r\n> - connectToStores ，这里使用的是 Decorator 模式，也可以直接作为函数使用，具体请查阅 Fluxible 的文档，这个函数可以让你为 React Component 的 props 执行注入回调函数，如注入 state。\r\n> - contextTypes，为 React Component 提供俩个比较重要的方法，getStore 和 executeAction。\r\n> - loadAction ，此处是我自定义的属性，主要用于在入口处为每个 Page Handler React Component 加入需要初始化的数据触发事件。\r\n\r\n鉴于 react-router 的使用，需要为 App 提供一个 RouteHandler 的入口（App.jsx）。\r\n\r\n\r\n```\r\n...\r\nimport {connectToStores, provideContext} from 'fluxible-addons-react';\r\nvar {RouteHandler} = Router;\r\n\r\n\r\n@provideContext class App extends React.Component {\r\n\r\n static contextTypes = {\r\n getStore: React.PropTypes.func,\r\n executeAction: React.PropTypes.func\r\n };\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n }\r\n\r\n /**\r\n * @return {object}\r\n */\r\n render() {\r\n return (\r\n

\r\n \r\n

\r\n );\r\n }\r\n\r\n\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n可以看到在 App Class 前面加入了一个 provideContext 的 Decorator Pattern。\r\n\r\n> provideContext 会为 React Component 以及它的子节点加入 executeAction getStore 方法，当然它也支持为子节点加入新的方法或者属性。\r\n\r\n### 4. 服务器端入口和客户端入口\r\n\r\nStore、Action、Service、Route 和 React Component 都有了之后，接下来就需要为 App 的入口做一些准备工作了。我们需要为 Server 端和 Client 端分别创建渲染入口。在 Server 端预渲染好 HTML 页面（这次渲染只是生成 HTML 字符串），Client 端接收到 HTML 之后从预存储的数据中再次渲染页面（这次渲染可以初始化一些 Dom 和 Dom 事件）。\r\n\t\r\nClient 端处理相对来说比较简单，只需要把 Store 的数据反序列化，然后渲染出页面即可：\r\n\r\n```\r\n\t var dehydratedState = window.App;\r\n app.rehydrate(dehydratedState, function (err, context) {\r\n\r\n if (err) {\r\n throw err;\r\n }\r\n\r\n window.context = context;\r\n\r\n var mountNode = document.getElementById(app.uid);\r\n Router.run(app.getComponent(), Router.HistoryLocation, function (Handler, state) {\r\n var Component = React.createFactory(Handler);\r\n React.render(\r\n React.createElement(\r\n FluxibleComponent,\r\n {context: context.getComponentContext()},\r\n Component()\r\n ),\r\n mountNode,\r\n function () {\r\n }\r\n );\r\n });\r\n```\r\n\r\n\r\nFluxible 提供 rehydrate 方法，将 Store 数据反序列化到 context 中。然后再使用 react-router 的 `Router.run` 方法渲染 HTML。\r\n\r\nServer 端处理相对比较复杂，基本过程是：\r\n> 1. 创建 Fluxible Context 对象\r\n> 2. 使用 react-router 的 `Router.run` 方法根据 Request URL 渲染。\r\n> 3. 渲染之前把 Router Handler 需要进行 SEO 的数据发送 Action 请求（需要处理异步的问题）。\r\n> 4. 待所有数据请求完毕之后，序列化 Fluxible Context 。\r\n> 5. 渲染 Router Handler 对应的 React Component。\r\n> 6. 使用 `React.renderToStaticMarkup`渲染出 html， body，head 等外层标签。并使用 React Component 渲染的结果填充 body 内部内容。\r\n> 7. 发送 HTML 字符串到浏览器端。\r\n\t\r\n参考代码：\r\n\r\n```\r\n render(req, res) {\r\n var context = app.createContext({\r\n api: process.env.API || ('http://127.0.0.1:'+process.env.PORT),\r\n env: {\r\n NODE_ENV: process.env.NODE_ENV\r\n }\r\n });\r\n var actions = this.actions || [];\r\n Router.run(app.getComponent(), req.url, function (Handler, state) {\r\n if (state.routes.length === 0) {\r\n res.status(404);\r\n }\r\n async.filterSeries(\r\n state.routes.filter(function (route) {\r\n return route.handler.loadAction ? true : false;\r\n }),\r\n function (route, done) {\r\n async.map(actions.concat(route.handler.loadAction), function (action, callback) {\r\n context.getActionContext().executeAction(action, {\r\n form: Lodash.merge(state.params, state.query),\r\n params: Lodash.extend({}, state.params),\r\n query: Lodash.extend({}, state.query),\r\n req: Lodash.extend({}, req),\r\n res: Lodash.extend({}, res),\r\n state: Lodash.extend({}, state),\r\n route: Lodash.extend({}, route)\r\n }, callback);\r\n //在 Server Side 执行 Action 的时候，传入一些 App 上下文参数\r\n }, function (err, result) {\r\n done();\r\n });\r\n },\r\n function () {\r\n\r\n const state = \"window.App=\" + serialize(app.dehydrate(context)) + \";\";\r\n var Component = React.createFactory(Handler);\r\n var HtmlComponent = React.createFactory(Html);\r\n\r\n var markup = React.renderToString(\r\n React.createElement(\r\n FluxibleComponent,\r\n {context: context.getComponentContext()},\r\n Component()\r\n ));\r\n\r\n var html = React.renderToStaticMarkup(HtmlComponent({\r\n context: context.getComponentContext(),\r\n state: state,\r\n uid: app.uid,\r\n markup: markup\r\n }));\r\n res.send(html);\r\n }\r\n );\r\n });\r\n }\r\n\r\n```\r\n\r\n到这一步，React Server Side Rendering 案例已经可以完整运行起来了。\r\n\r\n运行环境首推 nodejs，毕竟都是 js，兼容性会很好。\r\n\r\n然后使用 curl 命令查看输出的内容，可以看到不在只是简单的输出一个 React App 的入口基本标签，而是整个包含数据的 HTML 页面。如此一来，搜索爬虫就能爬出一个完整的 HTML 页面了。\r\n\r\n## 总结\r\nReact 提供原生的 Component To String 支持，使得 React Server Side Rendering 成为可能，但是还有很多其他的过程，会根据个人业务不同会有区别，还是需要开发者自己熟悉这个过程，以及根据自身业务做出不同的方案。\r\n\r\n----\r\n\r\n- 本文示例 [Demo 地址](https://coding.net/u/kin/p/react-server-side-demo/git) `https://coding.net/u/kin/p/react-server-side-demo/git` 代码中有什么问题，欢迎指正。\r\n- 示例代码是在 React 1.3.x 的基础上编写的，其他使用的 npm 库也都是在 React 1.3.x 的基础上。\r\n- React 1.4.0 已经更新，并且有一部分调整，React Server Side Rendering 方案也有所调整，Fluxible 已经对 React 1.4.0 有新的版本，React-router 也升级了，并且使用也有比较大的调整。有兴趣的可以研究一下。\r\n- [React Starter](https://github.com/webpack/react-starter) 项目实现的 Server Side Rendering 也值得看一看。\r\n- [Redux](https://github.com/rackt/redux) 的服务器端渲染实现，可以参考[@hulufei](https://coding.net/u/hulufei) 的博客[《玩转 React 服务器端渲染》]()","title","React Server Side Rendering 解决 SPA 应用的 SEO 问题","last_reply_at","2015-12-11T13:19:39.952Z","good","top","visit_count",11167,"2015-12-11T02:32:43.577Z","author",{"_13":54,"_22":55},"zengliqi","https://avatars1.githubusercontent.com/u/9347370?v=4","zones",[105],"tabs",[76,77,78,79,80,81],"publicConfig",{"_62":63,"_64":65,"_66":67},"apiBaseUrl","https://api.cnodejs.org","turnstileSiteKey","","build",{"_68":69,"_70":71,"_72":73,"_74":75},"service","cnode-web","version","0.1.0","commit","9ab83f39eed6b4a14eedbb8fbadfefe40dba3d45","buildTime","2026-07-30T19:01:36Z",{"_20":16,"_82":40,"_84":104,"_86":97,"_87":16,"_89":98},{"_20":32,"_82":102,"_84":103,"_86":97,"_87":32,"_89":98},{"_20":99,"_82":100,"_84":101,"_86":97,"_87":99,"_89":98},{"_20":95,"_82":47,"_84":96,"_86":97,"_87":95,"_89":98},{"_20":91,"_82":92,"_84":93,"_86":34,"_87":94,"_89":90},{"_20":28,"_82":83,"_84":85,"_86":34,"_87":88,"_89":90},"key","test","label","测试","visible","sort_order",91,"scope","admin",9,"dev","开发",90,4,"精华",true,"public",3,"job","招聘","ask","问答","分享",{"_20":16,"_106":107,"_108":101,"_109":110,"_111":112,"_86":97,"_87":16},"slug","jobs","name","description","Node.js 招聘信息专区","icon","briefcase"]