Función siguiente.js getServerSideProps()

Next.js es un marco de desarrollo web de código abierto creado sobre Node.js que permite funcionalidades de aplicaciones web basadas en React, como la representación del lado del servidor y la generación de sitios web estáticos. Next.js está desarrollado por Vercel . Los desarrolladores con conocimientos de HTML, CSS, JavaScript y React pueden aprender y cambiar fácilmente a Next.js.

getServerSideProps () es un método que se utiliza para obtener datos del servidor. Como resultado, es especialmente útil para sitios con datos dinámicos o requests que deben realizarse con frecuencia, como la recuperación de datos de usuarios autorizados.

Sintaxis:

export async function getServerSideProps(context) {
  return {
    props: {},
  }
}

Parámetro: Acepta el objeto de contexto que puede tener las siguientes propiedades:

• params: si esta página utiliza una ruta dinámica, los parámetros de la ruta se almacenan en params. Si el nombre de la página es [id].js, los parámetros serán { id: … }
• req: El objeto HTTP IncomingMessage.
• res: el objeto de respuesta HTTP.
• consulta: un objeto para la string de consulta.
• vista previa (booleano): si la página está en modo de vista previa, la vista previa es verdadera; de lo contrario, es falso.
• previewData: Los datos de vista previa establecidos por setPreviewData.
• resolveUrl: una versión normalizada de la URL de solicitud en la que se elimina el prefijo _next/data para las transiciones del cliente y se incluyen los valores de consulta originales.
• configuración regional: contiene la configuración regional activa (si está habilitada).
• configuraciones regionales: contiene todas las configuraciones regionales admitidas (si están habilitadas).
• defaultLocale: la configuración regional predeterminada.

Devoluciones: la función getServerSideProps devuelve un objeto que contiene cualquiera de las siguientes propiedades:

• props: el objeto props es un par clave-valor en el que el componente de la página recibe cada valor. Debe ser un objeto serializable que se pueda serializar mediante JSON.stringify.
• notFound: la página puede devolver un estado 404 y una página 404 si el booleano notFound es verdadero. La página devolverá un 404 si notFound es verdadero, incluso si la página se produjo previamente correctamente.
• redirigir: el objeto de redirección permite la redirección de recursos internos y externos. Debe tener la misma forma que { destino: string, permanente: booleano }. En algunas circunstancias inusuales, es posible que se requiera un código de estado especial para redirigir adecuadamente a los clientes HTTP más antiguos. Puede usar la propiedad statusCode en lugar de la propiedad permanente en determinadas circunstancias, pero no en ambas.

Configuración del proyecto: para ejecutar los ejemplos que se proporcionan a continuación, deberá crear un proyecto Next.js. Con fines de demostración, he creado un proyecto llamado proyecto de prueba. Puede hacerlo escribiendo el siguiente comando:

Paso 1: Cree una carpeta de proyecto y muévase a ella usando el siguiente comando en la terminal:

mkdir foldername
cd foldername

Paso 2: en ese nombre de carpeta , cree su proyecto usando el siguiente comando en la terminal:

npx create-next-app test-project

Paso 3: cree dos archivos adicionales, a saber, about.js y home.js en el directorio de páginas para los ejemplos

Estructura del proyecto: este proyecto debería verse así:

 

Pasos para ejecutar la aplicación: Para ejecutar el servidor en modo de desarrollo, deberá escribir el siguiente comando:

npm run dev

Nota: De forma predeterminada, iniciará el servidor en el puerto 3000; sin embargo, si el puerto ya está en uso, elegirá el primer puerto que esté libre a partir del 3001.

Ejemplo 1: escriba el siguiente código en pages/about.js. Puede visitar localhost:3000/about para ver el resultado.

export default function About({ message }) {
    return (
        <div>
            <h1>{message}</h1>
        </div>
    );
}
    
export function getServerSideProps() {
    return {
        props: { message: "Welcome to the About Page" },
    };
}

Producción:

 

Ejemplo 2: escriba el siguiente código en pages/home.js. Puede visitar localhost:3000/home para ver el resultado.

export default function Home({ message }) {
    return (
        <div>
            <h1>This is Home Page</h1>
            <h2>{message}</h2>
        </div>
    );
}
    
export function getServerSideProps() {
    return {
        notFound: true
    };
}

Producción:

 

Referencia: https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props