概要
- Next.jsチュートリアルの第7章・データをフェッチする方法について学ぶ。
APIレイヤー
APIを使ういくつかのケースにおいて、APIはデータベースとアプリケーションを仲介するレイヤーとして存在している。
具体的には:
- サードパーティーが提供するAPIを使用する場合
- クライアントからデータを取得する際、クライアントからデータベース上の機密を晒すリスクを避けるためにサーバー上で動作するAPI層を持たせたい場合
Next.jsの場合には、ルートハンドラを使用するAPIエンドポイントを作ることが出来る。
データベースクエリ
フルスタックアプリケーションを作成する際に、データベースを通してやり取りをするデータのロジックを書くケースが必要が生じるが、PostgreSQLのような慣例的なリレーショナルデータベースであれば、ORMを用いてこれを実装することが出来る。
この場合にもまた、いくつかのケースにおいて、データベースクエリを書く具体例が存在する:
- APIエンドポイントを作成する場合にデータベースとロジックをやり取りする場合
- データの取得を含むReactサーバーコンポーネントを使用する際に、API層をスキップすることが出来る。そして、クライアント上に秘密鍵を晒すリスクを考慮せずにデータベースにクエリを書くことが出来る。
データを取得するためにサーバーコンポーネントを使用する
Next.jsアプリケーションはReactサーバーコンポーネントをデフォルトで使用している。サーバーコンポーネントを用いたデータの取得は比較的新しい手法で、それらを使うことで以下のようなメリットが存在する。
-
サーバーコンポーネントは
JavaScriptのPromisesをサポートする。ネイティブアプリのような非同期処理をサポートしており、useEffect, useStateやその他のライブラリを用いることなく、async/awaitを指定するだけで使用することが出来る。 -
サーバーコンポーネントはサーバーで走るため、高級関数やデータ取得ロジックをサーバーで計算して、クライアントに計算結果を送るだけでよい。
サーバーコンポーネントをサーバーで実行している間、追加のAPIレイヤー層を直接触ることなく、データベースを触ることが出来る。これは追加のメンテナンスコードを書く手間を省いてくれる。
参考