使用随机生成的字符串在React进行服务器端渲染？

Saad 发表于 Dev

能

我正在我的React / Redux应用程序中第一次尝试服务器端渲染。我现在遇到的一个问题是，我需要初始状态具有一个随机生成的字符串，然后将其作为道具传递给我的主要App组件。显然，这会引起问题，因为它会为客户端和服务器生成不同的字符串。我有什么办法可以阻止此问题的发生？

帮助理解的基本结构：

App.js

import React from 'react';
import { connect } from 'react-redux';

const App = ({ randomStr }) => (
  <div> 
    <p>{randomStr}</p>
  </div>
);

const mapStateToProps = (state) => ({
  ...
});

const mapDispatchToProp = (dispatch) => ({
  ...
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

而我的减速器：

reducer.js

import { generateString } from '../util';
import { NEW_STRING } from '../constants';

const stringReducer = (state = generateString(), action) => {
  switch (action.type) {
    case NEW_STRING:
      return generateString();

    default:
      return state;
  }
};

export default stringReducer;

如您所见，我是randomStr从redux存储中获取并进行渲染的，但是在客户端和服务器中却有所不同。任何帮助，将不胜感激！

HiDeo

在服务器端生成存储和初始状态时，客户端不应这样做，并尝试重新生成数据。

您只需生成一次商店和您的初始状态（在服务器上），然后将其传递给客户端。为此，您需要将其注入要渲染的初始组件中。

最常见的方法是添加一个<script>标记并将状态附加到您的窗口，例如在中window.__initialState。

例如，如果您在ReactDOM.renderToString服务器端使用渲染名为的初始组件Html，则可以：

const html = ReactDOM.renderToString(<Html initialState={initialState} />);

然后，Html您可以在组件中注入此数据，以便客户端以后可以使用它：

<script dangerouslySetInnerHTML={{ __html: `window.__initialState=${JSON.stringify(this.props.initialState)};` }}/>

之后，在客户端，您可以window.__initialState用来取回数据，最终在服务器和客户端上获得相同的数据。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-03-3

我来说两句

0条评论

登录后参与评论

来自分类Dev