Skip to main content
1 / 3

Next.js 13でサーバー側で最新の情報を用いてHTMLをレンダリングし、かつポーリングして表示更新する

teratailとのクロスポストです。

実現したいこと

  • ページ単位で状態を共有する(実装済みだが、Next.jsの枝葉をClient Componentにして幹はServer Componentにするという原則に反してしまっているので、できれば解消したい)。
  • ブラウザでページロード時に即座に最新の情報が表示されるようにするため、サーバー側で最新の情報を用いてHTMLをレンダリングする(必ずしも必要な機能ではないが、技術的チャレンジとして)。
  • APIをポーリングし、表示を更新する(実装済みだが、 useEffect を使うことでClient Componentになってしまう)。

前提

Next.js 13でWebアプリを開発していますが、上記の要件を満たす方法が分かりません。

該当のソースコード

import { QueueItem } from './types';

export default class Manager {
  static current = new LiveStreamManager();

  #items: QueueItem[] = [];

  private constructor() {
    this.fetchItems();
    setInterval(() => this.fetchItems(), 600 * 1000); // 10mins
  }

  getItems(): QueueItem[] {
    return this.#items;
  }

  async fetchItems() {
    ...
  }

フロントエンドで再生するアイテムを管理するサーバー側のクラスです。

import { NextResponse } from "next/server";

import Manager from "@/app/api/Manager";

export async function GET() {
  let manager = Manager.current;
  return NextResponse.json(manager.getItems());
}

APIです。

'use client';

import { useState, useEffect } from 'react';

import { QueueItem } from '@/app/api/types';

import Player from './components/Player';
import QueueList from './components/QueueList';

function App() {
  console.log('rendering App');

  const [items, setItems] = useState<QueueItem[]>([]);
  const [currentItemID, setCurrentItemID] = useState('');

  useEffect(() => {
    refresh();
    let timer = setInterval(refresh, 10000);
    return () => { clearInterval(timer); };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function refresh() {
    console.log('refresh');

    let items = await fetch(`/api/items`).then(res => res.json()) as QueueItem[];
    setItems(items);
    if (currentItemID === '' && items.length > 0) {
      setCurrentItemID(items[0].id);
    }
  }

  return (
    <div className="h-screen flex bg-slate-900 text-white text-sm">
      <Player
        className='grow h-full'
        videoID={currentItemID}
        onEnded={() => {
          ...
        }}
      />
      <QueueList
        items={items}
        currentQueueID={currentItemID}
        setQueueID={setCurrentItemID}
      />
    </div>
  );
}

export default App;

フロントエンドです。Client Componentに指定しています。

補足情報(FW/ツールのバージョンなど)

  "dependencies": {
    "next": "13.4.6",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }