NextJS + Redux Saga + SSR

// store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

export default store;

// pages/_app.js
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import store from '../store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default withRedux(store)(MyApp);

// pages/index.js
import { useDispatch } from 'react-redux';
import { fetchData } from '../actions';

function HomePage() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  // ...
}

// pages/index.js
import { useSelector } from 'react-redux';

function HomePage({ initialData }) {
  const data = useSelector(state => state.data);

  // 使用initialData初始化Redux状态
  useEffect(() => {
    if (initialData) {
      dispatch(setData(initialData));
    }
  }, [initialData, dispatch]);

  // ...
}

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      initialData: data,
    },
  };
}

export default HomePage;