使用 getInitialProps 在 Next JS 中将值从服务器端传递到客户端答案

【问题标题】：Pass value from server side to client side in Next JS using getInitialProps使用 getInitialProps 在 Next JS 中将值从服务器端传递到客户端
【发布时间】：2020-07-05 01:35:56
【问题描述】：

我正在使用 nextJS 构建一个应用程序。在 server/index.ts 中，我有：

expressApp.get('/', (req: express.Request, res: express.Response) => {
    const parsedUrl = parse(req.url, true);
    const { query } = parsedUrl;
    let username: string | undefined;
    if (process.env.STAGE !== 'local') {
      username = getUsername(req)?.toString();
    }
    return nextApp.render(req, res, '/', {...query, loggedInUser: username});
  });

在我的主页（路径为“/”）中，我通过执行以下操作自动定向到路径“/pageone”：

const Home = () => {
  const router = useRouter();

  useEffect(() => {
    router.push('/pageone', undefined, { shallow: true });
  }, []);

  return <PageOne />;
};

Home.getInitialProps = async (ctx: NextPageContext): Promise<{ username : string | string[] }> => {
  const query = ctx.query;
  return {
    username: query.loggedInUser? query.loggedInUser : 'testUser'
  };
};

export default Home;

我在我构建的每个页面中都需要这个用户名变量，我如何将它传递给每个页面（例如 pageone）？

【问题讨论】：

根据你的需要，我推荐 redux (next-redux-wrapper) 或 context。有 redux 示例here。请注意，自定义 _app.js 中的 getInitialProps 会选择退出自动静态优化并渲染整个应用程序（在解决请求之前，用户将看到一个空白页面）。因此，我建议在 componentDidMount 中执行单个 fetch 请求，将结果保存到 redux/context 并加载占位符骨架，直到请求解决。

标签： reactjs typescript next.js

【解决方案1】：

您可以将此用户名变量附加到res.locals，这是它的目的。

然后访问 getInitialProps ctx 的 res.locals。

// server.ts

// this express middleware will attach username to res.locals.username;
expressApp.use((req, res, next) => {
   res.locals = res.locals || {};

  if (process.env.STAGE !== 'local') {
    res.locals.username = getUsername(req)?.toString();
  }
  next();
});

expressApp.get('/', (req: express.Request, res: express.Response) => {
  const parsedUrl = parse(req.url, true);
  const {query} = parsedUrl;

  return nextApp.render(req, res, '/', query);
});

然后，您可以在getInitialProps 中从服务器端redirect，而不是将这个值传递给客户端。

// Home.tsx

const Home = () => {
  return <PageOne />;
};

Home.getInitialProps = async ({res}: NextPageContext): Promise<{ username : string | string[] }> => {

  if(res.locals.username === 'bla') {
    return res.redirect(301, '/pageone');
    // -----------^ will redirect at server side.
  }
};

export default Home;

【讨论】：