質問編集履歴
4
App Routerについて追記。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Next.js 13でサーバー側で最新の情報を用いてHTMLをレンダリングし、かつポーリングして表示更新する
|
|
1
|
+
Next.js 13のApp Routerでサーバー側で最新の情報を用いてHTMLをレンダリングし、かつポーリングして表示更新する
|
test
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
3. APIをポーリングし、表示を更新する（実装済みだが、 `useEffect` を使うことでClient Componentになってしまう）。
|
|
8
8
|
|
|
9
9
|
### 前提
|
|
10
|
-
Next.js 13でWebアプリを開発していますが、上記の要件を満たす方法が分かりません。
|
|
10
|
+
Next.js 13のApp RouterでWebアプリを開発していますが、上記の要件を満たす方法が分かりません。
|
|
11
11
|
|
|
12
12
|
### 該当のソースコード
|
|
13
13
|
|
3
クロスポストについて追記。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
StackOverflowとのクロスポスト
|
|
1
|
+
回答を迅速に得るため、StackOverflowとのクロスポストを行っております。
|
|
2
|
+
https://ja.stackoverflow.com/questions/95322
|
|
2
3
|
|
|
3
4
|
### 実現したいこと
|
|
4
5
|
1. ページ単位で状態を共有する（実装済みだが、Next.jsの枝葉をClient Componentにして幹はServer Componentにするという原則に反してしまっているので、できれば解消したい）。
|
2
「試したこと」を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -103,6 +103,26 @@
|
|
|
103
103
|
|
|
104
104
|
フロントエンドです。Client Componentに指定しています。
|
|
105
105
|
|
|
106
|
+
### 試したこと
|
|
107
|
+
以下のように書き換えてみました。
|
|
108
|
+
|
|
109
|
+
```typescript:app/page.tsx
|
|
110
|
+
async function App() {
|
|
111
|
+
console.log('rendering App');
|
|
112
|
+
|
|
113
|
+
// const [items, setItems] = useState<QueueItem[]>([]);
|
|
114
|
+
let items = await fetch(`/api/streams`, { next: { revalidate: 10 } }).then(res => res.json()) as QueueItem[];
|
|
115
|
+
const [currentItemID, setCurrentItemID] = useState('');
|
|
116
|
+
const videoID = items.find(item => item.id === currentItemID)?.media.videoID;
|
|
117
|
+
|
|
118
|
+
return (
|
|
119
|
+
...
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
サーバーにおいてレンダリングされているようですが、 `TypeError: Failed to parse URL from /api/streams` というエラーが出ます。また、ブラウザ側で再描画とネットワークリクエストが無限ループします。
|
|
125
|
+
|
|
106
126
|
### 補足情報（FW/ツールのバージョンなど）
|
|
107
127
|
|
|
108
128
|
```json
|
1
「実現したいこと」に番号を振りました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
StackOverflowとのクロスポストです。
|
|
2
2
|
|
|
3
3
|
### 実現したいこと
|
|
4
|
-
|
|
4
|
+
1. ページ単位で状態を共有する（実装済みだが、Next.jsの枝葉をClient Componentにして幹はServer Componentにするという原則に反してしまっているので、できれば解消したい）。
|
|
5
|
-
|
|
5
|
+
2. ブラウザでページロード時に即座に最新の情報が表示されるようにするため、サーバー側で最新の情報を用いてHTMLをレンダリングする（必ずしも必要な機能ではないが、技術的チャレンジとして）。
|
|
6
|
-
|
|
6
|
+
3. APIをポーリングし、表示を更新する（実装済みだが、 `useEffect` を使うことでClient Componentになってしまう）。
|
|
7
7
|
|
|
8
8
|
### 前提
|
|
9
9
|
Next.js 13でWebアプリを開発していますが、上記の要件を満たす方法が分かりません。
|