Next.jsにおける動的レンダリングと静的レンダリング

素晴らしい成果です！データの取得とユーザーへの表示に成功しました。しかし、ここで問題が発生しています。この問題は、ダッシュボードが静的であることに起因しており、データが更新されてもアプリケーションには反映されません。

ここで、静的レンダリングと動的レンダリングの概念について詳しく見ていきましょう。

静的レンダリング

静的レンダリングとは、ユーザーがリクエストする前にコンテンツを準備し表示することを指します。これは、パーティーの前にサンドイッチをたくさん作っておくようなものです。

例

ピクニックを開催すると想像してください。ゲストが到着してからサンドイッチを作るのではなく、事前にたくさんのサンドイッチを用意してテーブルに並べておきます。人々が来たとき、すぐに用意されたサンドイッチを取ることができます。これにより、全員が素早く簡単に食事を楽しめます。

利点

• 高速なウェブサイト：用意されたサンドイッチのように、事前に準備されたコンテンツはユーザーに素早く簡単に提供できます；
• サーバーの負荷軽減：すべてが事前に準備されているため、サーバーは到着した人ごとにサンドイッチ（コンテンツ）を作る必要がありません；
• 検索エンジンでの評価向上：検索エンジンは、事前に用意されたコンテンツを理解しやすく、整理されたピクニックテーブルのように評価しやすくなります。

ユースケース

静的レンダリングは、静的なブログ記事や商品ページなど、コンテンツがほとんど変わらず、すべてのユーザーに同じ内容を提供する場合に最適です。

動的レンダリング

動的レンダリングとは、ユーザーのリクエストごとにその場でコンテンツを生成すること。 レストランでシェフが各顧客のためにオーダーメイドの料理を作るようなものです。

例

レストランでシェフが顧客の注文に応じて料理を作り、出来立てを提供するイメージです。これは、各ユーザーがページを訪れるたびにコンテンツが生成される動的レンダリングと同じです。

利点

• リアルタイム更新: シェフが新鮮な食材で料理を作るように、動的レンダリングではリアルタイムまたは頻繁に更新されるデータを表示可能；
• パーソナライズされたコンテンツ: シェフが顧客の好みに合わせて料理を作るように、ダッシュボードやユーザープロフィールなど、個別に最適化されたコンテンツの表示に最適；
• ユーザー固有情報へのアクセス: シェフが料理前に顧客の好みを聞くように、動的レンダリングではクッキーやURL検索パラメータなど、各ユーザー固有の情報にアクセス可能。

ユースケース

動的レンダリングは、データが頻繁に変化するアプリケーションや、パーソナライズされたコンテンツが重要な場合（例：ソーシャルメディアのフィードやリアルタイムダッシュボード）に有効です。

プロジェクトに戻る

本アプリでは、常に最新情報を表示することを重視します。

@vercel/postgresを使用する場合、キャッシュルールは事前に定義されていないため、データの扱い方（静的または動的）を柔軟に決定できます。

ダッシュボードを動的にするには、Next.jsのunstable_noStoreという機能を利用します。これにより静的レンダリングをスキップできます。方法は以下の通りです：

data.tsファイルの先頭でimport unstable_noStore from next/cacheを記述し、データ取得関数内で使用することで、データの扱い方をカスタマイズできます。

実践例