Performance de Get Initial Props

Clase 9 de 23 • Curso de Next.js 2018

Resumen

Al utilizar await en cada fetch al traer los datos desde la API nos evitamos el callback hell, pero estamos haciendo que el usuario tenga que esperar cerca de un segundo y medio hasta que se completen secuencialmente las tres request.
En esta clase veremos cómo con Promise.all() solucionamos este problema de performance al paralelizar nuestras request.

Jose Chirinos

student•

Se puede optimizar los requests de forma paralela con:
Promise.all()

Sintaxis:

let[req1, req2] = await Promise.all([
	fetch(url_1),
	fetch(url_2)
])

William Velázquez

student•

Opte por optimizar un poco más la otra parte asíncrona después de que se obtuvo lo necesario de la API quedándome de la siguiente forma:

		let [dataChannel, dataSeries, dataAudios] = await Promise.all([
      reqChannel.json(),
      reqSeries.json(),
      reqAudios.json()
    ])
    
    let channel = dataChannel.body.channel
    let series = dataSeries.body.channels
    let audioClips = dataAudios.body.audio_clips

😃

Eduardo Hidalgo Díaz Rugama

student•

te falta meterle manejo de errores, y que muestres un mensaje de error amigable en caso que te falle algun llamado. Igual, algo interesante, ¿como le harías para pintar en pantalla aquellos llamados que si se cumplieron y solo mostrar el error en la sección donde truene?

Sergio Alejandro Trejo Cuxim

student•

Existen varias formas de lo que plantea Eduardo, para el caso de los 'child_channels', podemos con un IF si la request tiene o no datos, si tiene entonces regresar la data, de lo contrario, regresar la data con un mensaje de error.

Juan Esteban Deossa Pertuz

student•

Cada vez que tengamos la necesidad de realizar varias peticiones a una API, la mejor practica es usar Promise.all(), es una función que nos permite realizar varias peticiones en paralelo, nos resulta bastante útil para mejor la rapidez de carga.

Luis Lira

student•

Si quieren hacer tanto la request como la parte de pasar a JSON en la misma parte donde se hacen todas juntas, pueden usar .then()

Personalmente a mí me gusta más así para no declarar tantas variables ^^

static async getInitialProps({query}){
        let idChannel = query.id

        let [reqChannel, reqSeries, reqAudios] = await Promise.all([
            fetch(`https://api.audioboom.com/channels/${idChannel}`).then((response) => response.json()),
            fetch(`https://api.audioboom.com/channels/${idChannel}/child_channels`).then((response) => response.json()),
            fetch(`https://api.audioboom.com/channels/${idChannel}/audio_clips`).then((response) => response.json())
        ])

        let channel = reqChannel.body.channel;
        let series = reqSeries.body.channels;
        let audioClips = reqAudios.body.audio_clips;

        return { channel, audioClips, series }
    }```

Diego Ivan Padilla Bernal

student•

Lo que hace el profesor no está del todo mal porque lo ideal es escribir código de forma vertical y no horizontal para hacerlo más legible pero pues fuera de eso ya depende de gustos

Por cierto en tu caso ya no sería la request sino la data así que esto ya es de buenas practicas, y las buenas practicas dicen que debes nombrar las variables conforme lo que tienen que sería:

[dataChannel, dataSeries, dataAudios]

Antonio Hernández Campos

student•

Siempre se debería buscar que el código sea fácil de leer, regularmente se pasa mucho más tiempo leyendo código existente que escribiendo código nuevo y tiene muchos beneficios como mayor limpieza, fácil comprensión y por tanto fácil mantenimiento del mismo (entre muchos otros beneficios).

Por ejemplo: Tener únicamente ".json()" como en el código original es mucho más fácil de leer que esta versión: .then( ( response ) => response.json() )

Mauricio Hernan Cabrera

student•

Bueeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee e esto esta genial!

static async getInitialProps ({ query: { id }}) {
    const [reqChannel, reqAudio, reqSeries] = await Promise.all([
      fetch(`https://api.audioboom.com/channels/${id}`),
      fetch(`https://api.audioboom.com/channels/${id}/audio_clips`),
      fetch(`https://api.audioboom.com/channels/${id}/child_channels`)
    ])

    const [
      { body: { channel }},
      { body: { audio_clips: audioClips }},
      { body: { channels: series }}
    ] = await Promise.all([
      reqChannel.json(),
      reqAudio.json(),
      reqSeries.json()
    ])
    
    return {
      channel,
      audioClips,
      series
    }
  }

Daniel Gaspar Chi Caballero

student•

Usando aún mas la desestructuración y cachando errores

static async getInitialProps({ query: { id } }) {
    try {
      const [reqChannel, reqAudios, reqChilds] = await Promise.all([
        fetch(`https://api.audioboom.com/channels/${id}`),
        fetch(`https://api.audioboom.com/channels/${id}/audio_clips`),
        fetch(`https://api.audioboom.com/channels/${id}/child_channels`),
      ]);
      const { body: { channel } } = await reqChannel.json();
      const { body: { audio_clips } } = await reqAudios.json();
      const { body: { channels } } = await reqChilds.json();
      return { channel, audio_clips, channels };
    } catch ({ message }) {
      return (message);
    }
  }

Elvis Aaron Retiz

student•

¿Saben que es lo que tengo que hacer para integrar mi aplicación con firebase para usar firestore?

Johan Stivens Suarez Galindo

student•

Por supuesto, solo tienes que configurar firebase en tu proyecto con un par de parametrizaciones que firebase te brinda cuando creas tu proyecto y asimismo hacer las peticiones a firestore que prefieras. Cuando creas Firebase, este te brinda el código de configuración y cada que debas realizar alguna funcionalidad de las que te brinda firebase, debes invocar esa configuración, te recomendaría que la configuraras en un archivo "firebase.js" y lo llames cada que lo requieras.

Adrian Morales Rosas

student•

No me gusto esta clase, se salta muchas cosas que en un principio son difíciles de entender

Daniel Esteves

student•

Hola Antony, ¿podrías contarnos que cosas te dieron dificultad?

Diego Alejandro Cardona Giraldo

student•

Porqué usamos let [req1, re2] en vez de const [req1, req2]?

Probé con const y me funciona muy bien. Por favor alguien digame que diferencia puede haber entre uno y otro.

Erik Elyager

student•

Si usas const tanto req1 como req2 no podrán ser reasignadas en ningún momento en el código:

req1 = 'Otro valor' // Esto te muestra un error

const se usa para cuando quieres que una variable sea inmutable, si este es el caso, adelante.

Diego Ivan Padilla Bernal

student•

Yo creo que usar let lo hizo más por costumbre porque en este caso lo ideal si seria const porque no se modifica

Sergio Alejandro Trejo Cuxim

student•

Promise.all

Tener en cuenta que puede romperse: Si alguna de las promesas pasadas en el argumento iterable falla, la promesa all es rechazada inmediatamente con el valor de la promesa que fué rechazada, descartando todas las demás promesas hayan sido o no cumplidas. - MDN

Para evitar que se termine el ciclo por "falla" implemente lo siguiente, no es lo mejor pero funciona, espero comentarios.

Gracias a esto si alguno falla continua la ejecución de las demás.

const [ requestChannel, requestClips, requestChilds ] = await Promise.all([
   request.get(`/channels/${idChannel}`, '').catch(error => error),
   request.get(`/channels/${idChannel}/audio_clips`, '').catch(error => error),
   request.get(`/channels/${idChannel}/child_channels`, '').catch(error => error)
]);

Utilicé otro cliente HTTP para utilizar las llamadas al API, pero utilicen la Fetch del curso.

René Sanchez

student•

Muy buen aporte :)

Nacho Ávila

student•

Me pregunto si no es más óptimo cargar el contenido de la pagina mínimo con un loader y una vez cargada la página hacer estas request. El tiempo de carga sería el mismo pero tanto para arañas de búsqueda como para el usuario, la página se carga antes aunque sin contenido útil. Creo que es el standard actual. ¿Que opináis?

Daniel Esteves

student•

No te lo recomiendo, siempre debemos mostrarle a nuestros usuarios contenido para darle cierto feedback de lo que está pasando, y los loaders suelen ser molestos

Jhair Guzman

student•

Usando getServerSideProps y declarando funciones asíncronas, se puede tener un código más modulado:

Cada función asíncrona se encarga de obtener datos puntuales del canal.

async function getChannel(channelId) {
  const request = await fetch(`https://api.audioboom.com/channels/${channelId}`);
  const { body: { channel } } = await request.json();
  return channel;
}

async function getAudioclips(channelId) {
  const request = await fetch(`https://api.audioboom.com/channels/${channelId}/audio_clips`);
  const { body: { audio_clips } } = await request.json();
  return audio_clips;
}

async function getChildChannels(channelId) {
  const request = await fetch(`https://api.audioboom.com/channels/${channelId}/child_channels`);
  const { body: { channels } } = await request.json();
  return channels;
}

export async function getServerSideProps({ query }) {
  const [channel, audioClips, series] = await Promise.all([
    getChannel(query.id),
    getAudioclips(query.id),
    getChildChannels(query.id),
  ]);

  return {
    props: { channel, audioClips, series },
  };
}

Wilson Fabian Pérez Sucuzhañay

student•

Consulta como se deberia hacer el await si para el siguiente fecht necesita del anterior ya no servivio el all? ¿Qué metodo deberiamos utilizar?

Ricardo José Galarza Palacios

student•

Un poco mas corto

  static async getInitialProps({ query }) {
    let [reqChannel, reqAudioClips, reqSeries] = await Promise.all([
        fetch(`https://api.audioboom.com/channels/${query.id}`),
        fetch(`https://api.audioboom.com/channels/${query.id}/audio_clips`),
        fetch(`https://api.audioboom.com/channels/${query.id}/child_channels`)
    ]);
    let channel = (await reqChannel.json()).body.channel;
    let audioClips = (await reqAudioClips.json()).body.audio_clips;
    let series = (await reqSeries.json()).body.channels;
    return {channel, audioClips, series}
  }```

VICTOR MEZA

student•

Aquí el código de ésta clase. Excelente tip del Promise.All()

export default class extends React.Component {
  static async getInitialProps({ query }) {
    let idChannel = query.id;

    let [reqChannel, reqSeries, reqAudios] = await Promise.all([
      //Mejora el performance de la App porque hace los request en paralelo
      fetch(`https://api.audioboom.com/channels/${idChannel}`),
      fetch(`https://api.audioboom.com/channels/${idChannel}/child_channels`),
      fetch(`https://api.audioboom.com/channels/${idChannel}/audio_clips`)
    ]);

    let dataChannel = await reqChannel.json();
    let channel = dataChannel.body.channel;

    let dataAudios = await reqAudios.json();
    let audioClips = dataAudios.body.audio_clips;

    let dataSeries = await reqSeries.json();
    let series = dataSeries.body.channels;

    return { channel, audioClips, series };
  }

  render() {
    const { channel, audioClips, series } = this.props;

    return (
      <div>
        <header>@viistorrr Podcasts</header>
        <h1>{channel.title}</h1>

        <h2>Ultimos Podcasts</h2>
        {audioClips.map(clip => (
          <div>{clip.title}</div>
        ))}

        <h2>Series</h2>
        {series.map(serie => (
          <div>{serie.title}</div>
        ))}

        <style jsx>{`
          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));
          }
          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%;
          }
          h1 {
            font-weight: 600;
            padding: 15px;
          }
          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;
            background: white;
          }
        `}</style>
      </div>
    );
  }
}

Luis Diaz Venero

student•

Request paralelas a un api, mejora de performance

Jonathan Andres Vasquez Valle

student•

Si utilizan axios, no es necesario hacer la conversión a json:

Deben instalar primero axios e importarlo.

import axios from "axios";

//Capturamos la data de la api
 let data= await axios.get("https://api.audioboom.com/channels/recommended");

//La respuesta es un objeto con la propiedad data donde viene todo como un json

return data.data

Jose Adrian Valentin Rodriguez

student•

en todo los componentes que maneje muchas consultas tengo que ocupar el promise.all eso no afecta? si consultara muchos componentes en el componente index? ejemplo mi index llamara 4 componentes y todos llaman varias consultar?

Alessandri Fonseca

student•

El promise.all() ejecuta tus promesas en paralelo para que el tiempo de espera sea menor, podrías hacerlo una a una pero por el tiempo de espera seria una mala experiencia de usuario. En tu caso podrías hacer las consultas en el index con promise.all y pasarla como propiedades a tus 4 componentes

Alejandro Hernández

student•

Asi puede implementarse axios en el getInitialProps

channel.getInitialProps = async ({ query }) => {
    let idChannel = query.id;

    let URL1 = `https://api.audioboom.com/channels/${idChannel}`
    let URL2 = `https://api.audioboom.com/channels/${idChannel}/audio_clips`
    let URL3 = `https://api.audioboom.com/channels/${idChannel}/child_channels`

    let [ reqChannel, reqAudios, reqSeries ] = await Promise.all([ axios.get(URL1), axios.get(URL2), axios.get(URL3) ]);
    
    const dataChannel = await reqChannel.data;
    let channel = dataChannel.body.channel;

    const dataAudios = await reqAudios.data;
    let audioClips = dataAudios.body.audio_clips;

    const dataSeries = await reqSeries.data;
    let series = dataSeries.body.channels;

    let response = { channel, audioClips, series }
    return {...response}
}

Jonathan Andres Vasquez Valle

student•

Axios lo hace más interesante porque te devuelve todo como un json, yo en todo el curso he utilizado axios. Interesante aporte.

		let [dataChannel, dataSeries, dataAudios] = await Promise.all([
      reqChannel.json(),
      reqSeries.json(),
      reqAudios.json()
    ])
    
    let channel = dataChannel.body.channel
    let series = dataSeries.body.channels
    let audioClips = dataAudios.body.audio_clips

static async getInitialProps({query}){
        let idChannel = query.id

        let [reqChannel, reqSeries, reqAudios] = await Promise.all([
            fetch(`https://api.audioboom.com/channels/${idChannel}`).then((response) => response.json()),
            fetch(`https://api.audioboom.com/channels/${idChannel}/child_channels`).then((response) => response.json()),
            fetch(`https://api.audioboom.com/channels/${idChannel}/audio_clips`).then((response) => response.json())
        ])

        let channel = reqChannel.body.channel;
        let series = reqSeries.body.channels;
        let audioClips = reqAudios.body.audio_clips;

        return { channel, audioClips, series }
    }```

static async getInitialProps ({ query: { id }}) {
    const [reqChannel, reqAudio, reqSeries] = await Promise.all([
      fetch(`https://api.audioboom.com/channels/${id}`),
      fetch(`https://api.audioboom.com/channels/${id}/audio_clips`),
      fetch(`https://api.audioboom.com/channels/${id}/child_channels`)
    ])

    const [
      { body: { channel }},
      { body: { audio_clips: audioClips }},
      { body: { channels: series }}
    ] = await Promise.all([
      reqChannel.json(),
      reqAudio.json(),
      reqSeries.json()
    ])
    
    return {
      channel,
      audioClips,
      series
    }
  }

static async getInitialProps({ query: { id } }) {
    try {
      const [reqChannel, reqAudios, reqChilds] = await Promise.all([
        fetch(`https://api.audioboom.com/channels/${id}`),
        fetch(`https://api.audioboom.com/channels/${id}/audio_clips`),
        fetch(`https://api.audioboom.com/channels/${id}/child_channels`),
      ]);
      const { body: { channel } } = await reqChannel.json();
      const { body: { audio_clips } } = await reqAudios.json();
      const { body: { channels } } = await reqChilds.json();
      return { channel, audio_clips, channels };
    } catch ({ message }) {
      return (message);
    }
  }

const [ requestChannel, requestClips, requestChilds ] = await Promise.all([
   request.get(`/channels/${idChannel}`, '').catch(error => error),
   request.get(`/channels/${idChannel}/audio_clips`, '').catch(error => error),
   request.get(`/channels/${idChannel}/child_channels`, '').catch(error => error)
]);

async function getChannel(channelId) {
  const request = await fetch(`https://api.audioboom.com/channels/${channelId}`);
  const { body: { channel } } = await request.json();
  return channel;
}

async function getAudioclips(channelId) {
  const request = await fetch(`https://api.audioboom.com/channels/${channelId}/audio_clips`);
  const { body: { audio_clips } } = await request.json();
  return audio_clips;
}

async function getChildChannels(channelId) {
  const request = await fetch(`https://api.audioboom.com/channels/${channelId}/child_channels`);
  const { body: { channels } } = await request.json();
  return channels;
}

export async function getServerSideProps({ query }) {
  const [channel, audioClips, series] = await Promise.all([
    getChannel(query.id),
    getAudioclips(query.id),
    getChildChannels(query.id),
  ]);

  return {
    props: { channel, audioClips, series },
  };
}

  static async getInitialProps({ query }) {
    let [reqChannel, reqAudioClips, reqSeries] = await Promise.all([
        fetch(`https://api.audioboom.com/channels/${query.id}`),
        fetch(`https://api.audioboom.com/channels/${query.id}/audio_clips`),
        fetch(`https://api.audioboom.com/channels/${query.id}/child_channels`)
    ]);
    let channel = (await reqChannel.json()).body.channel;
    let audioClips = (await reqAudioClips.json()).body.audio_clips;
    let series = (await reqSeries.json()).body.channels;
    return {channel, audioClips, series}
  }```

export default class extends React.Component {
  static async getInitialProps({ query }) {
    let idChannel = query.id;

    let [reqChannel, reqSeries, reqAudios] = await Promise.all([
      //Mejora el performance de la App porque hace los request en paralelo
      fetch(`https://api.audioboom.com/channels/${idChannel}`),
      fetch(`https://api.audioboom.com/channels/${idChannel}/child_channels`),
      fetch(`https://api.audioboom.com/channels/${idChannel}/audio_clips`)
    ]);

    let dataChannel = await reqChannel.json();
    let channel = dataChannel.body.channel;

    let dataAudios = await reqAudios.json();
    let audioClips = dataAudios.body.audio_clips;

    let dataSeries = await reqSeries.json();
    let series = dataSeries.body.channels;

    return { channel, audioClips, series };
  }

  render() {
    const { channel, audioClips, series } = this.props;

    return (
      <div>
        <header>@viistorrr Podcasts</header>
        <h1>{channel.title}</h1>

        <h2>Ultimos Podcasts</h2>
        {audioClips.map(clip => (
          <div>{clip.title}</div>
        ))}

        <h2>Series</h2>
        {series.map(serie => (
          <div>{serie.title}</div>
        ))}

        <style jsx>{`
          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));
          }
          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%;
          }
          h1 {
            font-weight: 600;
            padding: 15px;
          }
          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;
            background: white;
          }
        `}</style>
      </div>
    );
  }
}

import axios from "axios";

//Capturamos la data de la api
 let data= await axios.get("https://api.audioboom.com/channels/recommended");

//La respuesta es un objeto con la propiedad data donde viene todo como un json

return data.data

channel.getInitialProps = async ({ query }) => {
    let idChannel = query.id;

    let URL1 = `https://api.audioboom.com/channels/${idChannel}`
    let URL2 = `https://api.audioboom.com/channels/${idChannel}/audio_clips`
    let URL3 = `https://api.audioboom.com/channels/${idChannel}/child_channels`

    let [ reqChannel, reqAudios, reqSeries ] = await Promise.all([ axios.get(URL1), axios.get(URL2), axios.get(URL3) ]);
    
    const dataChannel = await reqChannel.data;
    let channel = dataChannel.body.channel;

    const dataAudios = await reqAudios.data;
    let audioClips = dataAudios.body.audio_clips;

    const dataSeries = await reqSeries.data;
    let series = dataSeries.body.channels;

    let response = { channel, audioClips, series }
    return {...response}
}

Performance de Get Initial Props

Introducción a Next.JS

¿Dónde aprender Next.js actualizado?

¿Qué es Next.JS?

Creando nuestra primera página

Styled JSX

Server Side Rendering

Aprende qué es Server Side Rendering

Intro a getInitialProps

Utilizando el componente Link

Recibiendo Parámetros

Performance de Get Initial Props

Vista de Podcasts

Componentes Reutilizables

Creando componentes en React

Reorganizar la vista de podcasts

Navegación Avanzada

Gestionando Errores

Personalizando errores

¿Cómo diseñar URLs?

Configurando Next Routes

Implementando Next Routes

Vistas Híbridas

Implementar el Modal

Agregando un loader

Publicando nuestra app

Mejores prácticas en Github

Publicar la app con now

Conclusiones del curso