Sign inBuy now

Refresh React Server Component on Focus

Refresh a React Server Component whenever the window is focused.

refresh-rsc-on-focus.buildui.com

A <RefreshOnFocus /> component that can be dropped into any React Server Component in a Next.js app, causing it to refresh whenever the browser window is focused.

The cards on this page use a key with their dynamic data to run a CSS animation whenever their data changes.

Code

// src/app/components/refresh-on-focus.tsx
"use client";

import { useRouter } from "next/navigation";
import { useEffect } from "react";

export function RefreshOnFocus() {
  const { refresh } = useRouter();

  useEffect(() => {
    const onFocus = () => {
      refresh();
    };

    window.addEventListener("focus", onFocus);

    return () => {
      window.removeEventListener("focus", onFocus);
    };
  }, [refresh]);

  return null;
}

Usage:

// src/app/page.tsx
import { RefreshOnFocus } from "./refresh-on-focus";

export default function Home() {
  let date = new Date();

  return (
    <div>
      <p>This component was rendered at {date.toString()}</p>
      <RefreshOnFocus />
    </div>
  );
}

Libraries used