Next.js 15 は、データを取得するためのサーバー コンポーネントとクライアント コンポーネントを提供します。それぞれのコンポーネントには、パフォーマンス、SEO、動作に関して独自の長所と短所があります。 Axios はそのシンプルさで人気があり、両方の環境で効果的に機能します。このガイドでは、両方のコンポーネント タイプでの Axios の使用法を検討し、主な違いとベスト プラクティスを強調します。
Feature | Server Component | Client Component |
---|---|---|
Rendering Location | Server-side, before HTML delivery. | Client-side, post-page load. |
SEO Impact | SEO-friendly; data in initial HTML. | Not SEO-friendly; client-side data fetch. |
View Source Data | Data visible in HTML source. | Data fetched dynamically; not in source. |
Reactivity | Non-reactive; for static data. | Reactive; ideal for interactive UIs. |
サーバー コンポーネントは、サーバー側のレンダリング中にデータを取得します。 これにより、HTML にデータを直接含めることで SEO が向上します。
例: サーバー側のデータ取得
// app/server-component-example/page.tsx import axios from 'axios'; interface Post { id: number; title: string; body: string; } const fetchPosts = async (): Promise<Post[]> => { const { data } = await axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts'); return data; }; export default async function ServerComponentExample() { const posts = await fetchPosts(); return ( <div> <h1>Server-Fetched Posts</h1> <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> </div> ); }
重要な考慮事項:
クライアント コンポーネントは、ページがブラウザに読み込まれた後にデータを取得します。 このアプローチは SEO には適していませんが、動的な更新が可能です。
例: クライアント側のデータ取得
'use client'; import axios from 'axios'; import { useEffect, useState } from 'react'; interface Post { id: number; title: string; body: string; } export default function ClientComponentExample() { const [posts, setPosts] = useState<Post[]>([]); const [loading, setLoading] = useState(true); useEffect(() => { const fetchPosts = async () => { try { const { data } = await axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts'); setPosts(data); } catch (error) { console.error('Error fetching posts:', error); } finally { setLoading(false); } }; fetchPosts(); }, []); if (loading) return <div>Loading...</div>; return ( <div> <h1>Client-Fetched Posts</h1> <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> </div> ); }
重要な考慮事項:
Use Case | Recommended Component |
---|---|
SEO-critical data (blog posts) | Server Component |
User-specific or dynamic data | Client Component |
Frequently updated data | Client Component |
Static, rarely changing data | Server Component |
try...catch
ブロックを使用します。Axios は、Next.js 15 でのデータ取得に対する柔軟で簡単なアプローチを提供します。サーバーとクライアントのコンポーネントの固有の機能を活用し、ベスト プラクティスに従うことで、開発者はパフォーマンスが高く、安全で、SEO に最適化されたアプリケーションを構築できます。 静的データや SEO クリティカルなデータにはサーバー コンポーネントを優先し、動的なユーザー インタラクションにはクライアント コンポーネントを優先することを忘れないでください。 常にエラー処理とセキュリティ対策を徹底してください。
以上がNext.js の Axios を使用したデータの取得完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。