服务器端渲染：基于API响应的渲染组件

Question

我通过以下代码使同构应用与express反应：

async function action({ fetch, socket }) {
    
  const resp = await fetch('/graphql', {
    body: JSON.stringify({
      query: '{duel{id,round_id,status,players{user_id,username,rank}}}',
    }),
  });
  const { data } = await resp.json();
  if (!data) throw new Error('Failed to load the battle data.');
  const { duel } = data;
  if (duel && duel.status === 'WAITING') {
    return {
      component: (
        <Layout>
          <WaitRoom duel={duel} />
        </Layout>
      ),
    };
  }

  return {
    title: 'Battle Area',
    chunks: ['battleArea'],
    component: (
      <Layout>
        <BattleArea socket={socket} />
      </Layout>
    ),
  };
}

export default action;

我的客户端出现错误的问题：

Warning: Text content did not match. Server: "Player 1Time to battle!Player 2" Client: "Waiting Room"
    in div (at WaitRoom.js:17)

知道我在做什么错吗？ 如何根据API响应呈现组件？