Reactサーバーコンポーネントを使ったデータ取得の方法（参考情報）

Reactサーバーコンポーネントを使ったデータ取得の方法

ビギナー向けの本書では、データ操作に関する各機能（読み込み／作成／修正／削除）を、バックエンドとフロントエンドの両方でしっかりと開発する方法で進めてきました。

しかし第6章ですこし触れたReactの新機能サーバーコンポーネントを使うと、データの読み取りに関しては、APIサーバーを経由せずにデータベースに直接アクセスをして実行することが可能です。ここでは参考情報として、そのコードを簡単に紹介します。

---

「すべてのアイテムデータを読み取るページ（page.js）」のコードは、第9章完了時点で次のようになっています。

// page.js

import Link from "next/link"
import Image from "next/image"

const getAllItems = async() => {
    const response = await fetch(`${process.env.NEXT_PUBLIC_URL}/api/item/readall`, {cache: "no-store"})
    const jsonData = await response.json()
    const allItems = jsonData.allItems
    return allItems
}

const ReadAllItems = async() => {
    const allItems = await getAllItems()
    return (
        ...

getAllItemsでAPIサーバーにアクセスをして、すべてのアイテムデータを取得しているのがわかります。しかしReactサーバーコンポーネントでは、データ取得に関してはデータベースに直接アクセスをして実行できるので、getAllItemsの中を次のように書き換えてみましょう。

// page.js

import Link from "next/link"
import Image from "next/image"
import connectDB from "../app/utils/database"            // 追加
import { ItemModel } from "../app/utils/schemaModels"    // 追加

const getAllItems = async() => {
    // ⬇変更
    await connectDB()                            
    const allItems = await ItemModel.find() 
    // ⬆変更
    return allItems
}

const ReadAllItems = async() => {
    const allItems = await getAllItems()
    return (  
        ...

getAllItemsの中のコードは、バックエンド側の/app/api/item/readall/route.jsに書かれている「すべてのアイテムデータを取得するコード」と基本的に同じなのがわかります。

変更を保存しましょう。そしてブラウザでhttp://localhost:3000を開くと、コードを変えてもすべてのアイテムデータがしっかりと取得されているのがわかります。

同じ要領で、「ひとつだけアイテムデータを読み取るページ」のコードも変更することができます。/app/item/readsingle/[id]/page.jsを開き、次のようにコードを変更してみましょう。

// /app/item/readsingle/[id]/page.js

import Image from "next/image"  
import Link from "next/link" 
import connectDB from "../../../utils/database"              // 追加
import { ItemModel } from "../../../utils/schemaModels"      // 追加

const getSingleItem = async(id) => {
    // ⬇変更
    await connectDB()
    const singleItem = await ItemModel.findById(id)
    // ⬆変更
    return singleItem 
}  

const ReadSingleItem = async(context) => {
    const singleItem = await getSingleItem(context.params.id)
    return (
        ...

変更を保存してブラウザで確認すると、このコードでもアイテムをひとつ、データベースからしっかり取得できているのがわかります。

このように、わざわざAPIサーバーを作らずとも、直接データベースにアクセスをしてデータ取得を行えるのがReactサーバーコンポーネントのメリットの一つです。

（*なおデータ取得以外の操作である「作成／修正／削除」をサーバーコンポーネントで行う場合は、本書では触れていませんが、Next.jsのServer Actionsというものを使うことになります。）