Расширенная выборка данных в Next.js

Next.js предоставляет мощные функции для получения данных в ваших приложениях, включая рендеринг на стороне сервера (SSR), генерацию статического сайта (SSG) и получение данных на стороне клиента. Используя эти методы, вы можете создавать производительные и масштабируемые приложения, обеспечивающие удобство работы с пользователем. В этом руководстве будут рассмотрены передовые методы получения данных в Next.js и продемонстрировано, как реализовать их в ваших проектах.

Серверный рендеринг (SSR)

Пример: использование 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 (
    

      
{post.title}
      
{post.body}
    
  );
};

export default PostPage;

Генерация статического сайта (SSG)

Генерация статического сайта в Next.js позволяет предварительно отображать страницы во время сборки, гарантируя, что контент является статическим и может обслуживаться непосредственно из CDN. Это может значительно повысить производительность и снизить нагрузку на ваш сервер.

Пример: использование 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 (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default HomePage;

Инкрементная статическая регенерация (ISR)

Пошаговая статическая регенерация в Next.js позволяет обновлять статический контент без перестройки всего сайта. Это полезно для страниц, которые необходимо часто обновлять, например новостных статей или сообщений в блогах.

Пример: использование getStaticProps с повторной проверкой

// 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 (
    

      
{post.title}
      
{post.body}
    
  );
};

export default PostPage;

Получение данных на стороне клиента

Next.js также поддерживает извлечение данных на стороне клиента, что позволяет получать данные после начальной загрузки страницы. Это может быть полезно для получения данных, которые не нужны для первоначального рендеринга, или для обработки действий пользователя, требующих загрузки данных.

Пример. Использование useEffect и useState для получения данных на стороне клиента.

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 
Loading...
;
  }

  return (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default PostsPage;

Комбинирование методов получения данных

Во многих приложениях может потребоваться сочетание различных методов получения данных для оптимизации производительности и удобства работы пользователей. Например, вы можете использовать SSR или SSG для начальной загрузки страницы и получения на стороне клиента дополнительных данных или взаимодействия с пользователем.

Пример: объединение SSR и выборки на стороне клиента

// 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 (
    

      
{user.name}
      
{user.email}

      
Posts
      {loading ? (
        
Loading...
      ) : (
        

          {posts.map((post) => (
            

              
{post.title}
              
{post.body}
            
          ))}
        
      )}
    
  );
};

export default UserPage;

Использование SWR для выборки на стороне клиента

SWR (stale- while-revalidate) — это библиотека перехватчиков React, созданная Vercel для извлечения данных. Он предоставляет такие функции, как кэширование, повторная проверка, отслеживание фокуса и многое другое, что делает получение данных на стороне клиента более эффективным и мощным.

Пример: использование КСВ

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 
Error loading posts.
;
  if (!data) return 
Loading...
;

  return (
    

      {data.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default SWRPostsPage;

Заключение

Next.js предлагает различные методы извлечения данных для удовлетворения различных вариантов использования и требований к производительности. Понимая и используя SSR, SSG, ISR и выборку данных на стороне клиента, вы можете создавать мощные, высокопроизводительные веб-приложения, которые обеспечивают превосходное взаимодействие с пользователем. Эффективное сочетание этих методов может помочь вам оптимизировать ваши приложения Next.js как по скорости, так и по SEO, гарантируя, что ваши пользователи получат наилучшие впечатления.