Next.js 13でAPIをポーリングして表示更新する

TL;DR SWRというライブラリを使う。

SWRはNext.jsのSSR(Server-Side Rendering)に対応しており、サーバーでpre-renderingが可能。

'use client'; // Client Componentにする

import useSWR from 'swr';
import type { SWRConfiguration } from 'swr';

import fetcher from '@/app/utils/fetcher';

type Props = {
  initialItems: Item[];
};

function App(props: Props) {
  const { initialItems } = props;

  // https://swr.vercel.app/ja/docs/typescript#generics
  let config: SWRConfiguration = {
    refreshInterval: 60_000, // 1 minute
    // fallbackDataでサーバー側でレンダリング(SSR)する際のデータを指定できる。
    // サーバーでレンダリングされたHTMLをブラウザが読み込んで表示するので、APIをリクエストする前に表示が完了する。
    // https://swr.vercel.app/ja/docs/with-nextjs#pre-rendering-with-default-data
    fallbackData: initialItems, 
  };
  let { data: items } = useSWR<Item[]>('/api/items', fetcher, config);

  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>{item.name}</div>
      )}
    </div>
  );
}

export default App;

fetcher の中身は fetch。

const fetcher = (input: any, init: any) => fetch(input, init).then(res => res.json())

export default fetcher;