'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
inpages/_app
. This does not opt-out pages withgetStaticProps
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);
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 |
---|