Далее JS, предварительно загрузите данные Redux в getServerSideProps

Question

На основании этой информации из официальных документов Next JS они рекомендуют использовать getServerSidedProps и getStaticProps вместо getInitialProps.

Я хочу предварительно загрузить некоторые данные в состояние Redux на сервере.

note : я использую пакет @ redux / toolkit

Итак, у меня есть базовая c настройка магазина:

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>

Теперь вот проблема, с которой я сталкиваюсь

В файле индекса. 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: {} }     
}

Данные установить в хранилище на стороне сервера, однако, когда я нахожусь на клиенте, хранилище пусто. Кто-нибудь знает, как я могу предварительно загрузить данные на сервере? Я не хочу использовать useEffect для componentDidMount и установить эти данные на клиенте. Я знаю, что есть библиотека, которая решает эту проблему, но вместо этого она использует getInitialProps, и я хотел бы посмотреть, можно ли что-то сделать таким образом.

Answer 1

getServerSidedProps следует использовать, если вам нужны данные только во время рендеринга на стороне сервера. Но если вам нужны данные для обоих случаев, когда пользователь начинает с этой страницы (где вы выбираете данные на сервере), а также для перехода на страницу на стороне клиента, было бы лучше использовать getInitialProps для извлечения данных ( через redux-toolkit 's createAsyncThunk).

В любом случае, и с getServerSidedProps, и с getInitialProps необходимо передать хранилище на стороне сервера клиенту, который будет исходным хранилищем клиента. Возможно, вы захотите использовать next-redux-wrapper для этой задачи. Вы можете найти хороший пример здесь .

Кроме того, вам не хватает использования react-redux 'connect до mapStateToProps и mapDispatchToProps.

Я использую next.js и react-redux с такой же конфигурацией, как у вас, и я боролся со всем стандартным кодом, необходимым для получения данных хранилища и действий по отправке. Итак, я создал connect-initial-props , чтобы пользователю getInitialProps было намного проще отправлять действия и получать данные о состоянии из избыточного хранилища. Вы можете взять пример с connect-initial-props Github.