Question

基于NextJS官方文档中的info，他们建议使用getServerSidedProps和getStaticProps代替getInitialProps。

我想在服务器上将一些数据预加载为Redux状态。

注释：我使用@ redux / toolkit软件包

所以我有基本的商店设置：

import reducer from './reducer' // this is just a combineReducers ...
export const store = configureStore({ reducer });

我的自定义_app.js

import { store } from '../store'

<Provider store={store}>
    <Component {...pageProps} />
</Provider>

现在这是我面临的问题

在index.js文件中，我有类似的内容

import { store } from '../store'
...
export const getServerSideProps = async (ctx) => {
    const data = await fetchSomeData();
    // here I add some data to the store
    store.dispatch(someAction(data));
    return { props: {} }     
}

数据是在服务器端在存储中设置的，但是当我在客户端时，存储为空。有谁知道如何在服务器上预加载数据？我不想使用componentDidMount的useEffect并在客户端上设置该数据。我知道有一个图书馆正在解决此问题，但是它使用的是getInitialProps，我想看看是否可以通过这种方式完成工作。

Answer 1

如果仅在服务器端渲染时需要数据，则应使用

getServerSidedProps。但是，如果在两种情况下（当用户从该页面开始时，您都在服务器上获取数据）以及客户端导航到该页面时都需要那里的数据，则最好使用getInitialProps来获取数据数据（通过redux-toolkit的{{1}}）。

无论如何，同时使用createAsyncThunk和getServerSidedProps时，您需要将服务器端存储传递给，并将其作为初始客户端存储传递给客户端。您可能要考虑使用next-redux-wrapper来完成此任务。您可以找到一个不错的example here。

此外，您还缺少getInitialProps和react-redux的{{1}}的{{1}}用法。

我正在使用connect和mapStateToProps进行与您的配置类似的配置，而我在为获取存储数据和调度动作所需的所有样板代码中苦苦挣扎。因此，我创建了connect-initial-props，以使用户mapDispatchToProps可以更轻松地调度操作并使用来自Redux存储的状态数据。欢迎您使用connect-initial-props Github上的示例。

NextJS，将Redux数据预加载到getServerSideProps

1 个答案: