<p dir="auto">I am using Redux-saga to manage my states and to manage my API calls. My page renders properly on Server side and correct html is sent to client.<br>
The issue here is on client side my page renders again and the state on client side seems to be different from that of server.</p>
<p dir="auto">In my project i have multiple containers and components and i am combining my reducers and sagas.<br>
<strong>The Code Is as Follows:</strong></p>
<p dir="auto"><strong>Store</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { createStore, applyMiddleware, compose } from 'redux';
import withRedux from 'next-redux-wrapper';
import thunkMiddleware from 'redux-thunk';
import { fromJS } from 'immutable';

import nextReduxSaga from 'next-redux-saga';
import createSagaMiddleware from 'redux-saga';
import mainSagas from './sagas';
import reducer, { initialState } from './reducers';

const sagaMiddleware = createSagaMiddleware()

export function configureStore (state = initialState) {
    const middlewares = [
      sagaMiddleware,
      thunkMiddleware,
    ];
    const store = createStore(
      reducer,
      fromJS(state),
      compose(applyMiddleware(...middlewares)),
    );

    store.sagaTask = sagaMiddleware.run(mainSagas);
    return store
}

export function withReduxSaga (BaseComponent) {
  return withRedux(configureStore)(nextReduxSaga(BaseComponent))
}
"><pre class="notranslate"><code class="notranslate">import { createStore, applyMiddleware, compose } from 'redux';
import withRedux from 'next-redux-wrapper';
import thunkMiddleware from 'redux-thunk';
import { fromJS } from 'immutable';

import nextReduxSaga from 'next-redux-saga';
import createSagaMiddleware from 'redux-saga';
import mainSagas from './sagas';
import reducer, { initialState } from './reducers';

const sagaMiddleware = createSagaMiddleware()

export function configureStore (state = initialState) {
    const middlewares = [
      sagaMiddleware,
      thunkMiddleware,
    ];
    const store = createStore(
      reducer,
      fromJS(state),
      compose(applyMiddleware(...middlewares)),
    );

    store.sagaTask = sagaMiddleware.run(mainSagas);
    return store
}

export function withReduxSaga (BaseComponent) {
  return withRedux(configureStore)(nextReduxSaga(BaseComponent))
}

</code></pre></div>
<p dir="auto"><strong>Reducers.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { combineReducers } from 'redux'
import homeReducer, { initialState as homeState } from 'containers/Home/reducer';
import rootReducer, { initialState as rootState } from 'containers/Root/reducer';
import aboutUsReducer, { initialState as aboutUsState } from 'containers/AboutUs/reducer';
import contactUsReducer, { initialState as contactUsState } from 'containers/ContactUs/reducer';
import portfoliosReducer, { initialState as portfoliosState } from 'containers/Portfolios/reducer';
import portfolioReducer, { initialState as portfolioState } from 'containers/Portfolio/reducer';
import { fromJS } from 'immutable';

export const intitialState = fromJS({
  home: homeState,
  root: rootState,
  aboutUs: aboutUsState,
  contactUs: contactUsState,
  portfolios: portfoliosState,
  portfolio: portfolioState
});

export default combineReducers({
  home: homeReducer,
  root: rootReducer,
  aboutUs: aboutUsReducer,
  contactUs: contactUsReducer,
  portfolios: portfoliosReducer,
  portfolio: portfolioReducer,
})
"><pre class="notranslate"><code class="notranslate">import { combineReducers } from 'redux'
import homeReducer, { initialState as homeState } from 'containers/Home/reducer';
import rootReducer, { initialState as rootState } from 'containers/Root/reducer';
import aboutUsReducer, { initialState as aboutUsState } from 'containers/AboutUs/reducer';
import contactUsReducer, { initialState as contactUsState } from 'containers/ContactUs/reducer';
import portfoliosReducer, { initialState as portfoliosState } from 'containers/Portfolios/reducer';
import portfolioReducer, { initialState as portfolioState } from 'containers/Portfolio/reducer';
import { fromJS } from 'immutable';

export const intitialState = fromJS({
  home: homeState,
  root: rootState,
  aboutUs: aboutUsState,
  contactUs: contactUsState,
  portfolios: portfoliosState,
  portfolio: portfolioState
});

export default combineReducers({
  home: homeReducer,
  root: rootReducer,
  aboutUs: aboutUsReducer,
  contactUs: contactUsReducer,
  portfolios: portfoliosReducer,
  portfolio: portfolioReducer,
})

</code></pre></div>
<p dir="auto"><strong>Sagas.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { fork } from 'redux-saga/effects'
import homeSagas from 'containers/Home/sagas';
import rootSagas from 'containers/Root/sagas';
import aboutUsSagas from 'containers/AboutUs/sagas';
import contactUsSagas from 'containers/ContactUs/sagas';
import portfoliosSagas from 'containers/Portfolios/sagas';
import portfolioSagas from 'containers/Portfolio/sagas';

export default function* mainSagas() {
    yield [
      fork(homeSagas),
      fork(rootSagas),
      fork(aboutUsSagas),
      fork(contactUsSagas),
      fork(portfoliosSagas),
      fork(portfolioSagas),
    ]
  }
  "><pre class="notranslate"><code class="notranslate">import { fork } from 'redux-saga/effects'
import homeSagas from 'containers/Home/sagas';
import rootSagas from 'containers/Root/sagas';
import aboutUsSagas from 'containers/AboutUs/sagas';
import contactUsSagas from 'containers/ContactUs/sagas';
import portfoliosSagas from 'containers/Portfolios/sagas';
import portfolioSagas from 'containers/Portfolio/sagas';

export default function* mainSagas() {
    yield [
      fork(homeSagas),
      fork(rootSagas),
      fork(aboutUsSagas),
      fork(contactUsSagas),
      fork(portfoliosSagas),
      fork(portfolioSagas),
    ]
  }
  
</code></pre></div>
<p dir="auto"><strong>index.js  (Landing Page)</strong><br>
In the Saga i simply make the API call and set the data in the state. It is working fine</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react';
import HomeContainer from 'containers/Home';
import { withReduxSaga } from 'store'
import {
  getSettings,
  getAboutUs,
  getTeam,
  getServices,
  getPortfolio,
  getPortfolioSettings,
  getTestimonials
} from 'containers/Home/actions';

class Home extends React.Component {

  static async getInitialProps({ store }) {
    await store.dispatch(getSettings())
    await store.dispatch(getAboutUs())
    await store.dispatch(getTeam())
    await store.dispatch(getServices())
    await store.dispatch(getPortfolio())
    await store.dispatch(getPortfolioSettings())
    await store.dispatch(getTestimonials())
  }

	render() {
		return (
      &lt;HomeContainer /&gt;
		);
	}
}

export default withReduxSaga(Home)
"><pre class="notranslate"><code class="notranslate">import React from 'react';
import HomeContainer from 'containers/Home';
import { withReduxSaga } from 'store'
import {
  getSettings,
  getAboutUs,
  getTeam,
  getServices,
  getPortfolio,
  getPortfolioSettings,
  getTestimonials
} from 'containers/Home/actions';

class Home extends React.Component {

  static async getInitialProps({ store }) {
    await store.dispatch(getSettings())
    await store.dispatch(getAboutUs())
    await store.dispatch(getTeam())
    await store.dispatch(getServices())
    await store.dispatch(getPortfolio())
    await store.dispatch(getPortfolioSettings())
    await store.dispatch(getTestimonials())
  }

	render() {
		return (
      &lt;HomeContainer /&gt;
		);
	}
}

export default withReduxSaga(Home)

</code></pre></div>
<p dir="auto">I am using 'Reselect' to select the data from state.<br>
<strong>Selector.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { createSelector } from 'reselect';
const selectHomeState = () =&gt; (state) =&gt; state.home;

const selectSettings = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Settings')
);

const selectGetSettingsStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getSettingsStatus')
);

const selectAboutUs = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('AboutUs')
);

const selectGetAboutUsStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getAboutUsStatus')
);

const selectTeam = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Team')
);

const selectGetTeamStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getTeamStatus')
);

const selectServices = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Services')
);

const selectGetServiceStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getServicesStatus')
);

const selectTestimonials = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Testimonials')
);

const selectGetTestimonialsStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getTestimonialsStatus')
);

const selectPortfolios = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Portfolios')
);

const selectGetPortfoliosStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getPortfoliosStatus')
);

const selectPortfolioSettings = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('PortfolioSettings')
);

const selectGetPortfolioSettingsStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getPortfolioSettingsStatus')
);

export {
  selectSettings,
  selectGetSettingsStatus,
  selectAboutUs,
  selectGetAboutUsStatus,
  selectTeam,
  selectGetTeamStatus,
  selectServices,
  selectGetServiceStatus,
  selectTestimonials,
  selectGetTestimonialsStatus,
  selectPortfolios,
  selectGetPortfoliosStatus,
  selectPortfolioSettings,
  selectGetPortfolioSettingsStatus
};
"><pre class="notranslate"><code class="notranslate">import { createSelector } from 'reselect';
const selectHomeState = () =&gt; (state) =&gt; state.home;

const selectSettings = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Settings')
);

const selectGetSettingsStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getSettingsStatus')
);

const selectAboutUs = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('AboutUs')
);

const selectGetAboutUsStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getAboutUsStatus')
);

const selectTeam = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Team')
);

const selectGetTeamStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getTeamStatus')
);

const selectServices = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Services')
);

const selectGetServiceStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getServicesStatus')
);

const selectTestimonials = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Testimonials')
);

const selectGetTestimonialsStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getTestimonialsStatus')
);

const selectPortfolios = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('Portfolios')
);

const selectGetPortfoliosStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getPortfoliosStatus')
);

const selectPortfolioSettings = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('PortfolioSettings')
);

const selectGetPortfolioSettingsStatus = () =&gt; createSelector(
  selectHomeState(),
  (homeState) =&gt; homeState.get('getPortfolioSettingsStatus')
);

export {
  selectSettings,
  selectGetSettingsStatus,
  selectAboutUs,
  selectGetAboutUsStatus,
  selectTeam,
  selectGetTeamStatus,
  selectServices,
  selectGetServiceStatus,
  selectTestimonials,
  selectGetTestimonialsStatus,
  selectPortfolios,
  selectGetPortfoliosStatus,
  selectPortfolioSettings,
  selectGetPortfolioSettingsStatus
};

</code></pre></div>
<p dir="auto">When i reload the page my server side rendered page is displayed and then with a flicker all data is lost. And page without data is displayed. When i do view page source i can see the correct html sent from the server.</p>
<p dir="auto">I could not figure out the issue. Any help in this regard will be appreciated.</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<h2 dir="auto">Current Behavior</h2>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>


<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.1.4</td>
</tr>
<tr>
<td>node</td>
<td>&gt;=6</td>
</tr>
<tr>
<td>OS</td>
<td>win 10</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">I would like to get the path to the static folder.</p>
<p dir="auto">Such a function / variable is built-in in other frameworks like Laravel: <a href="https://laravel.com/docs/6.x/helpers#method-public-path" rel="nofollow">https://laravel.com/docs/6.x/helpers#method-public-path</a></p>
<h2 dir="auto">What I tried</h2>
<p dir="auto">I tried to get it with <code class="notranslate">__dirname</code> or <code class="notranslate">./</code> or <code class="notranslate">process.cwd()</code>, it works but the command depends either on the location of the file containing it or the location where the script is executed.</p>
<p dir="auto">Hence, this is not convenient, because I have to modify my command if I move my file or execute the script from another place. For example, my app works locally but not on production using Now.</p>