每 X 秒重新渲染服务器组件

Question

我有一个从数据库读取的服务器组件：

import { db } from "@utils/database";

export async function UsersLayout() {
  let users = await db.query(...);
  // ...

  return (
    <ul>
      {users.map(user => 
        <li key={user.id}>{user.name}</li>
      )}
    </ul>
  )
}

如何让这个组件每 60 秒重新渲染一次？由于这是一个服务器组件，我无法使用

useEffect

和

setTimeout

...

我正在玩Nextjs.13

Answer 1

我用定期调用 router.refresh() 的

客户端组件

破解了它

'use client';
import { useRouter } from 'next/navigation';
import { FunctionComponent, PropsWithChildren, useEffect } from 'react';

const DEFAULT_REFRESH_INTERVAL = 10037; // ~10 seconds, a Prime number for less collisions
const MIN_REFRESH_INTERVAL = 2521; // ~2.5 seconds, a Prime number for less collisions

interface Props extends PropsWithChildren {
  interval: number;
}

/**
 * HOC for Next.js App Router to Refresh the Children component every given Interval
 * Actually it refreshes the current route, not the children component :)
 * @component RefreshEveryInterval
 * @param {number} interval - the interval in milliseconds
 */
const RefreshEveryInterval: FunctionComponent<Props> = ({ children, interval = DEFAULT_REFRESH_INTERVAL }) => {
  const router = useRouter();

  if (interval < MIN_REFRESH_INTERVAL) {
    interval = MIN_REFRESH_INTERVAL; // Prevent too frequent refreshes
  }

  useEffect(() => {
    const timer = setInterval(() => {
      router.refresh(); // Refresh the current route, so the children (and nearby components) will be refreshed
    }, interval);
    return () => {
      clearInterval(timer);
    };
  }, [interval, router]);

  return children;
};

export default RefreshEveryInterval;