NextJS，在 getServerSideProps 中预加载 Redux 数据 [英] NextJS, preload Redux data in getServerSideProps

问题描述

基于他们推荐使用的官方 NextJS 文档中的信息getServerSidedProps 和 getStaticProps 而不是 getInitialProps.

我想在服务器上预加载一些数据到 Redux 状态.

注意:我使用@redux/toolkit 包

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

import reducer from './reducer'//这只是一个 combineReducers ...export const store = configureStore({reducer });

我的自定义 _app.js

import { store } from '../store'<提供者商店={商店}><组件{...pageProps}/></提供者>

现在这是我面临的问题

在 index.js 文件中我有这样的东西

import { store } from '../store'...export const getServerSideProps = async (ctx) =>{常量数据 = 等待 fetchSomeData();//这里我添加了一些数据到 storestore.dispatch(someAction(data));返回{道具:{}}}

数据在服务器端设置在商店中，但是当我在客户端时，商店是空的.有谁知道如何在服务器上预加载数据?我不想使用 componentDidMount 的 useEffect 并在客户端上设置该数据.我知道有一个库正在解决这个问题，但它使用的是 getInitialProps，我想看看是否可以通过这种方式完成某些事情.

解决方案

getServerSidedProps 如果您仅在服务器端渲染时需要数据，则应使用.但是，如果您在用户从此页面开始(您在服务器上获取数据的位置)以及客户端导航到页面的两种情况下都需要那里的数据，最好使用 getInitialProps 获取数据(通过 redux-toolkit 的 createAsyncThunk).

无论如何，对于 getServerSidedProps 和 getInitialProps，您需要将服务器端存储传递给客户端作为初始客户端存储.您可能需要考虑使用 next-redux-wrapper 来完成此任务.您可以在此处找到一个不错的示例.

此外，您没有使用 react-redux 的 connect 到 mapStateToProps 和 mapDispatchToProps.

我正在使用 next.js 和 react-redux 和你的类似配置，我正在努力处理获取存储数据和调度操作所需的所有样板代码.因此，我创建了 connect-initial-props 以使其更易于用户使用getInitialProps 从 redux 存储中分派动作和消费状态数据.欢迎您查看 connect-initial-props Github 上的示例.>

Based on this info from the official NextJS docs they recommend using getServerSidedProps and getStaticProps instead of getInitialProps.

I want to preload some data to Redux state on the server.

note: I use @redux/toolkit package

So I have basic store setup:

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

My custom _app.js

import { store } from '../store'

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

Now here is the issue I am facing

In the index.js file i have something like this

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: {} }     
}

Data is set in the store while on the server side, however when I am on the client, store is empty. Does anyone know how can I preload data while on the server? I don't want to use useEffect of componentDidMount and set that data on the client. I know there is a library that is fixing this issue, but it is using getInitialProps instead, and I would like to see if something can be done in this way.

解决方案

getServerSidedProps should be used if you need the data only while you're server-side rendering. But if you need the data there for both cases when the user starts from this page (where you fetch data on the server) as well as client-side navigates to the page, it would be better to use getInitialProps to fetch data (via redux-toolkit's createAsyncThunk).

Anyway, with both getServerSidedProps and getInitialProps you need to pass the server-side store to the to the client be the initial client store. You might want to consider using next-redux-wrapper for this task. You can find a nice example here.

Furthermore, you're missing usage of react-redux's connect to mapStateToProps and mapDispatchToProps.

I'm using next.js and react-redux with similar configuration to yours and I was struggling with all the boilerplate code required to get store data and dispatch actions. So I've created connect-initial-props to make it much easier to user getInitialProps to dispatch actions and consume state's data from redux store. You're welcome to take at the example on connect-initial-props Github.

这篇关于NextJS，在 getServerSideProps 中预加载 Redux 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！