'Is it possible to generate static pages in nextjs when using redux-saga?

Warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app. This does not opt-out pages with getStaticProps

I tried different options, but I can’t achieve static page generation, even if I take out the functionality I need from getInitialProps from_app, then wrapping it in withRedux, I still get it in the end. I tried with this - https://github.com/kirill-konshin/next-redux-wrapper - but could not get the result, I assume that this is because of the redux-saga and the whole application will use getInitialProps

/store.js

const ReduxStore = (initialState /*, options */) => {
  const sagaMiddleware = createSagaMiddleware();
  const middleware = [sagaMiddleware];

  const composeEnhancers =
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
            // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
        }) : compose;
    
  const enhancer = composeEnhancers(
    applyMiddleware(...middleware)
    // other store enhancers if any
  );

  const store = createStore(
    rootReducer, 
    initialState, 
    enhancer
  );

  store.runSaga = () => {
    // Avoid running twice
    if (store.saga) return;
    store.saga = sagaMiddleware.run(saga);
  };

  store.stopSaga = async () => {
    // Avoid running twice
    if (!store.saga) return;
    store.dispatch(END);
    await store.saga.done;
    store.saga = null;
    // log('Stop Sagas');
  };

  store.execSagaTasks = async (ctx, tasks) => {
    // run saga
    await store.runSaga();
    // dispatch saga tasks
    tasks(store.dispatch);
    // Stop running and wait for the tasks to be done
    await store.stopSaga();
    // Re-run on client side
    if (!ctx.isServer) {
        store.runSaga();
    }
  };

  store.runSaga();

  return store;
};

export default ReduxStore;

//_app.js

import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import App from 'next/app';

class MyApp extends App {
  render() {
    const {Component, pageProps, store} = this.props;

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

export default withRedux(makeStore)(MyApp);

enter image description here

Has anyone experienced this or have any ideas? I will be grateful for any help



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source