Aprende a usar getServerSideProps() en Next.js para obtener datos en el servidor y renderizarlos en el cliente para mejorar el rendimiento de tu aplicación de React. También aprenderás a usar Next Link para navegar entre páginas de forma rápida y sin recargar la página.

En este artículo aprenderás:

1. ¿Qué es Next.js?
2. ¿Qué es server side rendering?
3. ¿Cómo funciona getServerSideProps()?
4. Reglas para user getServerSideProps()
5. Next Link
6. Ejemplo getServerSideProps()

¿Qué es Next.js?

"Next.js es un framework para React que nos da los los elementos básicos para crear aplicaciones web. Por 'framework' nos referimos que Next.js se encarga de las herramientas y la configuración necesaria para React y provee estructura y optimizaciones adiconales para tu aplicación." (Fuente)

¿Qué es server side rendering?

El server side rendering (SSR) es una técnica de renderizado que consiste en que el servidor envíe el HTML ya construido al cliente. Esto permite que el contenido de la página se muestre inmediatamente al usuario, sin tener que esperar a que el cliente descargue el código JavaScript y lo ejecute.

¿Cómo funciona getServerSideProps()?

La función getServerSideProps() que provee Next.js se ejecuta en el servidor y nos permite construir el html y renderizarlo en el cliente. Debido a que todo lo que sucede adentro de esta función se ejecuta en el servidor, todo se ejecuta en el ambiente de node.js , por lo que tenemos acceso a librerías y módulos de node.js.

Al principio esto puede parecer un poco confuso porque esta función vive dentro de un archivo que está creado para el cliente pero por detrás Next.js lo está ejecutando en una función serverless en el servidor.

Reglas para usar getServerSideProps()

1. getServerSideProps() debe ser una función exportada.
2. getServerSideProps() solo puede ser usado en páginas (dentro de la carpeta 'pages'). No puede ser usado en componentes.
3. getServerSideProps() se debe exportar como una función independiente; no funcionará si se agrega getServerSideProps como una propiedad del componente de la página.

Next Link

Next Link es un componente que nos permite navegar entre páginas de forma rápida y sin recargar la página y es una alternativa a usar el elemento 'a' de HTML. Por medio de la propiedad 'href' de Next Link podemos enviar parametros a la función getServerSideProps().

Next Link, al igual que un tag 'a' de HTML, recibe una propiedad 'href', en este atributo podemos enviar un objeto con dos propiedades: pathname y query. pathname es la ruta de la página a la que queremos navegar y query es un objeto con los parámetros que queremos enviar a la función getServerSideProps() (ejemplo más abajo).

Ejemplo:

<Link
  href={{
    pathname: "posts/[post_id]",
    query: { post_id: post.id },
  }}
>
  <a>{post.title}</a>
</Link>

Ejemplo getServerSideProps()

En el primer archivo (pages/posts/index.ts) vamos a crear una página que liste todos los posts que obtengamos de nuestra API. En este archivo, dentro de la función getServerSideProps() vamos a hacer una petición a la API y vamos a guardar los posts en una variable llamada posts. Luego vamos a retornar un objeto con la propiedad props que va a contener el valor de la variable posts. Esta propiedad es inmediatamente accesible en los parametros del componente de la página.

// pages/posts/index.ts
import Link from "next/link";

export default function Posts({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link
              href={{
                pathname: "posts/[post_id]",
                query: { post_id: post.id },
              }}
            >
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export const getServerSideProps = async () => {
  const res = await fetch("https://mi-api/posts");
  const posts = await res.json();

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

En el segundo archivo (pages/posts/[post_id].ts) vamos a crear una página que muestre el post individual. En la página anterior usamos el elemento Next Link para redireccionar a esta página y dentro de este elemento enviamos un objeto dentro de la propiedad 'href'. Este objeto lo tenemos disponible a través de el argumento 'context' de la función getServersideProps(). En este archivo, dentro de la función getServerSideProps() vamos a hacer una petición a la API y vamos a guardar el post en una variable llamada post. Luego vamos a retornar un objeto con la propiedad props que va a contener el valor de la variable post. Esta propiedad es inmediatamente accesible en los parametros del componente de la página.

// pages/posts/[id].ts

export default Post ({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export const getServerSideProps = async (context) => {
  const { post_id } = context.query;
  const res = await fetch(`https://mi-api/posts/${id}`);
  const post = await res.json();

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