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

问题描述 投票：0回答：2

我第一次在我的 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;

如您所见，我从我的 redux 存储中获取 

randomStr
并渲染它，但它在客户端和服务器中是不同的。任何帮助将不胜感激！

javascript reactjs react-dom server-side-rendering react-dom-server
2个回答
5
投票

当您在服务器端生成存储和初始状态时，客户端不应执行相同操作并尝试重新生成数据。

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

最常见的方法是添加 

<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
取回数据，最终您将在服务器和客户端上获得相同的数据。

0
投票

让我们传播出去吧！ React 从 React 18 开始为其创建了一个名为 

useId
的钩子。 https://react.dev/reference/react/useId

目的是在[服务器，客户端]端渲染之间创建一致的随机值。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.