Busca avançada de dados em Next.js

Next.js fornece recursos poderosos para busca de dados em seus aplicativos, incluindo renderização do lado do servidor (SSR), geração de site estático (SSG) e busca de dados do lado do cliente. Ao aproveitar essas técnicas, você pode criar aplicativos escalonáveis ​​e de alto desempenho que proporcionam uma experiência de usuário perfeita. Este guia explorará técnicas avançadas de busca de dados em Next.js e demonstrará como implementá-las em seus projetos.

Renderização do lado do servidor (SSR)

Exemplo: usando 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;

Geração de site estático (SSG)

A geração de site estático em Next.js permite pré-renderizar páginas em tempo de construção, garantindo que o conteúdo seja estático e possa ser servido diretamente de um CDN. Isso pode melhorar significativamente o desempenho e reduzir a carga no seu servidor.

Exemplo: usando 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;

Regeneração Estática Incremental (ISR)

A regeneração estática incremental em Next.js permite atualizar o conteúdo estático sem reconstruir o site inteiro. Isso é útil para páginas que precisam ser atualizadas com frequência, como artigos de notícias ou postagens de blogs.

Exemplo: usando getStaticProps com 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 (
    

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

export default PostPage;

Busca de dados do lado do cliente

Next.js também oferece suporte à busca de dados do lado do cliente, o que permite buscar dados após o carregamento inicial da página. Isso pode ser útil para buscar dados que não são necessários para a renderização inicial ou para lidar com interações do usuário que exigem carregamento de dados.

Exemplo: usando useEffect e useState para busca de dados do lado do cliente

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;

Combinando métodos de busca de dados

Em muitos aplicativos, pode ser necessário combinar diferentes métodos de busca de dados para otimizar o desempenho e a experiência do usuário. Por exemplo, você pode usar SSR ou SSG para carregamento inicial da página e busca do lado do cliente para dados adicionais ou interações do usuário.

Exemplo: Combinando SSR e busca do lado do cliente

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

Usando SWR para busca do lado do cliente

SWR (stale-while-revalidate) é uma biblioteca de ganchos React criada por Vercel para busca de dados. Ele fornece recursos como cache, revalidação, rastreamento de foco e muito mais, tornando a busca de dados do lado do cliente mais eficiente e poderosa.

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

  return (
    

      {data.map((post) => (
        

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

export default SWRPostsPage;

Conclusão

Next.js oferece uma variedade de técnicas de busca de dados para atender a diferentes casos de uso e requisitos de desempenho. Ao compreender e aproveitar SSR, SSG, ISR e busca de dados do lado do cliente, você pode criar aplicativos da Web poderosos e de alto desempenho que fornecem uma excelente experiência ao usuário. Combinar essas técnicas de maneira eficaz pode ajudá-lo a otimizar seus aplicativos Next.js em termos de velocidade e SEO, garantindo que seus usuários tenham a melhor experiência possível.