Erweiterte Datenabruftechniken in Next.js

Erweiterter Datenabruf in Next.js

Next.js bietet leistungsstarke Funktionen zum Abrufen von Daten in Ihren Anwendungen, einschließlich serverseitigem Rendering (SSR), statischer Site-Generierung (SSG) und clientseitigem Datenabruf. Durch die Nutzung dieser Techniken können Sie leistungsstarke und skalierbare Anwendungen erstellen, die ein nahtloses Benutzererlebnis bieten. In diesem Leitfaden werden erweiterte Datenabruftechniken in Next.js untersucht und gezeigt, wie Sie diese in Ihren Projekten implementieren können.

Serverseitiges Rendering (SSR)

Beispiel: Verwendung von getServerSideProps

// pages/post/[id].js
export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default PostPage;

Statische Site-Generierung (SSG)

Mit der statischen Site-Generierung in Next.js können Sie Seiten zum Zeitpunkt der Erstellung vorab rendern und so sicherstellen, dass der Inhalt statisch ist und direkt von einem CDN bereitgestellt werden kann. Dies kann die Leistung deutlich verbessern und die Belastung Ihres Servers reduzieren.

Beispiel: Verwendung von getStaticProps

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

const HomePage = ({ posts }) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default HomePage;

Inkrementelle statische Regeneration (ISR)

Durch die inkrementelle statische Regeneration in Next.js können Sie statische Inhalte aktualisieren, ohne die gesamte Website neu erstellen zu müssen. Dies ist nützlich für Seiten, die häufig aktualisiert werden müssen, z. B. Nachrichtenartikel oder Blogbeiträge.

Beispiel: Verwendung von getStaticProps mit revalidate

// pages/posts/[id].js
export async function getStaticProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default PostPage;

Clientseitiger Datenabruf

Next.js unterstützt auch den clientseitigen Datenabruf, sodass Sie Daten nach dem ersten Laden der Seite abrufen können. Dies kann nützlich sein, um Daten abzurufen, die für das erste Rendering nicht benötigt werden, oder um Benutzerinteraktionen zu verarbeiten, die das Laden von Daten erfordern.

Beispiel: Verwendung von useEffect und useState für den clientseitigen Datenabruf

import { useEffect, useState } from 'react';

const PostsPage = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch('https://api.example.com/posts');
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default PostsPage;

Kombinieren von Datenabrufmethoden

In vielen Anwendungen müssen Sie möglicherweise verschiedene Datenabrufmethoden kombinieren, um Leistung und Benutzererfahrung zu optimieren. Beispielsweise können Sie SSR oder SSG zum ersten Laden der Seite und zum clientseitigen Abrufen für zusätzliche Daten oder Benutzerinteraktionen verwenden.

Beispiel: Kombination von SSR und clientseitigem Abruf

// pages/user/[id].js
import { useEffect, useState } from 'react';

export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();

  return {
    props: {
      user,
    },
  };
}

const UserPage = ({ user }) => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch(`https://api.example.com/users/${user.id}/posts`);
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, [user.id]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>

      <h2>Posts</h2>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          {posts.map((post) => (
            <div key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default UserPage;

Verwenden von SWR für clientseitiges Abrufen

SWR (stale-while-revalidate) ist eine von Vercel erstellte React-Hook-Bibliothek zum Abrufen von Daten. Es bietet Funktionen wie Caching, erneute Validierung, Fokusverfolgung und mehr, wodurch der clientseitige Datenabruf effizienter und leistungsfähiger wird.

Beispiel: Verwendung von SWR

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const SWRPostsPage = () => {
  const { data, error } = useSWR('https://api.example.com/posts', fetcher);

  if (error) return <p>Error loading posts.</p>;
  if (!data) return <p>Loading...</p>;

  return (
    <div>
      {data.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default SWRPostsPage;

Abschluss

Next.js bietet eine Vielzahl von Datenabruftechniken, um unterschiedlichen Anwendungsfällen und Leistungsanforderungen gerecht zu werden. Durch das Verständnis und die Nutzung von SSR, SSG, ISR und dem clientseitigen Datenabruf können Sie leistungsstarke, leistungsstarke Webanwendungen erstellen, die ein hervorragendes Benutzererlebnis bieten. Durch die effektive Kombination dieser Techniken können Sie Ihre Next.js-Anwendungen hinsichtlich Geschwindigkeit und SEO optimieren und sicherstellen, dass Ihre Benutzer das bestmögliche Erlebnis haben.

Das obige ist der detaillierte Inhalt vonErweiterte Datenabruftechniken in Next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!