Intro a getInitialProps

Clase 6 de 23 • Curso de Next.js 2018

Resumen

En esta clase vamos a ver la función getInitialProps de Next, que nos permite cargar el contenido principal de la página cuando tenemos que recurrir a una API.

Juan David Sánchez

student•

Si están usando Next.js 9.3 o que sea más nuevo. En su documentación de getInitialProps() recomiendan usar getServerSideProps() o getStaticProps().

La principal diferencia entre ambas funciones es que getServerSideProps() se llama en cada carga de página, mientras que getStaticProps() solo es llamada al momento de hacer build. Con esto anterior ya claro, sabemos que debemos usar getServerSideProps() para hacer lo que el profesor hizo esta clase.

Mi codigo usando getServerSideProps() quedo de esta forma:

import 'isomorphic-fetch';

function App({ channels }) {
  return (
    &lt;&gt;
      &lt;header&gt;Podcasts&lt;/header&gt;

      &lt;div className=&quot;channels&quot;&gt;
        {channels.map(channel =&gt; (
          &lt;div className=&quot;channel&quot;&gt;
            &lt;img src={channel.urls.logo_image.original} alt=&quot;&quot; /&gt;
            &lt;h2&gt;{channel.title}&lt;/h2&gt;
          &lt;/div&gt;
        ))}
      &lt;/div&gt;

      &lt;style jsx&gt;{`
        header {
          color: #fff;
          background: #8756ca;
          padding: 15px;
          text-align: center;
        }

        .channels {
          display: grid;
          grid-gap: 15px;
          padding: 15px;
          grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        }

        .channel {
          display: block;
          border-radius: 3px;
          box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
          margin-bottom: 0.5em;
        }

        .channel img {
          width: 100%;
        }

        .channel h2 {
          padding: 5px;
          font-size: 0.9em;
          font-weight: 600;
          margin: 0;
          text-align: center;
        }
      `}&lt;/style&gt;

      &lt;style jsx global&gt;{`
        body {
          margin: 0;
          background: white;
          font-family: system-ui;
        }
      `}&lt;/style&gt;
    &lt;/&gt;
  );
}

export async function getServerSideProps() {
  let req = await fetch('https://api.audioboom.com/channels/recommended');
  let { body: channels } = await req.json();

  return { props: { channels: channels } };
}

export default App;

Si tienen alguna duda sobre el codigo me pueden preguntar o ir a la documentación de Next.js.

Facundo Nahuel Herrera

student•

Gracias!!!

Sergio Toshio Minei

student•

getInitialProps

La función getInitialProps nos permite cargar el contenido principal de la página cuando tenemos que recurrir a una API.

static async getInicialProps() {
  //aquí traemos los datos
  let request = await fetch('url')
  let datos = await request.json()
  return { datos }
}

Luego de cargar los datos, los va a agregar a los props de React.

getInitialProps() solamente funciona en pages y es parte de next.js. No va a funcionar con otras librerías o frameworks.

Cuando se trabaja con Server Side Rendering, algunos métodos dejan de funcionar. Esto se debe a que la función ya no está corriendo por el navegador sino desde el servidor.

En este caso, vamos a instalar isomorphic-fetch que nos va a permitir usar fetch desde node.js.

$ npm add isomorphic-fetch

Para usarlo, solo debe de importarse.

import 'isomorphic-fetch';

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Diego Fernando Berrio Meza

student•

muchas gracias

Sergio Toshio Minei

student•

gracias a ti @Digbemez

Gregorio Garcia

student•

Si quisieramos utilizar las variables de css ¿sería de éste modo o hay una mejor manera?

Juan Castro

teacher•

Ya que estas usando template literals ( ` ) puedes usar variables nativas de JavaScript 😛 😄

GEORGIE WLADIMIR DUARTE CADENAS

student•

tamb puedes agregar sass o style a next y usar variables en el css

Elvis Aaron Retiz

student•

¿Alguien que me pueda decir porque me ocurre eso? Anexo codigo mas abajo

import "isomorphic-fetch";

export default class extends React.Component {
  static async getInitialProps() {
    let req = await fetch("https://api.audioboom.com/channels/recommended");
    let { body: channels } = await req.json();
    console.log({ channels });
    return { channels };
  }

  render() {
    const { channels } = this.props;
    return (
      <React.Fragment>
        <header>Podcast</header>

        {channels.map(channel => {
          <div>{channel.title}</div>;
        })}

        <style jsx>{`
          header {
            color: #fff;
            background: #8756ca;
            padding: 15px;
            text-align: center;
          }
        `}</style>

        <style jsx global>{`
          body {
            margin: 0;
            font-family: system-ui;
            background-color: white;
          }
        `}</style>
      </React.Fragment>
    );
  }
}

Robinson Ganchala

student•

Parece ser que es por que se usa un <a></a> sin un <Link> miralo aquí. https://platzi.com/clases/1311-next-js/12078-utilizando-ampltlinkampgt/ , pregunté lo mismo en esta clase https://platzi.com/clases/1311-next-js/12075-styled-jsx/ y me respondieron muy tarde, no se con certeza si es verdad por que ya acabe el curso.

Robinson Ganchala

student•

Recuerdo que actualice mi package.json y se me quitó, si encuentras la respuesta dimelo, gracias.

Diego Andres Cardenas Caro

student•

Tuve problemas siguiendo la clase, por las versiones de React y de Next, cambia la sintaxis. Trate de hacer lo mismo con la nueva sintaxis en este sandbox por si le sirve a alguien. Codesandbox

Jaime Gabriel González Célleri

student•

Si están utilizando componentes funcionales, así podrían implementar el getInitialProps:

const Page = () => (
   <h1>Hello World</h1>
)

Page.getInitialProps = async () => {
}

export default Page

Ana Maria Hernandez Ruiz

student•

Este curso debería de actualizarse y dejar de usar componentes de clase

Jorge Luis Garnica Blanco

student•

import React from 'react'

const index = ({ }) => { return (

<div> <header> <h3>Podcast</h3> </header> <style jsx>{` header { color:white; background:#8756ca; padding:15px } h3{ margin: auto; text-align:center }

`}

</style> <style jsx global> {` body { margin:0; font-family: system-ui } `} </style> </div> ) }

index.getInitialProps = async (ctx) => { const res = await fetch('https://api.audioboom.com/channels/recommended') const { body: channels } = await res.json() return { channels } } export default index

//// Por si aún no actualizaron, aquí está el código ejemplo para hacerlo como si fuera un FUNCTIONAL COMPONENT Referencia: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

Edwin García

student•

Si están usando componentes funcionales y el getInitialProps les está dando dificultades pueden hacerlo de esta manera...

import { Fragment } from 'react'
import 'isomorphic-fetch'

function Home({ channels }) {
    return (
        <Fragment>
            <header>Podcast</header>

            {
                channels.map(channel => <div>{channel.title}</div>)
            }

            <style jsx>{`
                header {
                    color: #FFF;
                    background: #8756CA;
                    padding: 15px;
                    text-align: center;
                }
            `}</style>

            <style jsx global>{`
                body {
                    margin: 0;
                    font-family: system-ui;
                    background: white;
                }
            `}</style>
        </Fragment>
    )
}

Home.getInitialProps = async () => {
    const req = await fetch('https://api.audioboom.com/channels/recommended')
    const { body: channels } = await req.json()
    return { channels }
}

export default Home;

Antonio Nicasio

student•

excelente curso muy bien explicado

José Andrés Cervera Novelo

student•

Código funcionando al día de hoy 05/OCT/19

import 'isomorphic-fetch';

export default class extends React.Component {
  static async getInitialProps() {
    let req = await fetch(
      'https://api.audioboom.com/channels/recommended?api_version=2'
    );

    let { body: channels } = await req.json();

    return { channels };
  }

  render() {
    const { channels } = this.props;
    return (
      <div>
        <header>Podcasts</header>

        <div className="channels">
          {channels.map(channel => (
            <div className="channel" key={channel.id}>
              <img src={channel.urls.logo_image.original} alt="" />
              <h2>{channel.title}</h2>
            </div>
          ))}
        </div>

        <style jsx>{`
          header {
            color: #fff;
            background: #8756ca;
            padding: 15px;
            text-align: center;
          }

          .channels {
            display: grid;
            grid-gap: 30px;
            padding: 20px;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          }

          .channel {
            display: block;
            border-radius: 3px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
            margin-bottom: 0.5;
          }

          .channel img {
            width: 100%;
          }

          h2 {
            padding: 5px;
            font-size: 0.9em;
            font-weight: 600;
            margin: 0;
            text-align: center;
          }
        `}</style>

        <style jsx global>{`
          body {
            margin: 0;
            font-family: system-ui;
          }
        `}</style>
      </div>
    );
  }
}

Brian Dennis Vega Hidalgo

student•

Algun plugin para para intellisense dentro de la etiqueta <style jsx>. todo se ve como texto

Jose Giovanni Vargas Rueda

student•

en este post encontré como hacerlo
https://github.com/zeit/styled-jsx/issues/186

GEORGIE WLADIMIR DUARTE CADENAS

student•

si usas VSCODE puedes buscar este vscode-styled-jsx como extension me funciona muy bien.

te dejo la web https://marketplace.visualstudio.com/items?itemName=blanu.vscode-styled-jsx

Daniel Muñoz Martín

student•

Hola Roberto ! Una pregunta: Tenemos en next los estados de los componentes de React ?

Quisiera añadir un feature a mi proyecto que sería crear una especie de loader, que desaparezca cuando la primera carga se haya realizado para que se muestre todo el contenido a la vez.

En react existe el ComponentDidMount, cómo podría conseguir eso en next ?

Saludos desde Suiza ! Me encanta la manera en la que explicas

Roberto Gonzalez

teacher•

Hola! Las páginas en Next son componentes estándar de React, por lo que dispones de todos los métodos de React.

Puntualmente componentDidMount sólo se ejecuta en el cliente en Next (y no durante SSR), por lo que se pueden hacer loaders y comportamientos más complejos que van por fuera del mecanismo de server side rendering.

Miguel Angel Morales Larriega

student•

Esta es otra forma de hacerlo con stales functional component y con unfetch

Eduardo Hidalgo Díaz Rugama

student•

mis respetos al profesor y a esta clase. Es asombroso como con las tecnologías adecuadas y la experiencia adecuada en 14 minutos crea un catálogo de podcasts. Sin palabras.

José antonio Cañizales

student•

Si alguien esta usando React Hooks se puede usar la function getInitialProps con esta syntaxis:

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}
Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
export default Page

Miguel Angel Morales Larriega

student•

No veo nada de React Hhooks en ese código, solo veo un functional component y si, esa es la forma correcta de usar getInitialProps en componentes funcionales.

Jorge Méndez Ortega

student•

Separe el código un poco para poder apreciar mejor lo que esta pasando.

Separe los estilos en un script llamado** component-style.js** lo curioso es que los estilos los toma correctamente pero no toma el :global(body) pero si lo coma cuando utilizo esto <style jsx global> y al usar un literal string use una variable para para el color .

const COLOR = "#1d76db";
export default (
    <style jsx>
        {`
            :global(body){
              padding: 0;
              margin: 0;
            }
            header {
              background-color: ${COLOR};
              color: white;
              padding: 15px;
              text-align: center;
            }
            .channels {
              display: grid;
              grid-gap: 15px;
              padding: 15px;
              grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            a.channel {
              display: block;
              margin-bottom: 0.5em;
              color: #333;
              text-decoration: none;
            }
            .channel img {
              border-radius: 3px;
              box-shadow: 0px 2px 6px rgba(0,0,0,0.15);
              width: 100%;
            }
            h2 {
              padding: 5px;
              font-size: 0.9em;
              font-weight: 600;
              margin: 0;
              text-align: center;
            }
        `}
    </style>
);

Este es el código del componente que estamos probando durante la clase, coloque algunos comentarios espero les funcionen de guia 😸.

import React, { Fragment } from "react";
import "isomorphic-fetch";

import StyleJSX from "./component-style";

const API = "https://api.audioboom.com/channels/recommended?api_version=2";

/**
 * Muestra el listado de PodCast.
 *
 * @param {object} props Listado de propiedades del componente.
 *
 * @return PodCastList.
 */
const PodCastList = (props) => {
    // Destructuración y definiendo un valor por defecto en el caos de que no exista el nodo
    const { channels = [] } = props;
    return (
        <Fragment>
            <header>Podcast List</header>
            <div className="channels">
                {
                    channels.map((channel) => {
                        const { id, title, urls: { logo_image: { original } } } = channel;
                        return (
                            <a className="channel" key={`potcast-${id}`}>
                                <img src={original} alt={title} />
                                <h2>{title}</h2>
                            </a>
                        );
                    })
                }
            </div>
            {StyleJSX}
        </Fragment>
    );
};

/**
 * Llamado a la api de audioboom.
 *
 * @return {Promise}.
 */
PodCastList.getInitialProps = async () => {
    const SEND = await fetch(API);
    // Destructuración y renombramiento del nodo body
    const { body: channels } = await SEND.json();
    return { channels };
};

export default PodCastList;

David Behar

student•

Según la documentación, getInitialProps dejó de ser recomendado, para este ejemplo utilicé getStaticProps en un componente funcional y se ve mucho más simple.

Notas sobre getInitialProps, hace data fetching en el compilado y tienes que regresar un objeto que tenga un elemento llamado props:

return {props:{channels}}

import fetch from 'node-fetch'
const index = ({ channels = [] }) =&gt; {
  return (
    &lt;&gt;
			...
    &lt;/&gt;
  )
}

export async function getStaticProps() {
  const res = await fetch('https://api.audioboom.com/channels/recommended')
  const { body: channels } = await res.json()
  return { props: { channels } }
}

export default index

Juan Rodrigo de la Cruz García García Briseño

student•

Aquí surge el problema que getStaticProps es llamado únicamente en el momento en que se hace el build... o sea que si el API cambia constantemente, no te estará cargando el contenido porque solo hace el llamado al momento de hacer el build. Por otro lado podrías usar getServerSideProps el cual es más lento que getStatic pero tendrás la funcionalidad de que se esté actualizando constantemente la información del lado del servidor. Uno es para contenido que nunca va a cambiar o su cambio no será constante e implica hacer un build nuevamente y otro es para contenido dinámico que es el caso del API

David Behar

student•

Es correcto Roganoalien, en siguientes clases ya lo hice como lo comentas, gracias

Julio Cesar Estrada Marcial

student•

Podriamos usar axios en lugar de isomorphic-fetch?

Juan Castro

teacher•

Pos sí :sweat_smile:

Julio Cesar Estrada Marcial

student•

Gracias!

Baltazar Ortega

student•

¿Porqué en getInitialProps() está

return { channels }

y luego otra ves en render()

const {  channels }  = this.props

Diego Forero

Team Platzi•

getInitialProps es un método que se ejecuta para llamar la información de fuentes de datos remotas como un api, lo que retorna esta función lo guarda en this.props, por esto luego en el método render se vuelve a asignar this.props a { channels }

Andres Vera

student•

dentro de la función render, siempre que quiera ejecutar un map debo utilizar paréntesis en lugar de llaves para que se haga render?, por que lo hice asi y no me dio error: objeto.map((param)=>{ <div>param.param</div> }) no me dio error pero tampoco hizo render, me gustaria saber cual es la diferencia entre usar llaves y parentesis y si esto es una particularidad de jsx. Gracias

Diego Ivan Padilla Bernal

student•

Es sencillo, cuando usas llaves tu tienes que usar un 'return' si es que quieres retornar algo porque a veces quieres hacer operaciones antes de retornar algo, pero cuando sabes que todo lo que está en la función va a retornar se usa paréntesis. Por ejemplo esto sería similar

objeto.map((param) => {
	return <div>{param.param}</div>
})

objeto.map((param) => (
	<div>{param.param}</div>
))

pero también como es una simple linea se puede simplificar más o sea ya no hace falta poner llaves ni parentesis (solo aplica cuando se tiene una linea de código)

objeto.map((param) => <div>{param.param}</div>)

Y este sería un ejemplo donde se tiene que usar llaves a fuerza porque el "console.log" no se puede retornar

objeto.map((param) => {
	console.log(param)
	return <div>{param.param}</div>
})

Andres Vera

student•

muchas gracias por tu respuesta Diego, muy clara la explicación.