React JS 同构渲染
Posted
技术标签:
【中文标题】React JS 同构渲染【英文标题】:React JS isomorphic render 【发布时间】:2016-08-02 01:49:18 【问题描述】:ReactJS、原始 Flux、react-router、nodeJS、socket.io 一切都是最新的。
如果我在浏览器中关闭 javascript,则只会呈现静态代码。
在服务器端渲染期间,ComponentWillMount
和 render
方法被启动,但不是 ComponentDidMount
。
即使我将 Flux 逻辑放入 ComponentWillMount
方法中,也不会发生任何事情:调用了操作,但 socket.io 不会向服务器发送请求以从数据库中获取数据。这意味着,没有从数据库中检索到任何数据,也没有呈现对搜索引擎有用的内容。
如果启用了 javascript,则一切正常。
这里是重要的代码片段:
组件。添加监听器和调用动作:
componentDidMount()
StoreUser.addChangeListener(this._onChange);
Actions.getUser(this.props.params.userid)
客户端的操作向服务器请求用户数据:
function _getUser (userid)
socket.emit('getUser', userid)
直到这个地方服务器端渲染工作,但服务器本身没有收到getUser
事件,所以没有进一步发生。
同样,如果在浏览器中启用了 javascript,所有这些都可以正常工作。服务器接收到这个调用并返回用户的数据。
如何让服务器接收此事件,返回用户数据并在发送给客户端之前呈现它? 作为替代方案,是否有不同的方法使其对 SEO 友好?
【问题讨论】:
【参考方案1】:React 的 componentDidMount
生命周期钩子未在服务器端调用 as stated in the docs。
如果您需要在组件的render
方法中获取数据并在服务器端使用它,则需要在初始渲染期间将此数据作为props
传递。这意味着,在componentWillMount
期间,即使调用了钩子,您也无法获取它。
要实现你想要的,你需要你的服务器端代码:
确定要渲染的组件 发送正确的操作,以便您的商店正确填充 仅在那时渲染您的组件 - 因为数据可用于在初始渲染中传递给您的组件如何实现这一点的细节当然取决于您的通量实现、您使用的服务器端框架等。
【讨论】:
有没有更简单的方法让它对 seo 友好?) 那么唯一的另一种方法是不使用 React 的服务器端渲染功能并在无头浏览器(类似于 phantom.js)中渲染您的网站页面,缓存生成的 html,并响应服务器端。如果您不想自己实现这一点,可以使用一些云服务来实现这一点。 analog-ni.co/… 附带说明,React 方式并不复杂,这完全取决于您的通量实现。例如,Redux 让它变得非常简单。 然后您可以根据请求实例化一个通量存储,将静态fetchData
方法添加到您的组件,在ReactRouter.match
调用之后,您可以检查renderProps.components
并调用他们的fetchData
方法如果任何带有renderProps.params
的,那么只有你才能渲染你的 React 组件以上是关于React JS 同构渲染的主要内容,如果未能解决你的问题,请参考以下文章