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

Posted 2023-02-22

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

【英文标题】：Next.js: page loaded before data fetching in getInitialProps()

【发布时间】：2021-08-06 18:45:49

【问题描述】：

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

转到本地主机：3000

重定向到登录页面

将 getInitialProps 中的用户数据获取到 Profile 组件中的 s-s-r

但是，在成功获取所有数据之前，应用程序会加载带有空白配置文件组件的主页。刷新页面后，我可以在 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;

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

【参考方案1】：

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

【讨论】：

感谢您的回答！这会是通过构建生产启动服务器进行测试的方式吗？

我认为在生产环境中测试它不会有什么坏处。如果您正在构建一个已经上线的网站，我建议您复制网站代码并创建一个额外的路径以便用户找不到它，然后在完成测试后将其删除。