Refresh React Server Component on Focus

Refresh a React Server Component whenever the window is focused.

Demo

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

// 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

Related course

Data fetching with React Server Components

See how this exciting new primitive simplifies your data-fetching code.

9 Lessons
1h 15m
Data fetching with React Server Components

Get our latest in your inbox.

Join our newsletter to hear about Sam and Ryan's newest blog posts, code recipes, and videos.