Next.js：在 getInitialProps() 中获取数据之前加载的页面

Question

我一直在使用 redux-saga 开发 next.js 项目。我想在每次页面加载之前获取数据，所以我在 next.js 中使用 getInitialProps。我对应用程序的期望行为是

1. 转到本地主机：3000

2. 重定向到登录页面

3. 将 getInitialProps 中的用户数据获取到 Profile 组件中的 SSR

但是，在成功获取所有数据之前，应用程序会加载带有空白配置文件组件的主页。刷新页面后，我可以在 Profile 组件中看到数据。

这是我的 _app.js

MyApp.getInitialProps = async (context) => {
  const keycloak = Keycloak(context.ctx.req);

  const token = keycloak.token

  const { ctx, Component } = context;
  let pageProps = {};
  //const state = ctx.store.getState();
  if (tokenStr && tokenStr.length > 0) {
      ctx.store.dispatch({
          type : LOAD_USER_REQUEST,
          data: token
      })

  }
  ctx.store.dispatch(END);
  await ctx.store.sagaTask.toPromise();
  return {
    cookies: parseCookies(context.ctx.req),
    token: keycloak.token,
  };
};

这是我的 userReducer.js

const reducer = (state = initialState, action) => produce(state, (draft) => {
  switch (action.type) {
    case LOAD_USER_REQUEST:
      draft.loadUserInfoLoading = true;
      draft.loadUserInfoError = null;
      draft.loadUserInfoDone = false;
      break;
    case LOAD_USER_SUCCESS:
      draft.loadUserInfoLoading = false;
      draft.userInfo.data = action.data;
      draft.loadUserInfoDone = true;
      break;
    case LOAD_USER_ERROR:
      draft.loadUserInfoLoading = false;
      draft.loadUserInfoError = action.error;
      break;

    default:
      break;
  }
});

export default reducer;

如果数据未完全获取，如何防止我的应用程序加载页面？

Answer 1

这只会在您使用本地主机时发生，部署网站并查看问题是否仍然存在。