如何在不使用 useEffect 或动态导入的情况下避免日期字符串上的水合错误？

Question

使用服务器组件时，我的页面内容加载速度要快得多，我想避免使用 useEffect 或动态导入来处理日期字符串。有没有办法解决这个问题并避免水合错误而不诉诸 useEffect 或动态导入？

FX。 Supabase 日期：

2023-07-18 17:34:59.293312+00

  const postDate: string = parseDate(post.created_at);

  <span>{postDate}</span>

日期解析：

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

export function parseDate(date: Post["created_at"]): string {
 dayjs.extend(relativeTime);
 const xParsedDate = dayjs(date);

 const diffInMs = dayjs().diff(xParsedDate);
 const diffInMin = dayjs().diff(xParsedDate, "minute");
 const diffInHours = dayjs().diff(xParsedDate, "hour");
 const diffInDays = dayjs().diff(xParsedDate, "day");

 let parsedDate = "";

 if (diffInMs < 60000) {
    parsedDate = dayjs().to(xParsedDate);
  } else if (diffInMin < 60) {
    parsedDate = xParsedDate.fromNow();
  } else if (diffInHours < 24) {
    parsedDate = xParsedDate.fromNow();
  } else if (diffInDays < 365) {
    parsedDate = xParsedDate.format("D MMMM");
  } else {
    parsedDate = xParsedDate.format("D MMMM YYYY");
  }

 return parsedDate;
}

Answer 1

我知道如何解决这个问题，我会在这里解释一下