Nextjs 的“OnThisDay”功能在运行时使用 getServerSideProps 和 Date.now()答案

【问题标题】："OnThisDay" feature with Nextjs using getServerSideProps with Date.now() at runtimeNextjs 的“OnThisDay”功能在运行时使用 getServerSideProps 和 Date.now()
【发布时间】：2022-07-18 03:50:32
【问题描述】：

我正在尝试使用 Nextjs 实现“OnThisDay”维基百科样式功能，显示当天发生的事件。为此，我有一个如下所示的函数：

const list = [{"dateOfDeath": "2000-01-01", "name": "X"},{"dateOfDeath": "2000-01-02", "name": "Y"]

const dateObj = new Date();
const currentDay =
  ('0' + (dateObj.getMonth() + 1)).slice(-2) +
  '-' +
  ('0' + dateObj.getDate()).slice(-2);

export default function GetToday() {
  return list.filter(
    (person) => person.dateOfDeath.slice(5) === currentDay
  );
}

然后我通过 getStaticProps 得到这个：

export const getStaticProps: GetStaticProps = async () => {
  const today = GetToday();
  return {
    props: {
      today
    },
    revalidate: 10
  };
};

这一切都很好，但是似乎 Date 对象是在构建时创建一次的，所以无论网站构建的日期如何，页面都会被卡住。我故意将 revalidate 设置为 10s 试图解决这个问题，但没有奏效。我也尝试改用getServerSideProps，但这也没有改变任何东西。我正在使用 Docker 部署站点，几乎使用 Nextjs 存储库的 Docker 模板。

有人知道在运行时创建一个新的 Date 对象的方法吗？

【问题讨论】：

尝试在GetToday函数中调用new Date()和currentDay逻辑。

标签： javascript node.js reactjs typescript next.js

【解决方案1】：

Nextjs 将在将页面提供给客户端之前对其进行编译，因此它不会在运行时显示该日期，并且使用 invalidate 来修复这是一个非常非常糟糕的解决方案，因为它完全破坏了进行缓存以提高性能的目的。

使用 react 中的 useEffect 之类的东西，以便您可以在客户端执行代码。 useEffect 中的任何内容都只会在 onComponentMount 中执行，因此它只会在 dom 渲染并加载到客户端浏览器中后执行，它永远不会执行服务器端。将该日期代码放在 useEffect 中，这样它只会在浏览器中执行。

你也可以使用getServerSideProps，它应该可以工作，但这是一个不好的解决方案，你不应该调用你的服务器，刷新你的页面并使缓存无效，每次你想得到今天的日期，那将是太可怕了……

另一件事是我不会使用这样的日期，它很难维护，很难阅读，下一个开发人员很难弄清楚那个日期到底在做什么，而且真的很难调试，而且很容易制作像 2 月 29 日这样的极端情况的错误。例如，在您的情况下，您有一个您只能在明年发现的错误，如果有人在去年年在完全相同的月份和日期去世，它会将他们包含在该数组中，因为它会匹配person.dateOfDeath.slice(5) === currentDay。如果您不想不断地考虑具有非常棘手的日期管理的所有可能的边缘情况，请使用像 luxon 这样的库。然后你可以做类似DateTime.fromISOString(user.dateOfDeath).hasSame('day', DateTime.utc() 这样的事情，你的代码也将更容易为未来的开发人员阅读和维护。也不要以这样的格式保存日期，将其存储为带有new Date().toISOString() 的 ISO 字符串，以 UTC 时间表示。根据语言/地区/区域设置，日期可以以数百种方式格式化，最好坚持使用日期的最佳标准。

【讨论】：