javascript - 为什么我们在使用带有 Next.js 的 SSR 为客户端预渲染数据时需要 JSON.stringify(data)

Question

我试图理解为什么我们需要 JSON.stringify(data) 在使用getServerSideProps(context)with时为客户端预渲染数据Next.js。我还在阅读 react -query 文档（链接- 安全注意：使用 JSON.stringify 序列化数据会使您面临 XSS 漏洞的风险），使用 JSON.stringify() 不是最佳实践，因为它不是转义 HTML 标签，我们最好使用 serialize-javascript npm 包。关联

这是我所指的代码：

export async function getServerSideProps(context) {
  // const { req, res } = context;
  const { appToken } = nookies.get(context);
  let isAdmin = false;

  const categoryList = async () => {
    const result = await listCategory();
    // return JSON.stringify(result);
    return serialize(result, { isJSON: true });
  };

  try {
    const { email } = await admin.auth().verifyIdToken(appToken);
    const { role } = await currentUser(email);

    if (role === 'admin') isAdmin = true;

    // Using Hydration
    const queryClient = new QueryClient();
    await queryClient.prefetchQuery('categoryList', categoryList);

    return {
      props: {
        token: appToken,
        isAdmin: isAdmin,
        dehydratedState: dehydrate(queryClient),
      },
    };
  } catch (error) {
    console.log(error);
    if (error) {
      return {
        // notFound: true,
        redirect: {
          destination: '/login',
          permanent: false,
        },
      };
    }
  }
}

标签： javascriptreactjsnext.jsreact-query