【Next.js】Reactサーバーコンポーネントの動きをコードで確認しよう
2025.3.8
この記事は約3分で読めます
この記事の筆者：三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／2024年）』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
🔹 UdemyでReact・JavaScript・Node.jsの入門動画を無料で公開中 → 無料の入門動画
本記事の目的
Reactサーバーコンポーネントを使うと、データ取得のコード量が抑えられることを確認します。
Next.jsを使います。
Next.jsのインストール
まずNext.jsをインストールしましょう。
インストールする場所はどこでも構いません。下記コマンドをターミナルに打ってください。
npx create-next-app rsc-testここで次のようなメッセージが出ることがありますが、特に問題ではないので、「Enter」キーを押してください。
Need to install the following packages:
create-next-app@15.2.1
Ok to proceed? (y) インストールを実行すると、次のような質問が出てきます（2025年3月時点）。
「App Router」以外にはNoと答えてください。サーバーコンポーネントを使うにはApp Routerを利用する必要があります。
? Would you like to use TypeScript? … No / Yes
? Would you like to use ESLint? … No / Yes
? Would you like to use Tailwind CSS? … No / Yes
? Would you like your code inside a `src/` directory? … No / Yes
? Would you like to use App Router? (recommended) … No / Yes
? Would you like to use Turbopack for next dev? … No / Yes
? Would you like to customize the import alias (@/* by default)? … No / Yesインストールが完了したらVS Codeで開きましょう。
appフォルダ内のpage.jsがトップページになります。
page.jsのコードをすべて消し、次のように書き換えてください。
// page.js
const App = () => {
return (
<h1>こんにちは</h1>
)
}
export default App保存し、ターミナルでnpm run devコマンドを実行しましょう。
Next.jsが起動し、ブラウザでhttp://localhost:3000を開くと次のように表示されます。
Reactクライアントコンポーネントの使い方
次のコードを加えてください。
// page.js
import { useState } from "react" // 追加
const App = () => {
const[data, setData] = useState() // 追加
return (
...stateを読み込んで使っているだけのベーシックなReactコードです。
保存したらブラウザを開きましょう。
するとブラウザにはエラーが出ます。
こちらの記事でも触れましたが、Reactサーバーコンポーネントではuse-で始まるHooksは使えないからです。
Hooksを使いたい場合は、「サーバーコンポーネント」を「クライアントコンポーネント」に変える必要があります。
下記コードを1行目に追加しましょう。
// page.js
"use client" // 追加
import { useState } from "react"
const App = () => {
...保存してブラウザを見ると、先ほどと同じように「こんにちは」と表示されており、正常に動いているのがわかります。
Reactサーバーコンポーネントでのデータ取得
Reactクライアントコンポーネントでは、データ取得時に次のようなコードを書いていました。
"use client"
import { useState, useEffect } from "react"
const App = () => {
const [data, setData] = useState()
useEffect(() => {
const getData = async() => {
try {
const response = await fetch("https://dummyjson.com/products/1")
const jsonData = await response.json()
setData(jsonData)
}catch(err){
alert("エラーが起きました。再読み込みしてください")
}
}
getData()
}, [])
return (
<h1>
プロダクト名：{data?.title}
</h1>
)
}
export default App保存してブラウザで確認すると、アイテムの名前が次のように取得・表示されます。
これと同じデータ取得を、今度はサーバーコンポーネントでしてみましょう。
次のコードを書いてください。
// page.js
const App = async() => {
const response = await fetch("https://dummyjson.com/products/1")
const jsonData = await response.json()
return (
<h1>
プロダクト名：{jsonData.title}
</h1>
)
}
export default App保存してブラウザを確認すると、アイテムの名前が取得・表示されています。
このようにサーバーコンポーネントを使うと、クライアントコンポーネントよりも短いコードで外部リソースからのデータ取得が可能だとわかります。
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
