¿Qué es SSR en NextJS?

Next Js es un marco basado en React que proporciona a un desarrollador todo lo necesario para una aplicación de nivel de producción. 

SSR o Server Side Rendering también se conoce como renderizado dinámico. En SSR, la página se genera cada vez que el servidor recibe una solicitud. Páginas en las que los datos tienen que cambiar para un tipo particular de solicitud, esas páginas usan SSR, ya que los datos no son los mismos para cada solicitud y pueden variar con ellos. Para usar SSR para una página, necesitamos exportar una función asíncrona llamada » getServerSideProps «. Esta función asíncrona se llama cada vez que se realiza una solicitud para la página.

Sintaxis:

export default function Page( {data} ){
   return <>YOU CAN DISPLAY YOUR DATA ACCORDINGLY</>
}
export async function getServerSideProps() {
   // Your code
   const data = .... ;
   
   // Passing data to the Page using props
   return {
       props : {data}
   }
}

Nota: En lugar de datos, puede tomar cualquier otro nombre de la variable. Además, puede pasar múltiples accesorios separándolos con comas » , «. 

A continuación se muestra la implementación paso a paso:

Paso 1: crear la aplicación NextJS: puede crear un nuevo proyecto NextJs con el siguiente comando:

npx create-next-app gfg

Estructura del proyecto: Entonces, en este momento tenemos una aplicación Next Js llamada my-awesome-app cuya estructura de directorios se muestra en la imagen a continuación:

Estructura de directorios

Paso 1: Por lo tanto, vamos a crear una página con punto final como «/usuarios» creando un «usuarios.js» en nuestra carpeta «páginas» y luego recuperando a los usuarios de una API ficticia y luego mostrando esos datos en ese punto final.

API ficticia utilizada:

https://jsonplaceholder.typicode.com/users

Cree un archivo users.js. 

creó el archivo «users.js»

Paso 2: agregue el siguiente código al archivo «pages/users.js»:

// Inside "pages/users.js"
export default function Users( {data} ){
    return (
        <div>
            <h1>List of Users</h1>
            <ul>
                {data.map((user,index)=>{
                 return <li key={index}>Id : {user.id} , 
                     Name : {user.name} , Email : {user.email}
                 </li>   
                })}
            </ul>
        </div>
    )
}
  
export async function getServerSideProps() {
      
    // Fetching data
    const res = await fetch(
    'https://jsonplaceholder.typicode.com/users');
    const data = await res.json() ;
  
    // Passing data to the Product Page using props
    return {
        props : {data}
    }
}

Paso para ejecutar la aplicación: usando cualquiera de los 2 comandos dados, inicie el servidor de desarrollo:

npm run dev

O

yarn run dev

Salida: Y ahora vaya a » http://localhost:3000/users » para obtener la salida.

Salida del código anterior