Memo

データアクセス
■サーバコンポーネントからデータアクセス

ページにアクセスすると、JSONデータを取得して画面に表示する。

src/app/public/sample.json
{
  "message":"これはデータのサンプルです。",
  "data":[
    {"name":"太郎","mail":"taro@example.com","age":"39"},
    {"name":"花子","mail":"hanako@example.com","age":"28"},
    {"name":"幸子","mail":"sachico@example.com","age":"17"}
  ]
}


src/app/fetch/page.tsx
'use server'

async function getSampleData() {
  const resp = await fetch(
    'http://localhost:3000/sample.json',
    { cache: 'no-store' }
  )
  const result = await resp.json()
  return result
}

export default async function Fetch() {
  const data = await getSampleData()

  return (
    <main>
      <h1 className="title">Fetch sample</h1>
      <p className="message">{data.message}</p>
    </main>
  )
}
■クライアントコンポーネントからデータアクセス

ボタンをクリックすると、JSONデータを取得して画面に表示する。

src/app/public/sample.json
{
  "message":"これはデータのサンプルです。",
  "data":[
    {"name":"太郎","mail":"taro@example.com","age":"39"},
    {"name":"花子","mail":"hanako@example.com","age":"28"},
    {"name":"幸子","mail":"sachico@example.com","age":"17"}
  ]
}


src/app/fetch/page.tsx
'use client'

import { useState } from 'react'

async function getSampleData() {
  const resp = await fetch(
    'http://localhost:3000/sample.json',
    { cache: 'no-store' }
  )
  const result = await resp.json()
  return result
}

export default function Fetch() {
  const [message, setMessage] = useState('No data.')
  const doInput = (e: any) => {
    setMessage(e.target.value)
  }
  const doClick = (e: any)=> {
    e.preventDefault()
    getSampleData().then(resp => {
      setMessage(resp.message)
    })
  }

  return (
    <main>
      <h1 className="title">Fetch sample</h1>
      <p className="message">{message}</p>
      <form className="form">
        <button className="button" onClick={doClick}>クリック</button>
      </form>
    </main>
  )
}
Memo

Advertisement
