Javascript 在运行时使用Next JS App Router在服务器组件中运行自定义函数

发布于03月07日

我具有调用函数getMyAge的以下服务器组件Home:

// app/page.tsx
import { getMyAge } from './utils/datetime';

export default function Home() {
  return (
    <Page>
      <Paragraph>I'm {getMyAge()} years old</Paragraph>
    </Page>
  );
}

// app/utils/datetime.ts
export function getMyAge() {
  const today = new Date();
  const birthDate = new Date(1997, 1, 17);

  const yearDifference = today.getFullYear() - birthDate.getFullYear();
  const monthDifference = today.getMonth() - birthDate.getMonth();
  const dayDifference = today.getDate() - birthDate.getDate();

  if (monthDifference < 0 || (monthDifference === 0 && dayDifference < 0)) {
    return yearDifference - 1;
  } else {
    return yearDifference;
  }
}

它在开发中运行得很好，但是在我为生产生成静态构建之后，getMyAge的结果没有改变.我看到，由于Side是静态生成的，所以该函数只在构建时运行.当用户请求页面时，如何使其在运行时运行？

谢谢.

通过查看Next Docs，我发现getServerSideProps可以做到这一点，但使用App Router的示例似乎都涉及到它们在Fetch API上的扩展的重新验证选项，这是我不需要的.有什么方法可以在不求助于客户端组件的情况下实现这一点吗？

// app/page.tsx export const dynamic = "force-dynamic"; // 👈🏽 import { getMyAge } from "./utils/datetime"; export default function Home() { return ( <Page> <Paragraph>I'm {getMyAge()} years old</Paragraph> </Page> ); }

Javascript 在运行时使用Next JS App Router在服务器组件中运行自定义函数

推荐答案

Javascript相关问答推荐

如何通过在提交时工作的函数显示dom元素？

使用json文件字符串来enum显示类型字符串无法按照计算的enum成员值的要求分配给类型号

使用javascript将Plotly Expandable Sparkline转换为HighCharter Plot在bslib卡中

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

屏幕右侧屏障上的产卵点""

如何将Cookie从服务器发送到用户浏览器

如何在ASP.NET JavaScript中使用Google Charts API仅对绘制为负方向的条形图移动堆叠条形图标签位置

TypeError：无法分解'；React2.useContext(...)'；的属性'；basename'；，因为它为空

如何将数据块添加到d3力有向图中？

如何在我的Next.js项目中.blob()我的图像文件？

为列表中的项目设置动画

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

背景动画让网站摇摇欲坠

Next.js无法从外部本地主机获取图像

有没有办法更改Chart.js 3.x.x中主要刻度的字体？

重新渲染过多(&Q).REACT限制渲染次数以防止无限循环.使用REACT下拉菜单时

有没有办法在R中创建一张具有多个色标的热图？

扩散运算符未按预期工作，引发语法错误

我想为我的Reaction项目在画布上加载图像/视频，图像正在工作，但视频没有

在ReactJS上挂载组件时获得多个身份验证请求