Obtención de datos avanzada en Next.js

Next.js proporciona potentes funciones para recuperar datos en sus aplicaciones, incluida la representación del lado del servidor (SSR), la generación de sitios estáticos (SSG) y la recuperación de datos del lado del cliente. Al aprovechar estas técnicas, puede crear aplicaciones escalables y de alto rendimiento que brinden una experiencia de usuario perfecta. Esta guía explorará técnicas avanzadas de obtención de datos en Next.js y demostrará cómo implementarlas en sus proyectos.

Representación del lado del servidor (SSR)

Ejemplo: uso de 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;

Generación de sitios estáticos (SSG)

La generación de sitios estáticos en Next.js le permite renderizar previamente las páginas en el momento de la compilación, lo que garantiza que el contenido sea estático y pueda servirse directamente desde una CDN. Esto puede mejorar significativamente el rendimiento y reducir la carga de su servidor.

Ejemplo: uso de 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;

Regeneración estática incremental (ISR)

La regeneración estática incremental en Next.js le permite actualizar contenido estático sin reconstruir todo el sitio. Esto es útil para páginas que deben actualizarse con frecuencia, como artículos de noticias o publicaciones de blogs.

Ejemplo: uso de getStaticProps con 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;

Obtención de datos del lado del cliente

Next.js también admite la recuperación de datos del lado del cliente, lo que le permite recuperar datos después de la carga inicial de la página. Esto puede resultar útil para recuperar datos que no son necesarios para el renderizado inicial o para manejar interacciones del usuario que requieren carga de datos.

Ejemplo: uso de useEffect y useState para la obtención de datos del lado del 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;

Combinar métodos de obtención de datos

En muchas aplicaciones, es posible que necesites combinar diferentes métodos de obtención de datos para optimizar el rendimiento y la experiencia del usuario. Por ejemplo, puede utilizar SSR o SSG para la carga inicial de la página y la recuperación del lado del cliente para datos adicionales o interacciones del usuario.

Ejemplo: combinación de SSR y recuperación del lado del 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;

Uso de SWR para la recuperación del lado del cliente

SWR (obsoleto mientras se revalida) es una biblioteca de enlaces de React creada por Vercel para la recuperación de datos. Proporciona funciones como almacenamiento en caché, revalidación, seguimiento de enfoque y más, lo que hace que la recuperación de datos del lado del cliente sea más eficiente y potente.

Ejemplo: uso de ROE

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;

Conclusión

Next.js ofrece una variedad de técnicas de obtención de datos para atender diferentes casos de uso y requisitos de rendimiento. Al comprender y aprovechar SSR, SSG, ISR y la obtención de datos del lado del cliente, puede crear aplicaciones web potentes y de alto rendimiento que brinden una excelente experiencia de usuario. Combinar estas técnicas de manera efectiva puede ayudarlo a optimizar sus aplicaciones Next.js tanto en velocidad como en SEO, asegurando que sus usuarios tengan la mejor experiencia posible.