SSR (Representación del lado del servidor) es otro método para generar páginas en Next.js. En este artículo, quiero explicar qué es SSR, cómo funciona y cómo implementarlo tanto en Page Router como en App Router de un proyecto Next.js.

¿Qué es la RSS?

SSR es un método para generar una página estática (o página renderizada previamente) después de que un usuario realiza una solicitud. Esto significa que se genera una página estática en cada solicitud. Este método es útil para páginas que necesitan actualizarse con frecuencia, ya que garantiza que los datos estén siempre actualizados

¿Cómo funciona la RSS?

Cuando usa SSR en Next.js, cada vez que un usuario solicita una página donde se implementa SSR, la página se genera después de realizar la solicitud. Esto significa que el usuario tiene que esperar mientras Next.js genera y agrupa nuevamente el contenido estático para cada solicitud. Una vez que la página estática esté lista, el usuario podrá ver la página solicitada.

Es importante tener en cuenta que SSR se ejecuta solo en el servidor y genera una página estática para cada solicitud, por lo que no se ejecuta durante el proceso de compilación del proyecto.

Cómo implementar SSR en el enrutador de aplicaciones

Para implementar SSR en App Router, no necesita escribir una función especial ni establecer una configuración específica porque está habilitada de forma predeterminada en los componentes de su servidor.

Por ejemplo, si tiene una página estática y obtiene datos de una API, esta página utilizará SSR de forma predeterminada. Es importante tener en cuenta que cuando se usa SSR, la página no se empaqueta ni se renderiza previamente en el momento de la compilación. Y si usa una página dinámica en su proyecto, usará SSG de forma predeterminada si no recupera ningún dato. Pero cuando obtienes datos de una API, cambiará a SSR y, nuevamente, no se agruparán páginas estáticas durante el tiempo de compilación.

este es un ejemplo de implementación de SSR en una ruta estática:

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    

      
About Us
      
{data}
    
  );
};

export default AboutPage;

Cómo implementar SSR en el enrutador de página

Para implementar SSR en el enrutador de la página, necesita crear una función getServerSideProps en su archivo. Esta función se llamará después de cada solicitud del usuario. Si está utilizando una ruta dinámica, como un archivo [id], también necesitará usar getServerSideProps en su archivo. Esta función toma un argumento, a menudo llamado contexto, del cual puede recuperar la identificación, el valor de la página dinámica. El servidor llama a esta función en cada solicitud del usuario.

este es un ejemplo de implementación en un archivo tsx:

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

este es un ejemplo de implementación en un archivo jsx:

const AboutPage = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

Conclusión

SSR es un método útil para agrupar o crear páginas estáticas, pero no ocurre durante el tiempo de compilación. Cuando necesite que su página se actualice con cada solicitud de usuario para que los usuarios puedan ver los datos más recientes, puede utilizar SSR. Sin embargo, es importante tener en cuenta que puede llevar más tiempo y no es tan rápido como otros métodos como SSG (generación de sitios estáticos) o ISR (regeneración estática incremental) porque genera una página estática para cada solicitud de usuario.

¡Espero que hayas disfrutado este artículo! Si tienes alguna pregunta, no dudes en preguntarme. Si desea leer sobre ISR y SSG, puede consultar mis artículos sobre ellos aquí para ISR y aquí para SSG. Si quieres conocer más sobre todo, puedes seguir mi sitio web.

¡Gracias por leer! ¡Adiós por ahora!