next.js 在服务器和客户端上呈现日期字符串时应如何处理?

0md85ypi  于 2023-02-04  发布在  其他
关注(0)|答案(1)|浏览(182)

我正在使用NextJS和luxon创建一个博客。
1.我希望在服务器呈现帖子时在HTML中包含帖子创建日期,以便Google爬虫拥有该信息。
1.我还希望创建日期以适合最终用户的格式显示。我使用的是luxon包,它可以自动格式化为用户的时区和区域设置
服务器不知道最终用户的请求来自何处-我不想在SSR期间将日期格式化为用户的区域设置
...但如果服务器呈现的内容与客户端呈现的内容之间存在差异,则会得到react-hydration-error
在服务器和客户端上呈现日期字符串的推荐方法是什么?

ncecgwcz

ncecgwcz1#

你可以格式化服务器的日期并将其作为一个 prop 传递给客户端,然后使用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;

相关问题