Next.jsを用いてフロント開発を行っております。
ホスティング先はVercelを用いています。
下記コードのように、表示したいデータが詰まったjsonファイルをimportした時、
サーバ・フロント間での扱われ方、パフォーマンスに関する認識について質問させて下さい。
import datalist from '.master/datalist.json';
export default function Home() {
return (
<div className=''>
{datalist.map((data, index) => {
return <div key={index}>{data.name}</div>;
})}
</div>
);
}
試したこと
サイズが小さめのjsonと1mb程のjsonデータで比較検証し、
Lighthouseでレポートを確認したところ自身の理解度からは以下のような事が分かりました。
- jsonファイルサイズが増加するとPerformance項目が下がる
→ Time to Interactiveが著しく遅くなる
→ サーバレスポンス時間の上昇?
→ 上記のコードだと全データを展開しているのでDOMsizeでかすぎ!と警告
このことから、以下の認識について質問させて下さい。
質問したいこと
jsonデータはリクエストの度にサーバーから受け取っている認識で良いのでしょうか
・jsonデータは一体どこに置かれているのでしょうか。初回ロード(ユーザー)は読み込み時間が掛かるが、2回目以降はキャッシュが働いている認識で良いでしょうか。
・VercelのEdgeNetworkCacheが働き、他ユーザーのパフォーマンスも上昇する認識は合っていますか?
仮にデータが膨大なjsonファイルを用いる場合、
直接importして利用する運用はパフォーマンスの観点で不適切ですか?
この辺りについての理解をもっと深めたいのですが、
検索ワードやどういった用語を使えば関連する情報が得られるのか分からない為、ご教示頂きたいです。
また、私が持つ上記の認識により、「〇〇に関する知識が足りてないな」と感じた方がいらっしゃれば、その〇〇はなんでしょうか?そこが一番知りたいです。
よろしくお願いいたします。