Next.js でのデータ取得の処理方法
Next.js は、開発者がサーバー側でレンダリングされた React アプリケーションを迅速に構築できるようにする堅牢なフレームワークです。さまざまな重要な機能を備えています。その重要な機能の 1 つは、データを簡単にフェッチして、コンポーネントですぐに利用できるようにする機能です。
データ フェッチは、開発者が Web サイト/Web アプリケーションでデータを取得して表示できるようにするための重要な機能です。Next.js でデータをフェッチするにはいくつかの方法があり、それぞれに利点と使用例があります。この記事では、Next.js でデータを取得するさまざまな方法について説明します。
useEffect フックを使用してデータをフェッチする
useEffectフックは、コンポーネントでの API 呼び出しなどの副作用を実行するために使用される React フックです。useEffect フックを使用して、Next.js でデータを取得できます。
このフックは、ログインしているユーザーに固有の情報を表示するユーザー プロファイル ページなど、動的データを必要とするページに役立ちます。
useEffect フックを使用するには、まず選択したコンポーネントにインポートし、データをフェッチして、それを使用してページをレンダリングします。
例えば：
import { useEffect, useState } from 'react';
export default function Home() {
const [data, setData] = useState("");
useEffect(() => {
fetch('https://api.example.com/data');
.then((response) => response.json())
.then((data) => setData(data))
}, []);
return (
<div>
{data.name}
</div>
)
}
このコード ブロックは、useEffect フックを使用して API からデータをフェッチします。データをフェッチする関数と依存配列の 2 つのパラメーターを useEffect フックに渡す場合。成功すると、setData()を使用して、フェッチ リクエストが返すデータでコンポーネントの状態を更新します。
useEffect フックに渡す依存配列には、効果が依存する値が含まれている必要があります。コンポーネントは、依存配列の値が変更された場合にのみ効果を再実行します。この例のように、依存配列が空の場合、効果は最初のレンダリングでのみ実行されます。
SWR を使用した自動再検証の処理
SWR (stale-while-revalidate) ライブラリは、データ フェッチを処理するための React フック ライブラリです。Next アプリケーションで使用するには、最初に SWR ライブラリをセットアップする必要があります。
SWR ライブラリの重要な機能の 1 つは、データの再検証を自動化する機能です。この機能は、データが頻繁に更新され、常に最新である必要がある場合に不可欠です。この機能により、アプリケーションは常に最新のデータにアクセスできるようになり、より動的でユーザーへの応答性が向上します。
SWR ライブラリは、ユーザーがページに再度フォーカスするか、タブを切り替えると、API に対して新しいフェッチ要求を行います。ユーザーがページを離れると、画面に表示されるデータは古くなります。ユーザーがページに戻ると、SWR ライブラリは新しいフェッチ要求を API に送信し、新しいデータを古いデータと比較して、変更されているかどうかを判断します。
SWR ライブラリがこのアクションを実行しないようにするには、revalidateOnFocusオプションを使用できます。
そのようです：
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
revalidateOnFocus: false,
})
revalidateOnFocus プロパティを false に設定すると、ページに再度フォーカスするたびに SWR ライブラリがデータを再検証しなくなります。
また、SWR ライブラリは、ユーザーがインターネットに再接続するたびにデータを再検証します。このアクションは、特定の状況で非常に役立ち、自動的に機能します。
アクションを無効にするには、revalidateOnReconnectオプションを使用できます。
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
revalidateOnReconnect: false,
})
データの自動再検証を無効にするには、 revalidateOnFocus プロパティと revalidateOnRecconect プロパティの両方を false に設定します。
Isomorphic-Unfetch ライブラリを使用してフェッチ リクエストを実行する
isomorphic -unfetchライブラリは、Next.js アプリケーションでフェッチ リクエストを実行できる小型で軽量のライブラリです。このライブラリは、ネイティブfetch API の優れた代替手段です。使い方は簡単で、フェッチ リクエストを作成するのが初めての開発者に最適です。
ネイティブ fetch API をサポートしていない古いブラウザーでは、isomorphic-unfetch をポリフィルとして使用できます。isomorphic-unfetch ライブラリは最小限であり、小さなアプリケーションでの作業に適しています。
Next.js アプリケーションで isomorphic-unfetch を使用するには、次のコマンドを実行してライブラリをインストールします。
npm install isomorphic-unfetch
次に、ライブラリをインポートしてコンポーネントで使用し、次のようにデータを取得できます。
import Fetch from 'isomorphic-unfetch'
import {useState, useEffect} from 'react'
export default function Home() {
const [data, setData] = useState(null)
useEffect(() => {
Fetch('https://api.example.com/data')
.then((response) => response.json)
.then((data) => setData(data))
}, [])
if (!data) return <div>Loading...</div>
return (
<div>
<h1>{data.name}</h1>
</div>
)
}
isomorphic-unfetch 関数は、クライアント側とサーバー側の両方で機能します。
Next.js による効率的なデータ取得
アプリケーションを開発する場合、データの取得は重要な機能です。Next.js はデータをフェッチする方法をいくつか提供しますが、それぞれに利点とトレードオフがあります。
使用する方法を決定するときは、トレードオフを考慮して、使い慣れた手法を使用するようにしてください。
コメントを残す