Next.js Datenabruf
Next.js bietet mehrere Methoden zum Datenabruf, mit denen Sie Daten in verschiedenen Rendering-Phasen abrufen und anzeigen können (z. B. serverseitiges Rendering, statische Generierung und clientseitiges Rendering).
Clientseitiger Datenabruf
Manchmal möchten Sie Daten vom Client abrufen, nachdem die Seite geladen wurde, statt zur Build-Zeit oder auf dem Server. Sie können den useEffect-Hook von React verwenden, um clientseitigen Datenabruf zu handhaben.
Verwendung von useEffect und fetch
Verwenden Sie den useEffect-Hook und die fetch-API in einer React-Komponente, um Daten abzurufen.
useEffect wird ausgeführt, nachdem die Komponente gemountet wurde, und Sie können darin API-Anfragen stellen und den Status aktualisieren.
Code der Datei app/posts/page.tsx:
'use client';
import { useEffect, useState } from 'react';
export default function PostsPage() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await res.json();
setPosts(data);
};
fetchPosts();
}, []);
return (
<div>
<h1>BEISPIEL Test</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
Besuchen Sie http://localhost:3000/posts, und die Struktur wird wie folgt angezeigt:
useEffect wird nach dem clientseitigen Rendering ausgeführt, geeignet für Daten, die auf dem Client gerendert werden.
- Das Abrufen von Daten auf dem Client eignet sich für Inhalte, die kein serverseitiges Rendering benötigen.
- Daten können dynamisch basierend auf Faktoren wie Benutzerinteraktion oder Zeit abgerufen werden.
Anwendungsfälle:
- Dynamisch geladene Daten, wie z. B. Infinite Scroll oder Paginierung.
- Daten, die erst nach Benutzeraktionen abgerufen werden, wie z. B. das Abrufen von Daten nach dem Klick auf eine Schaltfläche.
Serverseitiges Abrufen von Daten
Serverseitige Daten können mit den folgenden Methoden abgerufen werden:
- fetch API
- ORM oder Datenbank
Verwendung der fetch API
Um Daten mit der fetch API abzurufen, müssen Sie Ihre Komponente in eine async-Funktion umwandeln und await verwenden, um auf den fetch-Aufruf zu warten. Beispiel:
Code der Datei app/posts/page.tsx:
export default async function Page() {
const data = await fetch('https://jsonplaceholder.typicode.com/posts')
const posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
Verwendung von ORM oder Datenbank
Du kannst Daten auch über ein ORM oder eine Datenbank abrufen, indem du die Komponente in eine async-Funktion umwandelst und den Datenbankaufruf awaitest:
Code der Datei app/posts/page.tsx:
import { db, posts } from '@/lib/db'
export default async function Page() {
const allPosts = await db.select().from(posts)
return (
<ul>
{allPosts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}