Reactjs 在Next.js中实现动态更改的服务器组件

// ./components/MyComponent.jsx

const Component = ({ data }) => {
  return <>
    {new Date().getMinutes() % 2 === 0 ? "Hi" : "Hello"}
  </>
}

export default Component

// ./layouts/PostLayout.tsx

import MyComponentfrom '@/components/MyComponent.jsx'
// ..

export default function PostLayout({ content, authorDetails, next, prev, children }: LayoutProps) {
  // ..
  
  return (
    <>
      // ..
      <MyComponent data={""} />
      // ..
    <>
  )
}
// ..

// versions
"next": "13.5.6",

// page.jsx

export const dynamic = 'force-dynamic';

export default function Page() {
  return <PostLayout />
}

// ./component/MyComponent.jsx
import { cookies, headers } from 'next/headers'
import { unstable_noStore as noStore } from 'next/cache'

const Component = ({ data }) => {
  let _ = cookies();
  // or
  let _ = headers();
  // or
  noStore();

  ...
}

Reactjs相关问答推荐

Tailwind不使用@apply classes构建，并强制使用类似于移动的viewport

FireBase未与Reaction应用程序连接

如何使我的代码可以接受我想要的每一个链接

获取类别和页面的参数

在 React 中，为什么不将组件和钩子结合起来呢？

如何使用 React 获取表单中的所有值？

有没有办法在 React Router v6 中的路由匹配上运行一些逻辑/功能？

使用jest如何覆盖对象的模拟？我正在使用`jest.mock()`来模拟对象，并希望 for each 测试用例覆盖模拟.

无法使axiosmockadapter正常工作

Firebase查询返回随机用户数据，而不是过滤后的用户数据

未处理的拒绝 (TypeError)：无法读取未定义的属性(读取协议)

React - 使用 useEffect 还是直接在 onChange 方法中更改值对性能最好？

Primereact 的日历组件在每个月 12 日之后使用非唯一键生成

React 测试库 - 如何断言异步函数之间的中间状态？

Next.js i18n 路由不适用于动态路由

Wordpress 插件在激活时创建一个 React Public 页面

如何使图标适合 react-bootstrap 中的行元素

MUI 卡组件上的文本未正确对齐

ReactJS：按钮启用禁用更改 colored颜色

Rtk 查询无效标签不使数据无效