質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

538閲覧

[Next.js]件数・サイズの大きいデータの扱い方について

Casca

総合スコア6

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/07/03 11:53

編集2022/12/14 05:32

Nextjs+Vercelで個人的にWebサービスを開発しております。
イメージとしてはポケモン図鑑のようなデータカタログツールです。

データ件数が多く、今後もサイズが増える可能性のある性質のデータの扱い方に悩んでおります。
検索やデータ自体の更新の要件はなく、ただ表示用として利用するものです。

表示するデータは内容の更新頻度自体は低いため、現在はビルド時にスプレッドシートからデータを読み込み、jsonファイルとして生成したものをgetStaticPropsでシンプルにフロント側へ流す形を取っています。

TypeScript

1const Top: NextPage = (props) => { 2 const { data } = props; 3 return ( 4 <> 5 <div> 6 // データの表示処理 7 </div> 8 </> 9 ); 10}; 11 12export const getStaticProps: GetStaticProps = () => { 13 const jsonData = getData('./generated/hoge.json'); 14 return { 15 props: { 16 data: jsonData, 17 }, 18 }; 19};

質問したいこと

ただこのjsonファイルのサイズは現在500kbほど(データ件数として1000件以上)あり、
今後も件数は増える可能性があるものです。

データの更新頻度が低いこと、事前にビルドしたものを配信するだけなので高速である、という点を理由にSSGで流す方法を取っていますが、こういった、いわゆるマスタデータをSSGでフロントへ流すのは一般的に正しい手法なのでしょうか?

データ件数が少ないのであれば特に意識しなくても良さそうと感じでいますが、
今後データ件数が増えファイルの容量が増えることの懸念があるので、予め別の手法を取っておいた方が良いと思っています。

この手のデータを扱う場合、一般的にどのような方法を採用することが多いのでしょうか?
PrismaなどのORM利用を視野にいれるべきなのでしょうか。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問