在服务器和客户端上渲染时应该如何处理日期字符串？

Question

我正在使用 NextJS 和luxon创建一个博客。

1. 当服务器呈现帖子时，我想在 HTML 中包含帖子创建日期，以便 Google 抓取工具拥有该信息。
2. 我还希望创建日期以适合最终用户的格式显示。 我正在使用luxon package ，它会自动格式化为用户的时区和语言环境

服务器不知道最终用户的请求来自哪里——我不想在 SSR 期间将日期格式化为用户的语言环境

...但是如果服务器呈现的内容和客户端呈现的内容之间存在差异，我会收到react-hydration-error

在服务器和客户端上呈现日期字符串的推荐方法是什么？

Answer 1

您可以格式化服务器的日期并将其作为道具传递给客户端，然后使用 luxon 将其再次格式化为您想要的格式。 使用此方法，您可以将 HTML 中的格式化日期用于 Google 爬虫和用户，两者收到的信息没有任何差异。 这也应该避免水合作用错误。

这是一个例子：

// server-side:
import { DateTime } from 'luxon';

export async function getServerSideProps() {
  const creationDate = DateTime.utc().toISO();

  return {
    props: {
      creationDate,
    },
  };
}

// client-side:
import { DateTime } from 'luxon';

const Post = ({ creationDate }) => {
  const formattedCreationDate = DateTime.fromISO(creationDate)
    .setLocale('en-US')
    .toLocaleString(DateTime.DATE_FULL);

  return (
    <>
      <p>{formattedCreationDate}</p>
    </>
  );
};

export default Post;