質問編集履歴
3
質問内容がよくわからなくなってしまったため変更を戻します
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[
|
|
1
|
+
[Next.js]件数・サイズの大きいデータの扱い方について
|
test
CHANGED
|
@@ -1,51 +1,44 @@
|
|
|
1
|
-
Next
|
|
1
|
+
Nextjs+Vercelで個人的にWebサービスを開発しております。
|
|
2
|
-
|
|
2
|
+
イメージとしてはポケモン図鑑のようなデータカタログツールです。
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
データ件数が多く、今後もサイズが増える可能性のある性質のデータの扱い方に悩んでおります。
|
|
5
|
-
|
|
5
|
+
検索やデータ自体の更新の要件はなく、ただ表示用として利用するものです。
|
|
6
|
+
|
|
7
|
+
表示するデータは内容の更新頻度自体は低いため、現在はビルド時にスプレッドシートからデータを読み込み、jsonファイルとして生成したものをgetStaticPropsでシンプルにフロント側へ流す形を取っています。
|
|
6
8
|
|
|
7
9
|
```TypeScript
|
|
8
|
-
|
|
10
|
+
const Top: NextPage = (props) => {
|
|
11
|
+
const { data } = props;
|
|
12
|
+
return (
|
|
13
|
+
<>
|
|
14
|
+
<div>
|
|
15
|
+
// データの表示処理
|
|
16
|
+
</div>
|
|
17
|
+
</>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
9
20
|
|
|
10
|
-
export
|
|
21
|
+
export const getStaticProps: GetStaticProps = () => {
|
|
22
|
+
const jsonData = getData('./generated/hoge.json');
|
|
11
|
-
return
|
|
23
|
+
return {
|
|
12
|
-
|
|
24
|
+
props: {
|
|
13
|
-
|
|
25
|
+
data: jsonData,
|
|
14
|
-
return <div key={index}>{data.name}</div>;
|
|
15
|
-
|
|
26
|
+
},
|
|
16
|
-
</div>
|
|
17
|
-
|
|
27
|
+
};
|
|
18
|
-
}
|
|
28
|
+
};
|
|
19
29
|
```
|
|
20
|
-
|
|
21
|
-
### 試したこと
|
|
22
|
-
|
|
23
|
-
サイズが小さめのjsonと1mb程のjsonデータで比較検証し、
|
|
24
|
-
Lighthouseでレポートを確認したところ自身の理解度からは以下のような事が分かりました。
|
|
25
|
-
|
|
26
|
-
- jsonファイルサイズが増加するとPerformance項目が大きく下がる
|
|
27
|
-
- Time to Interactiveが著しく遅くなる
|
|
28
|
-
- サーバーレスポンス時間の上昇?
|
|
29
|
-
- 上記のコードだと全データを展開しているのでDOMsizeでかすぎ！と警告
|
|
30
30
|
|
|
31
31
|
### 質問したいこと
|
|
32
32
|
|
|
33
|
+
ただこのjsonファイルのサイズは現在500kbほど（データ件数として１０００件以上）あり、
|
|
33
|
-
|
|
34
|
+
今後も件数は増える可能性があるものです。
|
|
34
35
|
|
|
35
|
-
|
|
36
|
+
データの更新頻度が低いこと、事前にビルドしたものを配信するだけなので高速である、という点を理由にSSGで流す方法を取っていますが、こういった、いわゆるマスタデータをSSGでフロントへ流すのは一般的に正しい手法なのでしょうか？
|
|
36
37
|
|
|
38
|
+
データ件数が少ないのであれば特に意識しなくても良さそうと感じでいますが、
|
|
37
|
-
|
|
39
|
+
今後データ件数が増えファイルの容量が増えることの懸念があるので、予め別の手法を取っておいた方が良いと思っています。
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
この手のデータを扱う場合、一般的にどのような方法を採用することが多いのでしょうか？
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
PrismaなどのORM利用を視野にいれるべきなのでしょうか。
|
|
42
|
-
検索ワードやどういった用語を使えば関連する情報が得られるのか分からない為、ご教示頂きたいです。
|
|
43
|
-
また、私が持つ上記の認識により、「〇〇に関する知識が足りてないな」と感じた方がいらっしゃれば、その〇〇はなんでしょうか？そこが一番知りたいです。
|
|
44
43
|
|
|
45
44
|
よろしくお願いいたします。
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
2
タグを追加
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
importしたjsonデータは一体どこから読み込まれるのでしょうか？関連する認識についてご教示頂きたいです。
|
|
1
|
+
[React]importしたjsonデータは一体どこから読み込まれるのでしょうか？関連する認識についてご教示頂きたいです。
|
test
CHANGED
|
File without changes
|
1
分からない点の深堀り結果と質問したいことの明確化
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
importしたjsonデータは一体どこから読み込まれるのでしょうか？関連する認識についてご教示頂きたいです。
|
test
CHANGED
|
@@ -1,45 +1,46 @@
|
|
|
1
|
-
Nextjs
|
|
1
|
+
Next.jsを用いて開発を行っております。
|
|
2
|
-
|
|
2
|
+
ホスティング先はVercelを用いています。
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
下記コードのように、表示したいデータが詰まったjsonファイルを直接importした時、
|
|
5
|
-
|
|
5
|
+
フロント・サーバー間でのパフォーマンスに関する認識について質問させて下さい。
|
|
6
|
-
|
|
7
|
-
表示するデータは内容の更新頻度自体は低いため、現在はビルド時にスプレッドシートからデータを読み込み、jsonファイルとして生成したものをgetStaticPropsでシンプルにフロント側へ流す形を取っています。
|
|
8
6
|
|
|
9
7
|
```TypeScript
|
|
8
|
+
import datalist from '.master/datalist.json';
|
|
9
|
+
|
|
10
|
-
|
|
10
|
+
export default function Home() {
|
|
11
|
-
const { data } = props;
|
|
12
11
|
return (
|
|
13
|
-
<>
|
|
14
|
-
<div>
|
|
15
|
-
|
|
12
|
+
<div className=''>
|
|
13
|
+
{datalist.map((data, index) => {
|
|
14
|
+
return <div key={index}>{data.name}</div>;
|
|
15
|
+
})}
|
|
16
|
-
|
|
16
|
+
</div>
|
|
17
|
-
</>
|
|
18
17
|
);
|
|
19
|
-
}
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
20
|
|
|
21
|
+
### 試したこと
|
|
22
|
+
|
|
23
|
+
サイズが小さめのjsonと1mb程のjsonデータで比較検証し、
|
|
21
|
-
|
|
24
|
+
Lighthouseでレポートを確認したところ自身の理解度からは以下のような事が分かりました。
|
|
25
|
+
|
|
22
|
-
|
|
26
|
+
- jsonファイルサイズが増加するとPerformance項目が大きく下がる
|
|
23
|
-
|
|
27
|
+
- Time to Interactiveが著しく遅くなる
|
|
24
|
-
props: {
|
|
25
|
-
|
|
28
|
+
- サーバーレスポンス時間の上昇?
|
|
26
|
-
},
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
|
|
29
|
+
- 上記のコードだと全データを展開しているのでDOMsizeでかすぎ！と警告
|
|
30
30
|
|
|
31
31
|
### 質問したいこと
|
|
32
32
|
|
|
33
|
-
ただこのjsonファイルのサイズは現在500kbほど（データ件数として１０００件以上）あり、
|
|
34
|
-
|
|
33
|
+
このことから、以下の認識について質問させて下さい。
|
|
35
34
|
|
|
36
|
-
データの
|
|
35
|
+
1. jsonデータはリクエストの度にサーバーから受け取っている認識で良いのでしょうか。jsonデータは一体どこに置かれているのでしょうか。
|
|
37
36
|
|
|
38
|
-
データ件数が少ないのであれば特に意識しなくても良さそうと感じでいますが、
|
|
39
|
-
|
|
37
|
+
2. 初回ロード(ユーザー)は読み込み時間が掛かるが、2回目以降はキャッシュが働いている認識で良いでしょうか。また、VercelのEdgeNetworkCacheが働き、他ユーザーのパフォーマンスも上昇する認識は合っていますか？
|
|
40
38
|
|
|
41
|
-
|
|
39
|
+
3. 仮にデータが膨大なjsonファイルを用いる場合、直接importして利用する運用はパフォーマンスの観点で不適切ですか？
|
|
40
|
+
|
|
42
|
-
|
|
41
|
+
この辺りについての理解をもっと深めたいのですが、
|
|
42
|
+
検索ワードやどういった用語を使えば関連する情報が得られるのか分からない為、ご教示頂きたいです。
|
|
43
|
+
また、私が持つ上記の認識により、「〇〇に関する知識が足りてないな」と感じた方がいらっしゃれば、その〇〇はなんでしょうか？そこが一番知りたいです。
|
|
43
44
|
|
|
44
45
|
よろしくお願いいたします。
|
|
45
46
|
|
|
@@ -47,3 +48,4 @@
|
|
|
47
48
|
|
|
48
49
|
|
|
49
50
|
|
|
51
|
+
|