How to hydrate the store on first SSR page load with sagas without using getInitialProps

What I look forward to is to get rid of getInitialProps in _app.js in order to remove my custom server and use static opt.

There is one single problem left for me to deal with and I am kind of stuck. I use Next + Redux + Saga. Usually what I was doing is to compose getInitialProps from pages to _app.js and then render everything as it was normal before the fancy getServer and getStaticProps. I now figured everything out to get rid of getInitialProps in _app but here is the problem:

_app.js

// In my _app.js I have a custom HoC that wraps my App component

const MyApp = ({ Component, nonce, pageProps = {} }) => { ... }

MyApp.getInitialProps = async ({ Component, ctx }) => { ... };

export default withReduxSaga(appWithTranslation(MyApp));

withReduxSaga HoC

const withReduxSaga = (AppComponent) => {
  const WithReduxSaga = ({ store, ...restProps }) => {
    return (
      <Provider {...{ store }}>
        <AppComponent {...restProps} />
      </Provider>
    );
  };



  WithReduxSaga.getInitialProps = async (pipedProps) => {
    const { isServer, store, req } = pipedProps.ctx;

    if (isServer) {
      const {
        headers: { 'user-agent': ua },
      } = req;


        // Here is the juicy part:
        // I dispatch (store.execTasks) some basic server side actions on first page load in order to hydrate my store with some 
        // general pageProps in order to SSR the proper page to the client
        // "proper page" means for example:
        // Check whether the client is logged in => SSR the clients prices 
        // Set some layout params 
        // Set the right currency 
        
        // All these actions need to be executed only once prior first page load render on the client's side
        // UX would be weird if you had to reload the prices after the pages already loaded
        // SEO would not properly work if you load the prices on the client's side
        // I preset some layout variables in order to avoid elements flashing around

      store.execTasks([
        ...[CHANGE_CURRENCY, CHECK_AUTHORIZATION].map(prepareCookieActions(pipedProps.ctx)),
        currenciesListRequested(),
        addScreenResolution(isMobile({ ua, tablet: true }) ? [0, 0] : [HEADER_COLLAPSE_WIDTH, 0]),
      ]);
    }

    // Accordingly get all the page props via _app.js afterwards
     
    const pageProps = await AppComponent.getInitialProps?.(pipedProps);

    // Stop the sagas if not already stopped

    if (isServer) await store.stopSagas();

    return pageProps;
  };

  return withRedux(createStore)(WithReduxSaga);
};

export default withReduxSaga;

Ultimately the question is:

How is it possible to hydrate the store within SSR on the first page load without using getInitialProps in the _app.js?

[kirill-konshin]

How is it possible to hydrate the store within SSR on the first page load without using getInitialProps in the _app.js?

You can use per-page approach. W/o wrapping the _app. App itself may not call any lifecycle methods, just provide the top level wrapper. See examples.

[mercteil]

Yup, there is simply no way, because there shall not be getInitialProps.

This is by design of Next.js as far as I understood.

There is a need of lifecycle methods within _app.js (not getInitialProps).

EDIT:

Actually there is a way, will follow up asap