teratailとのクロスポストです。
https://teratail.com/questions/m36tsrglghhmol
実現したいこと
- ページ単位で状態を共有する(実装済みだが、Next.jsの枝葉をClient Componentにして幹はServer Componentにするという原則に反してしまっているので、できれば解消したい)。
- ブラウザでページロード時に即座に最新の情報が表示されるようにするため、サーバー側で最新の情報を用いてHTMLをレンダリングする(必ずしも必要な機能ではないが、技術的チャレンジとして)。
- APIをポーリングし、表示を更新する(実装済みだが、
useEffect
を使うことでClient Componentになってしまう)。
前提
Next.js 13のApp Routerを用いて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に指定しています。
試したこと
以下のように書き換えてみました。
async function App() {
console.log('rendering App');
// const [items, setItems] = useState<QueueItem[]>([]);
let items = await fetch(`/api/streams`, { next: { revalidate: 10 } }).then(res => res.json()) as QueueItem[];
const [currentItemID, setCurrentItemID] = useState('');
const videoID = items.find(item => item.id === currentItemID)?.media.videoID;
return (
...
);
}
サーバーにおいてレンダリングされているようですが、 TypeError: Failed to parse URL from /api/streams
というエラーが出ます。また、ブラウザ側で再描画とネットワークリクエストが無限ループします。
補足情報(FW/ツールのバージョンなど)
"dependencies": {
"next": "13.4.6",
"react": "18.2.0",
"react-dom": "18.2.0"
}