在服務器和客戶端上渲染時應該如何處理日期字符串？

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;