NextJS，在getServerSideProps中预加载Redux数据

Question

根据官方NextJS文档中的信息，他们建议使用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的createAsyncThunk(获取数据。

无论如何，对于getServerSidedProps和getInitialProps，您需要将服务器端存储传递给作为初始客户端存储的客户端。您可能需要考虑使用下一个redux包装器来完成此任务。你可以在这里找到一个很好的例子。

此外，您还缺少react-redux的connect到mapStateToProps和mapDispatchToProps的用法。

我使用的next.js和react-redux与您的配置类似，并且我一直在努力处理获取存储数据和调度操作所需的所有样板代码。因此，我创建了connect初始道具，使用户getInitialProps可以更容易地从redux存储中调度操作和使用状态数据。欢迎您以连接初始道具Github为例。