hoy lo que vamos a hacer es añadir SEO a nuestra aplicación de React y para ello lo vamos a hacer desde cero, vamos a ver de forma incremental o vamos a hacer una especie de hook para añadirle el SEO más básico a nuestra aplicación de React y luego vamos a ver que se nos puede quedar corto y vamos a utilizar una biblioteca, que puede ser React Helmet o React Head, lo vamos a decidir ahí en tiempo real, vamos a ver cuál de las dos utilizamos.
Entonces esa sería la primera cosa, para ello nuestra aplicación actualmente tiene un error que tenemos que solucionar y lo vamos a solucionar, que es al intentar entrar en un detalle a la URL directamente, después de eso lo que vamos a hacer es tener el hook para cambiarle el título, para cambiar la descripción y luego veremos que necesitamos una biblioteca.
Una vez que tengamos ya todo eso, lo que vamos a hacer es integrar el deploy con GitHub, de forma que vamos a tener, gracias a Vercell, vamos a tener que por cada PR que hagamos y por cada comita master que hagamos, vamos a tener una URL donde se va a deployar nuestra aplicación.
O sea que vamos a tener una especie de continuous deployment y además vamos a tener por cada PR, vamos a tener una URL única, por lo tanto la vamos a poder compartir con nuestros compañeros para que vean cómo lo estamos haciendo y todo esto, ¿vale?
Así que vamos a ver primero el error, el error que tenemos que muchos de vosotros me lo habéis recordado, ¿vale?
Entonces, antes de darle, os digo, darle al like, darle al like, que os vea el dedito ahí para arriba, ¿vale?
Darle al like si os gusta que haya errores como este o que los vayamos a solucionar, mejor dicho, ¿vale?
Vamos a hacer una búsqueda más interesante de Avengers, que sea más, ¿vale?
Esta de los Avengers, ¿vale?
Cuando entrábamos al detalle, pues esto funcionaba perfectamente, lo cual pues está genial.
Pero si yo refresco, el problema que va a haber aquí es que esto peta, peta, ¡pum! Fuera.
¿Por qué? Porque dice que no puede leer la propiedad title de undefined.
Esto está ocurriendo porque dejamos un poco a medias este tema en la página del detalle, aquí.
Aquí lo que estábamos haciendo es utilizar un hook para usar los GIF que ya habíamos descargado previamente en la parrilla, en los resultados de búsqueda.
Pero ¿qué pasa si no pasamos por una parrilla, no? ¿Qué pasa si no pasamos por los resultados de búsqueda y directamente vamos a una URL de un detalle?
Pues claro, este GIF que tenemos aquí, de hecho, pues a ver, este GIF que tenemos aquí, si ponemos aquí el console.log del GIF, de un solo GIF,
y esto, pues abrimos las herramientas de desarrollo, voy a poner esto aquí abajo, ¿vale?
Por aquí, pues podemos ver que esto es undefined. Esto es undefined. Entonces, esto es lo que está petando, ¿no?
Este GIF no está todavía, digamos, en esta caché que teníamos, donde, bueno, es una caché, en realidad es una variable,
donde estábamos guardando todos los GIF. Como antes lo que hacemos es de resultados de búsqueda, hacemos clic y vamos al detalle,
pues claro, esto ahora no está así. Así que lo que tenemos que hacer es solucionarlo.
Para ello, lo que vamos a hacer es crear un nuevo servicio. Teníamos un servicio para tomar todos los GIF.
Este es el getGIF, el de los trending, que era el de la home, si recordáis, aquí en la home, que ahora además es súper colorido.
Estas tendencias, teníamos un servicio para tomar todas las tendencias y ahora lo que vamos a hacer es crear uno para recuperar un solo GIF.
Así que vamos a hacer esto, un getSingleGIF.js. Aquí, pues bueno, sería muy similar a este getGIF, así que vamos a ir copiando algunas cositas,
como importar la API key. Esto lo podemos copiar también. Vamos a necesitar una función que nos transforme la respuesta de la API.
Por ahora vamos a dejarlo vacío. Y vamos a exportar aquí por defecto el getSingleGIF, que le vamos a pasar como parámetro la ID del GIF que queremos recuperar.
Y que solo lo haremos cuando no lo tengamos en esa variable que comentaba antes. Entonces, tenemos que hacer un fetch.
Aquí el fetch, vamos a ver, aquí esto es un poco rollo, voy a mover esto aquí, porque si no, cambiar entre, siempre voy a pasar por escritorio.
Pues vamos a ver aquí, ah, mira, esto es que os he enseñado GIF y lo he dejado fuera. Vale, vamos a ver.
Aquí tenemos los endpoints de GIF y uno de ellos es el getGIF by ID endpoint. Pues este es justo el que vamos a utilizar.
Ya podemos ver que es api.gif.com barra v1, que esto ya lo tenemos aquí. En API URL esto ya lo tenemos. Así que perfecto.
Lo que necesitamos es lo demás. Es el barra GIF. Este es el barra GIF. Lo que tenemos que hacer aquí.
Un template string. Vamos a utilizar el API URL. Y aquí ponemos barra GIF. Y aquí hay que pasarle, importante, que no se nos olvide,
la ID que necesitamos buscar. Aquí se me ha olvidado el function. Aquí está. Vale. Vale. Y ahora, además, la API key, que si no, no funciona.
Que esto es una API que necesita una API key. Vale. Pues lo dejamos así. Voy a quitar esto para que tenga un poquito más de espacio.
Entonces, una vez que tenemos la respuesta, pues lo que hacemos es transformarlo a JSON. Y una vez que tenemos la respuesta en JSON,
lo que vamos a hacer es que pase por él from API response to GIF. Así que este método que le pasamos aquí es el que recibe el API response.
Si miramos un poco, aquí nos dice lo que es la respuesta. Cuando va bien, pues tenemos data y meta. Y data es un objeto GIF.
Así que es muy similar a lo que teníamos en el otro servicio. Así que en este caso, pues eso. Vamos a recuperar el data del API response.
Y dentro de data, vamos a ver lo que tiene. Creo que estábamos sacando el ID, el images. Bueno, vamos a copiarlo para ir más rápido con esto.
Vamos a ir aquí al gate GIF, que ya estábamos haciendo todo esto. Vale. Esto lo hacíamos para cada uno. Vale.
Que estábamos recuperando images, pues esto. Y este es el que queremos recuperar. Pues esto es lo que tenemos que hacer.
Es del data, sacamos images, el title, el ID y tomamos la URL del downsize medium porque nos devolvía como una lista de imágenes.
Entonces vamos a recuperar solo una porque es la que tiene calidad media y así tampoco tarda mucho en cargar.
Y devolvemos el title, la ID y la URL. Vale. Con esto, pues ya tendríamos el servicio.
Pero claro, ahora alguien me dirá, bueno, pero este servicio, ¿dónde lo estamos utilizando?
Pues ahora mismo no lo estamos utilizando para nada. Pero al menos con este servicio seríamos capaces de pasarle una ID a este servicio
y que nos devuelva el JSON de ese GIF. Ahora, para solucionar del todo este problema, vamos a ir, vamos a entrar aquí, el de Duracell.
Vale. Y vamos a hacer esto más chiquitito, que vea. Vale. Entonces, si recargamos, ese es el problema que queremos solucionar.
Vamos al detalle. Aquí tenemos esto, el useGlobalGIF, que como decía, este es el que tiene la variable así donde están guardados todos los GIFs
que previamente habíamos visto en el resultado de búsqueda. Entonces, todo esto lo vamos a cambiar porque no tiene mucho sentido el sentido de utilizar el useGlobalGIF
aquí directamente. Lo que estaría bien es que tuviéramos un nuevo hook que le pudiéramos pasar la ID y que automáticamente buscase esa ID,
si la tiene en la variable, pues que la devuelva de ahí. Y si no la tiene, pues que vaya a buscarla.
Así que vamos a crear un nuevo hook. Vamos aquí a hooks y le vamos a llamar useSingleGIF.
Bueno, más o menos, ya se va entendiendo más o menos la idea, ¿no?
Entonces, vamos a importar el hook de useGIF. Este, que es el que tiene la información de los GIFs, que es donde vamos a poder recuperar
si el GIF realmente lo tenemos en esa variable. Así que useGIF from hooks. Y aquí useGIF. Y aquí, bueno, por ahora vamos a dejarlo así.
Vamos a hacer un export default function, useSingleGIF. Y aquí lo que tenemos que pasarle, lo que le vamos a querer pasar a este hook es la ID.
¿Vale? Entonces, ahora que tenemos la ID, vamos a hacer algo muy similar, que es lo que estábamos haciendo antes en el detalle.
¿Vale? Que era utilizar este useGIF. Recuperamos todos los GIFs. Esto tiene todos los GIFs si es que están.
Y aquí lo que podemos hacer es intentar recuperarlo de aquí. Y GIF from cache. Dicimos, vale, de los GIFs, búscame este GIF que la ID sea igual a la que estás pasando como parámetro.
Y aquí podría, básicamente, esto es lo que estábamos haciendo antes. Este hook ahora está haciendo exactamente lo que estábamos haciendo antes.
Así que ya lo podríamos utilizar, porque total, está haciendo la misma lógica que antes.
Solo que aquí, ahora hacemos este GIF, useSingleGIF, y le pasamos la ID.
Que esto nos venía del parámetro params. Que este params venía de la URL. ¿Vale?
Entonces, vamos a borrar esto, que es exactamente muy parecido a lo que ya estábamos haciendo.
Vamos a dejar el console.log.
Obviamente, esto va a seguir sin funcionar cuando entremos directamente a la URL.
Pero debería funcionar, debería funcionar cuando si entramos desde una parrilla.
¿Vale? O sea, entramos desde una URL, pues esto peta.
Y si entramos desde una parrilla, pues vemos que funciona.
O sea, este código está haciendo exactamente lo mismo que estaba haciendo antes.
Pero al menos ya hemos extraído esto a un hook externo que nos va a permitir hacer cierta magia aquí.
Para, bueno, pues para adaptar esto, ¿no?
Para que se adapte en el sentido de, vale, y si GIF from cache está vacío, ¿qué?
¿Qué hago? ¿No? Pues tengo que hacer algo.
Entonces, para hacer esto, lo mejor es que tengamos algún tipo de estado.
Así que vamos a añadir aquí un state, que sea GIF y un set GIF por si, claro,
si tenemos que recuperarlo en una llamada síncrona, necesitamos un efecto.
Y para eso tenemos que guardarlo en un estado.
Pero el estado inicial que vamos a tener aquí va a ser el GIF from cache.
¿Vale? Esto, de esta forma, el estado inicial al menos,
ya tendríamos ese valor si es que está disponible.
Vamos a importar el useState desde React.
Si no, esto no funciona.
Vale.
Entonces, ahora, pues nada, solo tendríamos que crear nuestro efecto.
El efecto, en principio, podríamos hacer que esto cambiase cada vez que tiene un GIF.
No tiene mucho sentido.
No, lo vamos a dejar así.
Este efecto, lo importante es que solo se ejecute si GIF no existe.
O sea, claro, porque si ya lo tenemos desde la caché, pues no vamos a querer hacer nada.
¿Vale?
Entonces, aquí es donde vamos a llamar al servicio.
Por ahora, antes de seguir aquí, para que antes, luego no se me olvide,
lo que voy a hacer aquí en este retur que tenemos aquí abajo,
ahora no vamos a devolver el GIF from cache.
Ahora vamos a devolver directamente el GIF.
Podría hacer así, pero como se me ocurre que vamos a añadir más cositas,
voy a devolver un objeto que tenga una propiedad GIF, que va a ser este GIF.
¿Vale?
Este GIF de aquí que tenemos en estado es el que vamos a devolver justamente aquí.
Y el que vamos a cambiar aquí dentro, ahora con llamar al servicio,
si no tenemos GIF.
Así que aquí en el detalle este, ahora tenemos que cambiar esto.
No tenemos que recuperar el GIF directamente, sino que lo tenemos que recuperar así.
¿Vale?
¿Vale?
Bueno, esto es normal, que siga sin funcionar.
Ahora funciona.
Vale.
Todo funciona exactamente como debería.
Entonces, ahora solo nos queda utilizar el servicio que teníamos.
Este servicio lo habíamos llamado getSingleGIF.
¿Vale?
Lo hago así directamente porque si ahora le doy al enter, me lo va a importar arriba.
Ah, no.
Me ha dejado fatal.
¡Ay!
¡Qué mal me ha dejado!
Vale.
Se supone, ahora sí, ahora se me lo va a hacer.
Es muy raro.
Vale.
¿Ves?
Ahora sí que me lo ha hecho.
La madre que lo parió.
Vale.
Pues eso.
Entonces, he puesto el servicio y me ha importado directamente arriba de dónde tengo este servicio.
Entonces, ¿qué es lo que necesita el getSingleGIF para funcionar?
Pues nada, vamos a verlo un momentito.
La ID.
¿Vale?
Y se le pasa como parámetro nombrado.
Esto que se dice como parámetro nombrado, en realidad es que le estamos pasando un objeto.
Y le estamos pasando la ID.
La ID ya la tenemos aquí, así que, perfecto.
Una vez que tengamos la respuesta, pues aquí esto nos devolverá el give.
Y aquí podemos hacer, pues, setGIF con el give.
Y ya está.
Ahora si guardamos los cambios de esto.
Vale.
Apetado también.
No pasa nada.
Ahora vamos a ver qué es lo que está pasando.
Vale.
Para esto, esto se puede escribir de una forma más corta, aunque me parece que luego lo vamos a tener que tirar para atrás.
Pero bueno, al menos para que sepáis que se pueden pasar funciones como parámetro y que quedan bastante bien.
¿No?
Que podéis hacer esto así.
Entonces, ha detectado que el efecto necesitaba dos dependencias, que es el give y la ID.
Porque, claro, si la ID cambia, vas a querer que este hook vuelva a recuperar esa información y te devuelva el give correcto.
Entonces, cambiaría el efecto y tal.
Si esto ocurriese, seguramente este give from caché habría que hacer algo para, si cambia la ID, como esto está recuperando el estado inicial, lo que tendríamos que hacer en el efecto es, cuando cambie la ID, voy a buscar en la caché otra vez.
Pero bueno, en este caso lo vamos a dejar así, porque tampoco creo que nos complique mucho.
Pero que lo tengas en cuenta, que el estado inicial, una vez que tú inicias un estado inicial, se queda ese valor ahí.
Quiero decir, si el give from caché cambia, este useState no va a cambiar de forma mágica.
Esto es un error muy típico que suele ocurrir.
Si la gente cree que, vale, si yo le he pasado al useState este valor inicial, si este valor inicial, por lo que sea, se actualiza, ah, pues se cambiará el state.
No. La única forma que este estado se va a cambiar a partir de que se inicia con ese valor es llamando a este setgif.
No hay otra. Así que tened mucho cuidado con esto, que esto es un error bastante común.
¿Qué iba a hacer yo ahora? Vale.
Lo que iba a hacer es, ¿por qué peta esto?
Esto me imagino que peta en el, vamos a la página directamente, y aquí el problema es que, claro, aquí no estoy haciendo ningún tipo de control.
Digo, no, si tienes el gif y punto. Aquí deberíamos poner que si no tenemos gif, no, si no tenemos gif, pues aquí devuelve, no, nada, y ya está.
Vale, pues ya está, ya está funcionando. Ahora he entrado directamente a la URL, ¿no? Y ya está, y ya tenemos ahí el gif.
Si entro aquí, pues esto funciona, y si recargo, pues funciona también.
Bien, obviamente, aquí vamos a ver en la network, vamos a ver la petición, ¿no?
Si refresco, veremos, bueno, no veremos porque está muy abajo, pero, pero, pero, pero, a ver, ¿dónde está? ¿Dónde está la petición?
Debe estar en algún sitio. Voy a hacer esto un poquito más grande. Aquí está, vale.
Aquí podemos ver, ¿no? Que hay una petición y que nos devuelve el gif.
Esta petición no está cuando venimos desde la parrilla.
Entonces, ¿por qué estoy arreglando esto? Porque esto me parece importante de cara a SEO, ¿no?
Si Google estamos dejando que vaya a un detalle, el problema es que si intenta entrar y revienta, pues no le va a gustar, ¿no?
Esto podríamos dejarlo un poquito más fino. Lo voy a hacer un poco así por encima, pero se podrían hacer cosas interesantes.
Por ejemplo, así cosas que se me ocurren. Pues tener un isloading, lo típico, ¿no?
Set isloading y así, pues vamos a sacar ese nuevo spinner que ha hecho este chico que es muy, muy chulo.
¿Vale? Esto por defecto es false y además, pues, aquí podríamos aprovechar para el 404 también.
Esto es un poco tricky porque el 404, cuando hablamos de cliente, no es, no es, podemos al menos redirigir a una página 404,
pero no le vamos a devolver el status code 404 a Google.
Tendríamos que hacer más cosas, pero al menos ya estaríamos controlando que ese detalle no existe.
Entonces, vamos a hacerlo para que veamos cómo es.
Por defecto, vamos a poner isloading iserror y lo que hacemos aquí, pues, antes de llamar al servicio,
isloading is false.
Ah, no, es true. Justo cuando antes de llamarlo sería true.
En el then, esto es lo que decía, que seguro que lo iba a tener que arreglar, ¿no?
El set give lo actualizamos así y aquí le decíamos set loading, pues ya sería set isloading, sería false.
Y cuando hacemos un catch de los errores, por ahora podríamos, esto es muy espartano, ¿eh?
Esto es muy simple porque podríamos mirar qué error ha sido, por qué ha ocurrido y según el error, pues, hacer diferentes cosas.
En este caso, al menos vas a decir, bueno, pues ha dejado de cargar, pero el error es true.
Y aquí, pues, el error sería false también.
Bueno, podríamos hacer algo así.
Y esto, el isloading y iserror, esto lo podríamos devolver aquí.
Isloading iserror.
Entonces, vamos a ver.
Ahora nuestro detalle, el detail este, aquí ahora podríamos recuperar toda esta información.
Si está cargando y si hay un error, ¿vale?
Entonces, si está cargando, pues teníamos un spinner.
Y ahí está muy bien.
Este sí que le importa la primera.
Bueno, es muy rápido, ¿no?
Pero a ver si puedo hacer esto más lento para que veamos el spinner, al menos.
A ver, a ver.
Hazte más grande.
¡Pum!
Vale.
Aquí, 3G, más chiquitito.
Y, bojo, esto, claro, 3G es para toda la petición.
Bueno, eventualmente saldrá aquí algo y veremos el spinner un momentito de nada, pero creo que valdrá la pena.
Porque, mira, mira, ese es el spinner.
Es súper bonito.
A ver, es el mismo de Giphy, pero es súper bonito.
Bueno, entonces ya estamos enseñando, al menos, ¿no?
El spinner.
Y lo típico.
Aquí, si es error, aquí lo que podemos hacer, podríamos mostrarle directamente el error,
pero lo que podemos utilizar es el redirect.
Es el componente redirect que teníamos de Wooter.
Que esto también tiene uno muy similar a React Router DOM, ¿vale?
O sea, todos los routers en React tienen que tener un redirect.
Así que le podemos decir que vaya a la página 404.
Creo que es así.
Lo vamos a ver ahora.
A ver qué pasa.
Así que importamos el redirect desde Wooter.
Y así lo que decimos es, si hay un error, lo redireccionas a la página 404.
Claro, ¿cuándo vamos a saber que hay un error?
Claro, pues en este caso, si intentamos buscar una ID que no existe, ¿no?
Si aquí, por ejemplo, ponemos midudev.
A ver si hay un GIF que se llama midudev.
Vale, pues, vale.
No se ve nada.
Esto es normal.
No se ve nada, pero fíjate la URL.
Ha hecho la redirección, ¿eh?
Al 404.
Falta aquí una barra, porque si no, va ahora, sí.
Porque si no, la redirección no la hace bien.
Entonces, cuando entramos a un detalle funciona bien, pero si intento entrar a un detalle que no existe, la ID, esto va a hacer la petición.
La petición va a petar, lo vamos a recuperar en el catch, vamos a setear el estado de isError a true, y esto nos va a permitir renderizar este redirect que irá al 404.
Entonces, aquí podemos ver, pum, que ahí queda.
Aquí ya, pues, nos quedaría crear la página 404 y en, ¿dónde están las rutas?
En algún sitio teníamos las rutas.
El app.
Aquí en el app tenemos diferentes rutas.
Pues deberíamos poner aquí la última ruta, que sea la 404.
Así.
Bueno, de hecho, podemos hacer algo muy...
Vamos a hacer esto así, rápidamente.
No le ha gustado.
Pensaba que se iba a tragar esto con patatas sin ponerle el path.
A ver, si le ponemos el path, le decimos que esto es un 404.
Aquí.
Así.
Ahí está.
Bueno, pues le decimos el path.
O creo que un asterisco, ¿no?
Que sería también...
Ah, no.
Tendría que mirar en guter.
No sé cómo es en guter, pero no creo que sea muy difícil.
En este caso, pues, le podríamos decidir.
Este es el path 404.
Aquí tienes el error.
Y ya está.
Al menos, pues, le informamos.
Obviamente, lo podemos hacer más bonito.
Y, bueno, ahí tenéis deberes también, por si lo queréis hacer.
¿Vale?
Voy a ver.
Voy a ver.
Aquí, ¿dónde me he quedado?
Ya me he quedado en el error.
Me he quedado con el loading.
O sea, que esto ya yo creo que lo tenemos listo, ¿no?
Lo hemos solucionado.
Ya podemos entrar en el caso que entre y tal.
Bueno, pues, bien.
Pues, ahora vamos a pasar ya a hacer el tema del SEO
para cambiar al menos el title.
Y antes, pues, voy a pasar a ver qué me estáis contando en el chat
que hace un ratito que os he dejado por aquí.
A ver, a ver.
Sí, en GitHub, en midudev, barra, react-live-coding.
Tenéis todo el código, todo el repositorio
con todo lo que hemos ido haciendo, ¿vale?
Álvaro Moral, muy buenas, midudev.
A ver qué aprendemos hoy.
Pues, hoy vamos a aprender SEO.
SEO con React, ¿vale?
Y aparte de cómo hemos arreglado esto.
Como siempre, la pregunta, si voy a subir el stream como vídeo,
sí, en mi canal de YouTube, al que te invito a que te suscribas,
si no lo estás, se quedan todos los streams,
se quedan grabados para que lo podáis ver cuando queráis.
Además, y os voy a enseñar una cosita muy chula
que he estado haciendo para que lo sepáis.
A ver.
Pues, una cosita, en los live estoy haciendo una cosa
para que sea mucho más fácil de consumir.
He hecho esto, ¿vale?
Ahora, en los live podéis encontrar las secciones.
No sé si se ve mucho, ¿vale?
Pero aquí se ve todas las secciones.
Entonces, es muy fácil que podáis navegar justo donde queráis.
Os ponéis encima y dice, ah, mira, aquí está haciendo esto,
aquí está haciendo esto.
Lo he ido separando de forma que podéis acceder directamente
a la sección que queréis, ¿vale?
Esto ocurre, esto no ocurre justo cuando lo subo
y, de hecho, hay algunos vídeos que todavía lo tengo que hacer
porque es un poquito laborioso.
Pero, al menos, de esta forma, pues,
si queréis revisar el live o lo que sea,
o solo os interesa una parte,
lo que podéis hacer es, ah, pues, ostras,
quiero ver el React Memo, ¿cómo era?
Pues, mira, ya sé que es en esta sección en concreto, ¿vale?
Creo que es muy útil y que os puede ayudar.
Así que no solo queda grabado,
sino que, además, pues, tiene esta cosita que tiene de ventaja.
Vale.
¿Qué más me comentáis por aquí?
Hay que ver, ¿eh?
Esto es como era la página antes
y esto como lo habéis dejado entre...
Y si vemos la anterior, es que ya sería una locura.
En fin.
¿Qué fuente utilizas en Visual Studio Code?
Utilizo Cascadia...
¿Cascadia?
Cascadia Code.
Cascadia...
Sí, Cascadia Code.
Es de Microsoft, a mí es una fuente que me encanta,
aunque yo tengo que decir que cambio más de fuente
que de calcetines, seguramente.
Entonces, no sé si eso es muy guarro.
Bueno, bueno, el caso, pues, tampoco cambio tanto de fuente.
El caso es que me gusta mucho.
Ahora estuve con FireCode, estuve con...
Con FireCode, estuve con Inconsolata, he estado con Dank Mono
y ahora estoy con Cascadia Code.
Por ahora me gusta muchísimo, además tiene ligaturas,
así que os la recomiendo, que es totalmente gratuita.
Es de Microsoft y, bueno, es de código abierto.
Además podéis ir viendo las evoluciones que tienen.
Seguramente tengo que hacer un vídeo, que me lo pedís mucho,
de mi editor y estas cosas, para ver cómo...
Qué utilizo, extensiones y todo esto.
Bueno, qué grande, muy bueno, genial, gracias.
Stark y Jonathan me dicen, muy bien, gracias por el aporte,
gracias por dividirlo en secciones.
Nada, hombre, sé que esto os puede ayudar.
No sé por qué Ferdinand Alexa pone piñas, os lo voy a enseñar,
porque no sé por qué pone piñas, pero me hace mucha gracia
que ponga piñas.
Vale, pues sí, creo que está muy bien y os puede ayudar.
Compartidlo con vuestros amigos, compartidlo con vuestros colegas.
Ya le decís, mira, y además tiene secciones, dale un like,
suscríbete al canal, hombre, no te lo pierdas.
Oye, muchas gracias, tengo que decir que muchísimas gracias a...
Paso por aquí, a primera persona.
Muchas gracias a todos y todas los que me escribís y me decís,
oye, buen trabajo, oye, qué bien.
Oye, no le puedo dar más veces like a este vídeo que me ha encantado,
que veo que los compartís en Twitter, en Facebook, no sé.
Todos los que me ayudáis en ese sentido.
De hecho, llegamos a los 7.000, muchísimas gracias a todos.
En el último live dijimos, a ver si llegamos a los 7.000 y tal,
y hemos llegado a 7.300, o sea, brutal.
Así que muchísimas gracias, porque sin vosotros y sin vosotras
esto no sería lo mismo.
Así que os lo agradezco, ¿vale?
Todo el trabajo que hacéis para que esto suma y siga.
Así que muchas gracias.
Sois todos y todas unos cracks.
Vale, pues nada, vamos a empezar ya con el SEO, ¿ok?
Esto estará en la sección, empezamos con el SEO.
Entonces, vamos a ver, ¿cómo vamos a hacer esto del SEO?
¿Y por qué vamos a hacer esto del SEO?
Primera pregunta, creo que es lo más interesante, ¿no?
Podemos ver que aquí, en el title, tenemos este Giphy Searching Gip, ¿no?
Si yo hago una búsqueda, pues esto sigue diciendo Searching Gip,
y si le damos al bueno de Keanu Reeves aquí en los 90,
pues sigue diciendo Searching Gip.
Entonces, no es un título que sea muy halagueño, ¿no?
Y tampoco nos podemos imaginar esto en Google, ¿no?
Indexándolo y que siempre, pues para todas nuestras páginas,
tenga el mismo título.
Seguro que tiene algún tipo de penalización.
Así que, lo que vamos a hacer, y esto es para empezar,
esto no es que os recomiende que lo hagáis así,
pero sí que me parece interesante, ya sabéis que yo soy muy pesado
con los fundamentos, ¿no?
De dónde salen las cosas, por qué, ¿no?
Y cómo se hacen realmente las cosas.
Si yo quisiese hacer esto, ¿cómo lo haría?
Entonces, creo que es fácil hacer esto del SEO,
y vamos a ver rápidamente un ejemplo para que veáis un poco por detrás
cómo funciona, ¿no?
O cómo podríamos hacer esto de una forma bastante sencilla.
Entonces, vamos a crear un hook que le vamos a llamar Use Title.
Hay diferentes estrategias, ¿eh?
Para hacer esto, una podría ser esto de crear un hook
o se podría crear un componente.
Seguramente tiene más sentido un componente.
Seguramente.
Pero como la biblioteca que vamos a utilizar después,
seguro que es con componente,
pues vamos a hacerlo con un hook, porque, bueno, porque podemos.
Entonces, vamos a hacer el Use Title
y lo único que tenemos que pasarle como parámetro es el title.
Ahora, aquí esto, bueno, vamos a ir a saco.
Vamos a ir a saco y luego lo arreglamos.
Hacemos un document.title y aquí le ponemos el title.
¿Ves que ya había importado aquí el Use Effect?
Pero no lo vamos a usar.
Vamos a ver que esto tiene problemas, ¿eh?
Pero vamos a ver por qué tiene problemas y cómo lo podemos arreglar.
Entonces, vamos a empezar con el detail, ya que era bastante,
era facilillo.
Lo que podemos hacer con el detail, voy a hacer esto aquí,
para que se vea un poco, vale, y se ve bien, perfecto.
Entonces, vamos a utilizar aquí este nuevo Use Title.
Es un hook súper sencillo que vamos a complicar cada vez un poquito más
para que funcione como debería,
pero vamos a ver qué problemas tiene este que hemos hecho,
que es bastante sencillo, ¿no?
Use Title, le pasas el title, pues toma, pum,
cambiamos el document.title.
Entonces, aquí lo único que tenemos que hacer es Use Title
y le pasamos el título que queremos.
Vamos a ponerle aquí Pepito y guardamos los cambios.
Vamos a ver si esto funciona.
Vale, esto no funciona.
¡Ay, no! No funciona.
Aquí podemos ver que ha dejado un undefined,
pero esto es porque lo que está esperando es un parámetro nombrado,
¿vale?
Title y guardamos.
Pepito, ¿vale?
Guardamos los cambios, ¿vale?
Y ya tenemos Pepito.
O sea, esto es, sí, lo sé, seguramente estás diciendo,
venuda chorrada, ¿vale?
Pero vamos a ver por qué esto lo vamos a ir complicando.
Vamos a calcular el title y por ahora, si tenemos el GIF,
pues lo recuperaremos de GIF.title.
Y si no, pues esto lo vamos a dejar vacío por ahora.
Entonces, este title es el que le vamos a pasar.
Guardamos los cambios.
Vale.
Y al menos aquí, pues ya vemos, ¿no?
Que tenemos el título del GIF.
Vamos a hacer algo.
Este use title lo vamos a hacer un poquito más adaptado
a nuestra necesidad para que nunca pierda lo del GIFI
y no tengamos que, ay, GIFI, GIFI, así con dos Fs, ¿no?
Y de esta forma ahora siempre que usemos este hook,
pues al menos tenemos esta parte del GIFI, ¿no?
Ahora, pues mejor.
¿Cuál es el problema?
Que si yo me voy a la home, pues ahí se ha quedado que Aaron Rips,
se ha quedado, vamos, tal cual.
Bueno, entonces, si ahora voy a un detalle, pues se cambia, claro.
Porque el detalle ha llamado este hook y lo ha machacado.
Pero hay diferentes problemas con esto.
¿Por qué?
Bueno, aquí sí que podría funcionar, claro,
porque esto se vuelve a renderizar.
Vale.
Pero un problema, obviamente, ya hemos visto que es que no se guarda,
o sea, no devuelve el título que tenía antes.
Esto a mí me parece un error garrafal.
Así que vamos a hacer esto, vamos a hacerlo mejor.
Lo que vamos a hacer aquí es crear un efecto.
Y vamos a decir que este efecto se ejecute cada vez que cambie el title.
Entonces, cada vez que cambie el title, lo que vamos a hacer es tener esto.
Esto, en realidad, ahora mismo funcionaría exactamente igual.
Pero al menos tenemos el control de que el title este no se ejecute siempre, ¿no?
Que no se ejecute siempre, aunque el title siempre sea el mismo.
Así que le estamos diciendo, vale, este código solo cámbialo, o sea, ejecútalo cuando el title que llega por parámetro cambia.
Así tenemos un control un poquito mejor.
Pero el problema es que tenemos que recuperar el title que teníamos antes.
Para ello, lo que podemos hacer es tener una constante aquí,
que le vamos a llamar prep title, como previo,
y vamos a utilizar una referencia.
Y en la referencia vamos a guardar el title que tenemos en ese momento.
Ahora, este useRef, vamos a ponerlo aquí.
Vale, lo importamos aquí.
Así que guardamos como referencia el document.title.
Cuando utilizamos este hook, decimos, vale, guárdame como referencia el document.title.
Ahora, ¿qué vamos a hacer con este document.title?
Pues lo vamos a tener aquí preparado, ¿no?
Y lo vamos a guardar en una constante, lo recuperamos, prep title.current.
¿Por qué .current?
Porque las referencias, para poder acceder a su valor,
hay que utilizar la propiedad .current.
Esto en realidad es, lo hemos visto en alguna clase.
¿Vale?
Entonces, ahora en este previous title tenemos el string con el título.
En cada efecto, pues tendríamos ese string.
Ahora, ¿qué hacemos con ese string?
Pues lo que tenemos que hacer es que este efecto,
cuando se desmonte el componente,
va a ejecutar una función que va a actualizar otra vez el título
y le va a poner el previo que teníamos, previous title.
Vale.
Y ahora sí guardamos los cambios y no le he roto nada.
Si vamos, por ejemplo, vamos a buscar Avengers.
Y vamos a este que está muy gracioso.
Vale, ponemos el title que es Marvel Give.
Y si ahora me voy a la home,
pues hemos devuelto el título que teníamos antes.
Así que esto está muy bien, ¿no?
Porque ya empezamos a tener este título, pues,
un poquito más inteligente y que nos permite recuperar, ¿no?
Porque actualmente no tenemos title en ningún otro sitio.
Este use title no lo estamos usando en ningún otro sitio.
Podríamos empezar a utilizarlo en otros lugares.
Por ejemplo, aquí en el search results que tenemos por aquí,
lo que podríamos hacer, pues, exactamente lo mismo, ¿no?
El use title y lo tendríamos que calcular.
Vamos a ver, ¿cómo sería este título?
Porque tendríamos esto sería la keyword, ¿vale?
Y la keyword la tenemos aquí, ¿vale?
Esto es importante, ¿vale?
Os voy a contar una cosa que es importante
y no sé si lo hemos pasado por encima alguna vez.
No se puede hacer esto.
Esto no se puede hacer, ¿vale?
Esto está mal.
Bueno, de hecho, es una maravilla porque ya nos avisa, ¿vale?
Nos dice, el hook use title lo estás llamando de forma condicional.
Y los hooks tienen que ser llamados siempre en el mismo orden.
¿Por qué?
Porque esto aquí React se puede hacer un lío monumental.
Si en un renderizado no entra en esta rama y no ejecuta el use title,
lo que puede ocurrir es que, claro, como el orden para React importa,
porque sabe el orden en el que se han ido ejecutando los hooks,
pues, claro, esto haría cambiar el orden.
Porque el que se ha ejecutado en la quinta posición,
pues, si no entra en esa condición,
puede haber sido la cuarta o la sexta.
El caso es que no seguiría el orden, ¿vale?
Entonces, esto no lo podemos hacer.
Así que lo que siempre tenemos que hacer, una de dos.
Imaginemos que no queremos que el title en algún supuesto se actualice.
Lo que podemos hacer sería pasarle aquí, por ejemplo,
un parámetro y decirle false, ¿no?
Que esto podría ser una condición.
Si params keyword es, bueno, si no tienes, bueno, así, bolea, ¿vale?
Decimos, vale, si params keyword es algo truci,
pues, entonces, actualízamelo.
Eso podría ser un ejemplo, ¿vale?
Pero si queremos hacer una condición, tendría que ser así.
El hook se tiene que ejecutar sí o sí, ¿vale?
Bueno, entonces, lo que queríamos hacer aquí era el título.
Este título, pues, vamos a ver que sea,
si tenemos GIF, pues, GIFs.length, bueno, lo sé,
por ejemplo, resultados de keyword.
Vamos a poner el número de resultados.
Número aquí.
Vamos a poner aquí el número de resultados de resultados.
Esto así.
Y si no, pues, vacío.
Pum.
Este use title lo tengo que importar, que lo tenemos por aquí.
Use title from hooks use title.
Guardamos los cambios.
Y si buscamos algo, Diana Jones, vale, pues, aquí tenemos.
Bueno, me ha faltado aquí hacer el decode,
pero aquí tenemos, ¿no?
15 resultados de Indiana.
Y si entramos a un resultado, pues, aquí tenemos Indiana Jones.
Vamos a la home.
Y aquí tenemos otra vez el mismo problema, ¿no?
Que ha guardado, en realidad, el que teníamos anteriormente.
O sea, que cuando hemos ido a la home, no es exactamente que nos ha solucionado el problema.
Nos ha guardado el anterior, pero él no sabía que en la home teníamos uno.
Entonces, aquí ya lo que empezamos a tener es que al menos vamos a estar obligados de alguna forma
a tener este hook en la home también para que nos aseguremos que cuando lleguemos ahí, pues, haga algo, ¿no?
Para evitar este juego que nos está pasando, de que el previo que estábamos guardando lo estábamos guardando mal.
Bueno, eso sería por un lado.
Pero al menos ya tendríamos algo, ¿no?
Que queda bastante más gracioso.
Hay una cosa que está bien, ¿no?
Porque aquí, si el título lo estamos definiendo de forma condicional y es tan fácil como esto,
podríamos decirle que si tiene GIF sea esto,
pero si, por ejemplo, si está loading, pues que ponga cargando.
Sí, bueno, esto se va a leer un poco raro, ¿vale?
Pero podríamos hacer una ternaria anidada que no me gusta en nada.
No me gusta en nada, las odio.
Esto se va cargando y si no, pues vacío.
Es horrible, ¿eh?
Las ternarias anidadas no me gustan nada.
Vale, esa matrix, bueno, sería muy rápido.
Pero podríamos hacer que aparezca aquí el cargando, que esto no gusta.
Es una cosa que gusta mucho en la experiencia del usuario,
que al menos le das la información de si está funcionando correctamente.
No sé si aquí el GIF a lo mejor siempre tiene un valor
y por eso a lo mejor no vemos el cargando.
En el detalle seguro que lo podemos hacer mucho más fácil.
Vale, pues hasta aquí teníamos el use title.
Otro tema que para hacerlo nosotros y para ver cómo funcionaría...
Ay, ¿qué he hecho? ¿Qué he hecho?
Voy a tirar para adelante todo lo que he estado haciendo aquí.
Bien, esto lo voy a dejar aquí vacío.
Vale, que todo funcione.
¿Sí?
Vale, muy bien.
Entonces, este use title en realidad se queda un poco corto.
Y aquí vamos a ver un poco la necesidad que tendríamos de una biblioteca.
Pongamos que nos hemos venido arriba, ¿eh?
Nos hemos venido arriba y hemos dicho, vamos aquí a saco.
Vamos a hacer nuestro hook de SEO.
Pues lo que vamos a hacer, en lugar de use title,
le vamos a llamar use SEO a saco.
Vale, entonces vamos a decirle que sí,
que nos cambie los imports.
A ver si es lo suficientemente inteligente para que haga esto.
Bueno, esto es normal, que me está petando ahora por todos lados,
porque el use title lo hemos cambiado a use SEO.
Use SEO.
Vale, use SEO, use SEO.
Bueno, parece que sí, que funciona.
Vale.
Entonces, nos hemos venido arriba.
Y hemos dicho, vale, pues esto de cambiar el título está bien,
pero es poco, porque si nosotros vamos aquí a última búsqueda,
abrimos el inspector, y lo que hacemos es en los elementos mirar el head,
claro, aquí podemos ver que la descripción siempre es gif searcher.
Entonces, también deberíamos cambiar la descripción.
Esto es muy rápido porque es muy similar a lo que tendríamos antes, ¿no?
Es tener este description y, vamos a quitar esto,
y hacer algo muy similar a lo que estamos haciendo.
En este caso, podríamos hacer, pues esto,
lo mismo del prep description,
solo que aquí, este use ref, deberíamos recuperarlo del query selector,
porque, claro, no podemos recuperarlo directamente con document,
y aquí, pues tendríamos que decirle el meta,
que tiene como name description,
ajá, vale, sí, es que como hace un salto ahí justo, me vuelve loco.
Vale, aquí he tenido la descripción anterior.
Entonces, ahora podríamos tener dos efectos separados,
y así es como igual estaría bien, ¿no?
Tener un efecto para el título y otro para la descripción.
De forma que cada vez que alguien nos pase una descripción,
y aquí tendríamos que hacer, si tenemos descripción,
porque nos pueden pasar algo vacío,
y aquí igual, if title,
ahora que esto se puede utilizar para dos cosas,
pues deberíamos hacer que esto solo ocurra
cuando realmente lo necesitamos.
Ay, esto tendríamos que poner aquí, vale.
O sea, solo actualizamos el title cuando realmente está,
se lo hemos pasado, ¿no?
Porque si lo pasamos y es undefined,
pues podríamos hacer algo raro.
Entonces, solo cuando nos lo pasa.
La descripción, lo mismo, ¿no?
Y podríamos decirle, vale, pues entonces, recupérame,
vamos a utilizar esto otra vez,
y decimos la metadescription,
la tenemos aquí.
El previo, como teníamos esto antes,
el previous description,
esto lo tenemos aquí en el current,
y aquí vamos a actualizarlo.
Ahora que tenemos este metadescription,
que esta línea de aquí,
lo que tenemos en realidad es el elemento, ¿vale?
Lo que tenemos es el elemento.
Así que lo que tenemos que hacer es actualizarlo.
Y le decimos que es el content,
de hecho aquí lo vemos, ¿no?
Content.
Y el content lo que tiene que tener es el nuevo valor,
que es description.
Y lo mismo, para desmontar esto,
pues tendríamos que hacer el metadescription,
set attribute.
Esto es si queremos, ¿eh?
Tampoco, o sea, esto puede ser algo opcional.
Podríamos pasarle, por ejemplo,
la opción de que esto ocurra o no ocurra, ¿vale?
Esto necesitamos que esté aquí, ¿vale?
Metadescription, set attribute,
y le hacemos un content,
y le dejamos el previous description, ¿vale?
Pim, pam, pim, pam.
Vale, vamos a ver en el head.
Todavía no está cambiando nada, ¿vale?
Esto es un detalle que tengo aquí,
que no se ve nada, pero es un detalle, ¿vale?
Entonces lo que vamos a conseguir
es ir a la página del detalle,
aquí, y en el useo,
ahora, la verdad es que como descripción,
no sé, no sé qué ponerle.
Es que algo diferente al title, ¿no?
Detail, vamos a poner el title,
detail of, yo qué sé, por poner algo.
No sé.
Uy, set attribute, bueno, bueno,
esto aquí me la he liado con algo.
Vale, vamos a ver.
Metadescription,
metaname,
aquí hay algún,
este es el que está petando,
porque metadescription,
este de aquí,
este es,
es null.
O sea que igual esto no lo he escrito bien.
Bueno, como sé que estáis súper atentos,
voy a mirar vuestros,
con el return, vale.
Mientras alguien va buscando el error
que he debido cometer en algún sitio,
no sé si es que es,
ah, ah, ya lo he encontrado.
Madre mía, vale.
Ya está, ya está.
Y aquí también, perfecto.
Bueno, no sé si alguien lo había visto,
pero yo lo he visto.
El caso es que me faltaba aquí
una comilla cerrando.
Entonces, por eso no estaba encontrando
el elemento, vale.
Ahora sí que lo ha encontrado
y si miramos el head
y miramos la descripción,
aquí podemos ver que la descripción
ahora sí tiene
la que le hemos añadido,
¿no?
El detail of y el nombre del gif.
Y si vamos a la home,
vale, si vamos a la home,
esto lo ha vuelto loco
porque aquí cuando hemos recuperado
en esta línea,
aquí, este prep description,
aquí tendríamos que hacer un
get attribute, ¿vale?
Tenemos que tomar el atributo
de content.
A ver ahora.
Entonces, vamos para atrás.
Aquí tenemos el head.
Tendríamos, pum, pum, pum,
esta sí.
Y aquí ahora, vale,
ha devuelto el previo
que tenía antes.
Vale.
Vale, vale, vale, vale.
Vamos a ver.
Saludos desde Colombia.
Llegué tarde.
Sí, bueno, a ver.
Llegas una hora tarde.
No, hombre.
Llegas, ostras, sí.
Una hora tarde.
Cago en la leche.
Bueno.
Genial, Miguel.
Así es más fácil
seguir los temas.
Muy bien, Harley.
¿Vas a usar Ria Helmet?
Sí, vamos a usar Ria Helmet.
Lo vamos a usar ahora mismo.
Una pregunta.
¿El hook es un componente?
¿Cuál es la diferencia
hook-componente?
No, son dos cosas distintas.
Porque el componente
es básicamente
lo que queremos renderizar.
Aunque es que puede haber componentes
que no renderizan nada.
Puede ser un poco tricky.
Pero son dos cosas
totalmente distintas.
Porque los hooks
no tienen la capacidad
de renderizar
por sí mismos nada.
Son como
trozos de lógica
que puedes hacer.
Por ejemplo,
en este caso
estamos extrayendo
esta lógica
de actualizar
el título
de nuestra página.
Obviamente,
en un hook
podríamos chipear
directamente
el DOM
de nuestra aplicación.
¿Vale?
Cosa que no os recomiendo.
Pero la idea
es que un hook
lo que tengas
solo es lógica
y un componente
que renderice cosas.
Pero es verdad
que un componente
aunque no puedes hacer
toda la funcionalidad
que sí que hace un hook
pues podrías hacer
por ejemplo
esto que hemos hecho
este hook
lo podríamos hacer
en un componente.
O por ejemplo
el componente de Redirect
que hemos visto en Gooter
también tiene
una parte de lógica.
O sea,
también hace lógica.
Así que ya ves
que es un poquito
a veces difícil
de ver la diferencia
pero sobre todo
los hooks
para extraer lógica
que sea reutilizable
puede ser
pues leer
dónde está el cursor
tener estados
compartir estados
calcular algún tipo
de cosa
cosas así
y los componentes
están más pensados
para renderizar.
¿Vale?
¿Qué más?
¿Utilizaría Reducer
en este proyecto?
En este proyecto
la verdad es que
creo que no utilizaría Reducer
porque no he visto
la necesidad
pero tengo pensado
que hagamos
el buscador
más complicado.
Vamos a hacer
en una siguiente clase
vamos a hacer este buscador
que tenga filtros
entonces cuando ya
tenemos filtros
los filtros normalmente
son objetos más complejos
y ahí creo que sí
que puede ser interesante
tener un Reducer
porque vamos a querer
resetear
los filtros
o hay veces
que según los filtros
puedes utilizar uno u otro
y ahí sí que le veo
mucho
mucho
mucho
mucho
el tema
de ver
Your Reducer
sí,
el Your Reducer
así que
lo veremos
no
hoy no lo vamos a ver
pero seguramente
para la semana que viene
me dice
jg
con el return
bueno
básicamente
os lo indico
que creo que va a ser
más fácil
me está preguntando
por esta línea de aquí
esta línea de aquí
que si con esto
lo que estoy indicando
es que cuando se destruya
que haga algo
efectivamente
lo que estamos diciéndole
es
en realidad no es cuando se destruya
y ojo con esto
que esto es súper importante
y muy muy muy interesante
lo que vamos a hacer aquí
y de hecho
si queréis
podríamos poner un console.log
para que lo veáis
pero
esta función
efecto title
esta función de aquí
no es que se va a ejecutar
cuando se destruya
el componente
que también
sino que
se va a ejecutar
cada vez
que
se
se vuelva
antes de volver a ejecutar
este efecto
o sea
la primera vez
que se ejecuta este efecto
pues nada
ejecutamos lo de arriba
pero la siguiente vez
ejecutará esto
y luego
ejecutará
lo de arriba
por eso es importante
evitar ejecutar
los efectos
cuando no se necesita
y para eso
están las dependencias
así este efecto
solo se ejecuta
cuando el título
cambia
así que
lo que hace
es como resetear
los efectos
que hemos hecho
en esta función
nos hace un reset
y ya nos lo deja listo
para ejecutar
el código
que sí que queremos hacer
así que
no solo se hace
cuando se desmonta
del componente
sino que
cada vez que se ejecuta
este efecto
va a pasar por esta función
de hecho
podemos ver
aquí un console
a ver si
vale
esto era en el
detalle
detalle
vale
el problema es que
pero bueno
podemos ver
aquí
solo se ha renderizado
una vez
solo ha entrado una vez
pero el componente
todavía no lo he desmontado
vale
este es el detalle
y si yo entro
voy a quitar
el info
vale
si yo entro
ahí
igual he ocultado
además
es que se ve
tan chiquitito
voy a hacer
un poco más grande
así
vale
si yo entro
al detalle
podemos ver
que ya se ejecuta
una vez
esto que significa
pues que este hook
se ha ejecutado
una vez
habrá hecho algo
el componente padre
y se ha vuelto a ejecutar
que tiene sentido
porque de hecho
teníamos esto
de el title
pues si es una descripción
o sea
el title
le estamos pasando
si tenemos el gif
y si no
pues vacío
entonces que pasa
que al principio
el título puede ser vacío
se ejecuta el efecto
cambia el título
entonces
desmonta
ese efecto
vale
no el componente
el efecto
desmonta ese efecto
y vuelve a ejecutar
el de arriba
entonces
cuando se desmonte
el componente del todo
pasará por este
no solo por este
sino también
por todos los efectos
que se han quedado ahí
vale
y lo limpiará
es como limpieza
del efecto
vale
esto está para lamerlo
dice Leonidas
efectivamente
para lamerlo
me encanta
esa expresión
que más
que más
con lo que acabas de hacer
como haces
para que sigan existiendo
las páginas
para que sean indexadas
por google
a ver
el tema martín
es que
estas páginas
que
estas páginas
que estamos haciendo
para google
al final
le vamos a tener que dar
una guía
o sea
una de dos
o alguien comparte
esta página
o alguien comparte
este detalle
o google
entrará
aquí
entrará a la home
y verá este enlace
y dirá
pues lo voy a seguir
o
lo que podemos hacer
son cosas como esta
hacer unos sitemaps
escondidos
por ejemplo
lo de tendencias
que pasa
que google
vendrá la home
verá las tendencias
entrará a rose
y en rose
pues verá
todos los detalles
vale
entonces
hay una cosa
que mucha gente
yo soy el primero
que dice
que si queremos
seo
sobre todo
que miremos
service al rendering
pero hay proyectos
que si son lo suficientemente
pequeños
y no es crítico
tener el seo
brutalmente bien
en el sentido
de llevarlo
al extremo
no al extremo
sino con las mejores
prácticas
a lo mejor esto
es suficiente
para que lo indexe google
vale
y para que vea las páginas
pero obviamente
al final vas a necesitar
que haya
que haya visitas
que la gente lo comparta
y cosas así
pero
el tema es que google
es capaz de renderizar
aplicaciones
que solo funcionan
en el cliente
no es tan rápido
el crawling
porque claro
tiene que ejecutarlo
en chrome
y eso pues le toma
más tiempo
por eso digo
que si no es
crítico
pues es algo
que puedes hacer
pero
es algo que puede funcionar
y que está totalmente
soportado
por google
y de hecho
pues hay diferentes
estrategias
para que esto
funcione mejor
todavía
pues haciendo
un pre-rendering
por ejemplo
que a lo mejor
es una cosa
que podemos ver
para pre-renderizar
las páginas
y al menos darle
el html
directamente a google
pero a tus usuarios
solo la aplicación
de cliente
y cosas así
vale
que librería
para manejo
de forms
recomendarías
recomendaría
formic
y que vale
y con esto
pues más o menos
ya lo tenemos
pues ya podéis ver
que está bien
lo que hemos hecho
nos ha funcionado
pero
que pasa
si ahora
además de esto
lo que queremos
es cambiar otra etiqueta
pues esto empieza a ser
un poco
coñazo
verdad
o sea
tendríamos que volver
a poner todo el código
y todo esto
y esto
al final
es un poco rollo
entonces
podemos utilizar
una biblioteca
que nos ayude
con esto
teníamos
yo
yo os
recomiendo
estas dos opciones
vale
una sería react helmet
y la otra sería react head
esas son las dos opciones
que yo más recomiendo
cada una
tiene sus cosas buenas
y sus cosas malas
en el caso de
si veis
a mí es una cosa
que me gusta mucho
ver temas de performance
y rendimiento
podéis ver que react helmet
es más grande
que react head
aquí en bundle
fobia
podéis ver que react head
pues solo ocupa
1.4 kilobytes
que es súper poco
entonces react helmet
react helmet
react helmet
creo que eran 6
5 o 6
debe ser
tampoco es 6
tampoco es una diferencia
enorme
pero react helmet
digamos que
que está creado
por la nfl
por cierto
la liga de
de fútbol americano
de
de estados unidos
pues
está bastante bien
probado y testado
porque ya veis
que lo utiliza mucha gente
tiene 13.000 estrellitas
y lo usan 240.000 paquetes
o sea que
está bastante bien testado
pero es verdad que
parece que tiene
más issues
porque a lo mejor
es que tiene
más cosas
que puedes hacer
con la librería
a lo mejor es un poquito
más complicada
es más completa
digamos
más completa
tiene
mejor soporte
o más comunidad
pero es más grande
que necesitas algo
chiquitito
bueno pues hay una
que a mí
particularmente
me gusta mucho
que es react head
que ya habéis visto
que es más pequeña
es muy similar
es muy parecida
o sea la API
es casi
casi la misma
así que no vais a tener
ningún problema
las dos son totalmente
compatibles con server
sal rendering
en el caso de que
en algún momento
os interese
así que
no os tenéis que
preocupar
que cualquiera de las dos
yo creo que es una buena
decisión
aquí encima
no te
no aparece
cuántos paquetes
y lo están utilizando
no sé por qué
pero yo sé que hay paquetes
que lo utilizan
de hecho yo tengo
algún proyectilio que lo utiliza
pero no sé por qué
no aparece aquí
pero bueno
no es que tenga cero estrellas
tiene alguna estrellita
y la verdad es que el trabajo
viendo el código
está muy bien pensado
a mí me gusta
pero como
react helmet es la más famosa
y ya hemos utilizado
guter
para el tema este
de hacer las rutas
que no era tan famoso
pues vamos a utilizar
react helmet
ya que me lo habéis pedido
unos cuantos
vale
entonces
vamos a instalarlo
antes de nada
vamos a irnos aquí
y
vamos a poner aquí
en el pistol
react helmet
lo instalamos
esto debería tardar
nada y menos
porque es bastante
pequeñita
o sea
vale que ocupa 6k
bundle phobia
os digo una cosita
que a ver si esto
package phobia
hay uno que se llama
package phobia
que no es como
bundle phobia
y package phobia
lo que te chiva
es como de grande
la instalación
del paquete
vale
en este caso
por ejemplo
aquí vemos
que para publicarlo
son 270 kilobytes
y la instalación
es medio mega
vale
así que
son como dos cosas
esto sería
lo que tardamos
cuando hacemos un
mpm install
que es lo que trae
y el otro es
lo que se lleva
al usuario
cuando visita
nuestra página
bueno
el caso es que
esto ya lo tenemos
vale
dice carlos cabal
que react helmet
tiene una isu
que crea un doble
rendering cuando usas
strict mode
en react
y es verdad
no sé si ahora
acaban de sacar
la versión 6
no sé si lo han solucionado
pero sí que leí
la isu hace tiempo
porque yo la tenía
y parecía como que
tampoco
parecía que le iban
a arreglar
porque era como
algo interno
del strict mode
y que bueno
era como bueno
es que esto
funciona así
de hecho react
también comentó
algo al respecto
al final
bueno
el strict mode
creo que solo
se ejecuta
esto solo pasa
el strict mode
creo solo
en modo
que no es producción
el modo producción
en strict mode
se lo salta
así que no deberíamos
tener ese problema
entonces
¿cómo funciona
react helmet?
ya lo tenemos instalado
pues vamos a ir
a la página
esta del detalle
y lo vamos a utilizar
teníamos aquí
el useo
pues ahora vamos a utilizar
helmet
y esto
de react helmet
como es la versión 6
voy a asegurarme
que esto sea así
porque sé que ha habido
cambios
de cómo se importa
el paquete
efectivamente
ahora es nombrado
así que ojo
cuidado
que esto era antes así
o sea que tenemos
que hacerlo así
nombrado
entonces ahora que tenemos
helmet aquí
lo que tendríamos que decirle
es qué es lo que tiene
que renderizar
¿vale?
helmet funciona por componentes
no como hook
como hemos hecho nosotros
así que vamos a dejar
de utilizar este
que tenemos aquí
y ahora
pues mira
aquí me parece
bastante bonito
si lo probamos aquí
en el spinner
a ver si esto funciona
vamos a hacer aquí
primero
aquí vamos a utilizar
helmet
y lo único que hay que hacer
es poner
las etiquetas
de metadatos
que queremos
renderizar
en este caso
podríamos poner aquí
pues
cargando
¿no?
porque esto es solo para cargar
cargando
¿vale?
y esto lo tengo que cerrar aquí
¿vale?
guardamos los cambios
y ya está
entonces cuando entramos
a un detalle
se supone que
ahí
¿vale?
estamos cargando
¿qué pasa?
que se ha quedado cargando
porque no hemos vuelto
a renderizar
nada diferente
a esto
¿vale?
como esto lo hemos dejado aquí
esto voy a arreglar
un poco
el estilo
de este código
que si no
se ve un poquito raro
esto aquí
¿vale?
entonces cuando está cargando
vamos a renderizar
Helmet con este título
cargando
entonces ¿qué pasa?
que claro
cuando ha vuelto a renderizar esto
este Helmet
no
este título
se ha quedado ahí colgando
así que podéis ver
que también Helmet
tiene un problema similar
al que habíamos hecho nosotros
¿eh?
o sea
no estábamos tan mal
no estábamos tan mal
al final de alguna forma
lo que nos obliga
es a asegurarnos
a ver que hay aquí un error
ah
¿cómo pone Will Mount?
hmm
eso seguramente es de Helmet
eso
mira
eso es una cosa que no me gusta
del todo Helmet también
que todavía tiene
métodos deprecated
hmm
eso no me hace tanta gracia
¿eh?
vale
el deprecated
a ver
no pasa nada
pero cuando salga React 17
pues no será tu código compatible
y tendrás que adaptarte
React Head
por ejemplo
que yo sepa
no tiene ningún
que yo recuerde
no tiene ningún warning
bueno
lo podéis comprobar
vale
entonces
este que teníamos esto de cargando
pues nada
aquí ahora
vamos a decirle
vale
pues cuando ya estemos aquí
la verdad es que Helmet
a diferencia de los hooks
lo que hace es que te quede
más declarativo el código
¿vale?
entonces
yo creo que es
una buena decisión
utilizar componentes
para hacer el tema de SEO
es más declarativo
es más fácil de entender
qué está ocurriendo
y todo esto
title
y aquí vamos a poner el gif
vale
y aquí pues ya podemos ver
¿no?
que
ahí sale muy rápido el cargando
pero luego ya
pues se actualiza este
ahora si vamos a la home
pues nada
tiene exactamente
el mismo problema
que tenemos nosotros
así que
no, no, no
tampoco
tampoco nos creamos
que estamos haciendo tan mal
vale
entonces
pues nada
ya deberíamos ir
a todas las páginas
por ejemplo aquí
a decirle
vale
pues importamos Helmet
desde React Helmet
y que el title
que debe tener
esta aplicación
aquí
pues lo mismo
en Helmet
el title
y el title aquí
pues sería
Home
Giphy
por ejemplo
y pues nada
ya tenemos aquí
Home Giphy
para evitar el salto
ese extraño
que hay
porque veréis
bueno
no se ve
si se ve
se ve rápidamente
si te fijas ahí
en la pestaña
hay veces
que se ve ese salto
eso es porque
en el index.html
tenemos
esto ¿no?
tenemos este title
por aquí
title
entonces lo que
yo recomiendo
es que directamente
lo eliminéis
porque total
no sirve para nada
entonces
estará vacío
o le ponéis
un punto
o algo así
que no se vea tan
tan exagerado
porque si lo dejáis vacío
creo que os sale la URL
pues no sé
no sé si un espacio
a ver
si con el espacio
sí, sí
ah no
el espacio no se lo traga
deja otra vez
vale
pues un punto
algo que sea muy sutil
porque si no
pues hace un salto
muy extraño
pues esto que hemos hecho
con la Home
pues lo mismo
con el Search
y aquí pues
lo que podríamos empezar
aquí sí que habíamos cambiado
la descripción
¿no?
aquí
¿dónde está el title?
no
al final tampoco habíamos cambiado
la descripción
bueno
lo que podemos hacer
esto es importante
que solo rendericemos aquí
y ya podemos hacer también
el tema
title
vale
y importamos helmet
el tema
de que podéis cambiar
y esto es lo mejor
que tiene helmet
podéis cambiar
cualquier
cualquier
metadato
¿vale?
cualquier metadata que tengáis
lo podéis cambiar
por ejemplo
si vamos aquí
y vemos
vamos a ver
aquí arriba
en el head
tenemos el viewport
y tal
bueno
tampoco tenemos muchos
pero sí que tenemos
la metadescripción
pues la metadescripción
aquí ya directamente
lo podéis añadir
y en metadescripción
pues le podéis poner
la que queráis
le ponemos aquí el title
también
y
esto es en la búsqueda
bueno
pues en la búsqueda
y en la búsqueda
¡eh!
no me la está cambiando
a ver
a ver
¿qué está pasando?
aquí vamos a descubrir algo
¡ah!
¡ah!
¡ah!
sí
vale
esto es interesante
¿vale?
vale
podemos ver
y esto está muy bien
esto está muy bien
porque esto nos va a permitir
explicaros una cosa
y una cosa con la que hay que tener cuidado
en tema de SEO
cuando utilicéis Helmet
y es que
si miramos aquí
claro yo pensaba
este metaname description
este
aquí no me lo ha cambiado
¿verdad?
pero si voy hacia abajo
veo que sí que tengo aquí
un metaname description
y el content
pero tiene una
una etiqueta especial
que es data react helmet
claro
el tema es que
como funciona
react helmet
es que te crea
sus propias etiquetas
para poder controlarlas
cuando cambies el valor
claro
si tú a esta descripción
por ejemplo
a esta descripción
este title
con el estado lo cambias
lo va a querer controlar
entonces
en este caso
lo mejor es que
cualquier etiqueta
de este tipo
que tengáis
incluso la de title
porque al final
la de title
la podéis hacer
también directamente
dentro de vuestra aplicación
que las eliminéis
¿vale?
o sea
lo mejor que podéis hacer
es eliminarlas
y que solo os cree una
así vais a evitaros
cualquier problema
que tengáis
de tener las meta etiquetas
pues duplicadas
¿vale?
así que
ya sabéis
que
no las podéis tener duplicadas
que la podéis liar
aquí
pues lo que os decía
podéis tener
pues lo de
ok image
que ahora no me acuerdo
como se eran
type
bueno
podéis añadir
ok image
cualquier etiqueta
que se os ocurra
de hecho
creo que había
head
¿cómo era esta?
había
head html
había una página
que era muy chula
que te decía
toda
a ver si alguien se la sabe
que te decía
todas las
ah
no
head
ay no me acuerdo
había una página
que era muy buena
que te decía
todas las páginas
todas las etiquetas
que podías
o debías tener
en el
en el head
y ahora
creo que es esta
sí sí sí sí
es esta
os lo dejaré en la descripción
porque creo que es súper útil
aquí os recomiendo
un poco el mínimo
el chart set
como es una cosa
que no es dinámica
os recomiendo
que sí
esto sí que lo dejéis
en el index html
el viewport
como también
no debería ser dinámico
lo dejáis en index html
pero el title
pues este sí
que lo podéis quitar
y lo dejáis
dentro de las páginas
de cada una de vuestras páginas
pues tenéis el title
que veáis
entonces tanto
el base
podéis incluso añadir scripts
si queréis
lo recomiendo
que lo hagáis así
pero bueno
lo podríais hacer
cualquiera
todas estas etiquetas
la podríamos añadir
y deberían funcionar
si ponemos esto
por ejemplo
hay muchas que son de
metadatos
para que
lo que es importante
es que tenéis que cerrar esto
que si no no funcionará
pero bueno
he puesto una etiqueta cualquiera
pues aquí deberíamos tenerla
nos la pone al final del todo
pero aquí la tenéis
¿vale?
todas las etiquetas
que veáis aquí
las típicas
las canonicals
todas
las podéis hacer
y añadirlas aquí
lo único que tenéis que hacer
es grapear
lo único es envolver
¿vale?
lo único que tenéis que tener cuidado
aunque os saltará un error
es que hay algunas
que
como la del Charset
aunque la del Charset
pues eso
no la vais a utilizar
si utilizáis la del Charset
os debería avisar
que esto
esto no está bien
¿vale?
¿por qué?
porque en React
tenéis que utilizar
camel case
así que
esto sería así
si no
os va a dar problemas
igualmente
la del Charset
como os he dicho
os recomiendo
que no la pongáis
directamente
aquí
sino que la pongáis
en index.html
¿vale?
vale
pues
bueno
no me contáis nada
espero que estéis todos bien
hay Luis Isasi
me dice
que cómo funciona
y trabaja el UseRef
me comenta
lo hemos comentado
en unas cuantas clases
afuera
en las clases anteriores
pero básicamente
el UseRef
lo que nos permite
es guardar un valor
que se va a mantener
entre renderizados
o ejecuciones de un hook
¿no?
es como
una caja
donde podemos guardar un valor
y ese valor
no va a cambiar
y no va a cambiar
ni siquiera
entre renderizados
porque
¿qué pasa?
si tú creas una variable
en el cuerpo
de una función
que es un componente
cada vez que se renderiza
se genera
de nuevo
ese valor
con un UseRef
pues te evitas esto
se guarda
ese valor
¿vale?
entre renderizados
vale
dice
¿cuándo debe ser meta
y que se autocierre?
me dice
vrime
y ¿cuándo meta meta?
porque ahí
tienes las dos
¿vale?
en principio
es indiferente
¿vale?
se refiere
aquí tenemos esta
de meta name description
que es con
abriendo meta
y cerrando meta
y aquí
que se autocierra
si miramos aquí
en el inspector
vamos a ver
o que yo recuerde
que nos la debe haber creado igual
en realidad
es indiferente
bueno
aquí vemos esta
¿ves?
vemos que nos la ha creado igual
esto es como lo entiende React
que necesita que la etiqueta se cierre
pero no se va a traducir así
luego al HTML
¿no?
podemos ver que aquí
este meta lo ha dejado así
y este meta lo ha dejado así
realmente yo
seguramente utilizaría este
siempre
el que es una
un solo meta
y se autocierra la etiqueta
¿vale?
tanto este como este
no hace falta que hagáis
lo de abrir y cerrar
eso sobre todo
es para cuando tenéis
elementos dentro
y cosas así
creo
no sé si hay alguno
creo que sí
creo que hay alguno
por aquí
que tiene que tener
algún children
por ejemplo
los de ldjson
y cosas así
a ver
hay alguno
bueno
incluso las etiquetas de script
pero bueno
eso sí que os puede dar problemas
todos los metas
los podéis autocerrar
la etiqueta
y ya está
no vais a tener ningún problema
os recomiendo que la hagáis así
¿vale?
¿qué más?
¿qué más?
¿cuándo es mejor usar reducer
y cuándo usar use context?
Roberto Sánchez
bueno
son dos cosas totalmente distintas
así que
diría que
cuando reducer
cuando tienes que reducir
un estado
y context
cuando tienes que compartir
un valor
a través de tu árbol
de elementos de React
de hecho
el use reducer
se puede utilizar
dentro del use context
son dos cosas
totalmente distintas
¿vale?
lo que a lo mejor
tiene sentido
es usar use reducer
bueno no sé
cuando
solo use reducer
cuando es algo local
de tu componente
¿vale?
¿cómo funciona
la indexación
de Google
para React
y los sitemaps?
Anabela
vale
buena pregunta
sobre React
esto lo tenéis que tener
muy claro
de hecho
tenía una
React
rendering
strategies
strategies
os voy a enseñar
unas slides
que tenía
slides
slides
si las encuentro
y entonces
os explicaré
mejor
este tema
¿vale?
sobre cómo funciona React
y Google
para el tema del SEO
y por qué
es importante
a ver si no hago
mucho spoiler
de muchas cosas
por aquí
¿vale?
vale
bueno esto fue
mi presentación
que hice en Polonia
y bueno hablo
de un montón de cosas
y tal
pero eventualmente
hablo de
de esto
de cómo funciona
Google
con React
y todo esto
¿vale?
entonces
aquí
es que tengo
un montón de slides
vale
un poquito más
un poquito más
ah
ah vale
vale
entonces
hace poco
Google
presentó
que había
estaba estrenando
un nuevo crawler
que este nuevo crawler
básicamente lo que es
es un Chrome
o sea
que puede ejecutar
el código del cliente
nuestro JavaScript
por lo tanto
nuestra aplicación de React
que solo es del cliente
debería poder verla
¿y qué es lo mejor?
pues que tiene soporte
para Intersection Observer
que es lo que nosotros
hemos estado utilizando
para el tema del lazy load
así que sería capaz
incluso de descubrir
todo el contenido
que hemos puesto
detrás de un lazy load
con Intersection Observer
pero solo con Intersection Observer
los otros
tampoco
lo sabemos
bien exactamente
si funcionaría
pero este sí
así que
eso lo sabemos
pero claro
¿qué pasa?
así es como funciona
Google Bot
básicamente
o así es como funcionaba
un poquito
Google Bot
que son dos pasos
era hacer el crawling
que el crawling
es buscar en la red
a ver links
a ver links
venga links
links
links
y él pues empieza
a navegar
todos esos links
y luego está el pase
de indexar
en el pase de crawlear
¿no?
el de crawling
él lo que hace
al ver los links
¿cómo detecta esos links?
pues esos links
en realidad
los saca del texto
de enlaces
¿no?
una página
enlaza a otra
pues ese link
lo va a seguir
y va a decir
ah voy a ver
qué hay allí
y cuando va allí
pues va a ver
si tiene que seguir
más links
o qué es lo que ocurre
eso lo deja
como en una cola
y en esa cola
pues luego se pone
a indexar
¿no?
se pone a indexar
con todos los links
que ha ido detectando
los indexas
cuando va indexando
va haciendo otro crawler
¿no?
con eso
descubriendo más links
es como una rueda
¿no?
voy crawleando
descubro link
lo indexo
voy descubriendo otro link
y así
pam pam pam pam
¿qué pasa?
que ahora hay un paso más
este nuevo paso
es el de ejecutar
el javascript
o ejecutar la página
en que ha indexado
¿no?
él la ha indexado
y ha dicho
vale esta página
la ha indexado
he descubierto
si la tienes
con el servidor
o estás devolviendo
estático
o html estático
pues dirá
vale
pues ya he descubierto algo
pero voy a ver
cuando la ejecute
qué más tiene esta página
¿no?
incluso le mira
la performance
temas de accesibilidad
cosas que puede tener en cuenta
¿no?
pero sobre todo
ejecutar el javascript
entonces esto
este paso
que vemos aquí
esto ocurre
más adelante
este es el problema
¿vale?
que si el SEO
es súper importante
tienes que tener en cuenta
que esto no va a ser tan rápido
como indexar
con algo estático
si tú mandas html estático
pues va
eso es súper rápido
pero ¿qué pasa?
en nuestro caso
de este de giphy
si vamos al código fuente
esto está vacío
¿no?
esto hasta que no ejecute
el javascript
no va a poder
descubrir
las urls
el contenido
y todo esto
por lo tanto
el indexing
de esta página
va a ser más lento
esto va a pasar
en algún momento
pero puede ser un día
una semana
un mes
depende de
si tu página
es muy importante
o poco importante
claro
es que
a saber
qué ocurre ahí
si es súper importante
ya te digo
que se va a dar prisa
pero el problema
además
es que claro
renderizar una página
es costoso
cuesta bastante
o sea
tenemos el navegador
y el navegador
pues quieras o no
levantar un navegador
que cargue todo
es mucho más difícil
que leer un texto
así que claro
levantas el navegador
y Google
ya le está dedicando
un tiempo
entonces digamos
que como funciona
más o menos Google
es que tú tienes
una caja de tiempo
una caja de recursos
y lo que dice Google
es vale
para esta página
yo tengo
tres minutos
vale
pues voy a ver
qué consigo
en tres minutos
entonces a lo mejor
empieza a hacer
el renderizado
de tus páginas
pero a lo mejor
tú tienes
diez mil páginas
y solo renderiza
catorce
por decir algo
entonces esto es algo
a tener en cuenta
esto es una cosa
una información
que podéis ver
en Google Search Console
para ver
qué número de páginas
realmente ha renderizado
cuántas realmente
ha metido en el index
porque a lo mejor
tú le pasas
veinte mil
y solo ha renderizado trece
entonces tú
le puedes ayudar a Google
le puedes decir
toma un sitemap
con todas las urls
Google la va a tener en cuenta
y al final
lo que va a hacer es
pues hacer un crawling
y luego va a ver
si las indexa
si ve que el contenido
vale la pena o no
porque a lo mejor
ve páginas
que son muy similares
entonces tienes que tener en cuenta
que el rendering
es costoso
y por lo tanto
Google
claro
sí que lo soporta
pero no es tan óptimo
como realmente
pasarle directamente
el HTML
por ejemplo
si vamos a mi web
que es totalmente estática
y vamos a este artículo
si miro el código fuente
ya tiene todo el HTML
todo lo que puede descubrir
en esta página
ya lo ha hecho
en el primer paso
cuando la ha indexado
ya no tiene que renderizarlo
en un siguiente paso
vale
entonces
por eso
tened en cuenta
que tiene 130 trillones
bueno
trillones son miles de millones
bueno
muchos
muchos millones
un millón
de páginas
que tiene que crolear
vale
entonces
ahí es donde está el tema
pero con esto
yo creo que ya hemos visto
cómo podemos conseguir
el tema del SEO
así que si os parece
vamos a ir a
vamos a ir
a la integración
de GitHub
antes de que
luego no me dé tiempo
de nuevo
y me lo deja a medias
entonces
en qué trata
esto de la integración
de GitHub
y Vercell
para hacer continuous deployment
lo vimos
empezamos a ver
el deploy
en la clase anterior
vale
que básicamente
lo que podíamos hacer aquí
en la terminal
era ejecutar Vercell
y cuando ejecutamos Vercell
esto hacía un deploy
automáticamente
no
porque lo estamos haciendo manualmente
pero lo que estaba haciendo
era empaquetar nuestra aplicación
ejecutando
el build script
que ya está configurado
esto lo subía a su servidor
y ya teníamos
una URL
donde podíamos ver
nuestra página
de hecho
vamos a ver
si esto funciona correctamente
todo lo que hemos hecho y tal
ya nos deja una URL aquí
que podamos inspeccionar
esto es lo que vimos
en la clase anterior
vale
y aquí ya nos dice
pues no
cuánto lleva
qué es lo que está haciendo
ahora está haciendo la instalación
está haciendo el building
vale
perfecto
entonces
lo que me interesaría
es que además
para que estéis haciendo
para que podáis
probar vuestras PR
que hagáis sobre el proyecto
pues lo que quiero
es añadir la integración
con GitHub
en GitHub
vamos a nuestro
proyecto
React Live Coding
vale
aquí está
nuestro repositorio
con todo el código
de nuestro proyecto
me gustaría
que cada vez
que creo una PR
pues hacer
un deploy automático
y tener la URL
y eso lo vamos a conseguir
con la integración
de Vercell
mira
aquí ya ha terminado
es una maravilla
40 segundos
y ya tenemos
totalmente gratis
nuestra página
deployada
en una URL
que es esta
y la podemos ver aquí
vale
de hecho podéis ver
que esta es la URL
y que el title
es el nuevo
que habíamos puesto
así que ya está funcionando
y con el diseño nuevo
y todo
vale
en 40 segundos
esto está muy bien
pero nos gustaría
que esto
se haga automáticamente
cada vez que hacemos
pues un merge
a master
que el código
es definitivo
ya lo tenemos en master
o nos gustaría
ir creando PR
cada pull request
que tenga una URL
para ver
pues nuestro código
así que
lo que vamos a hacer
es ir al proyecto
a ver si soy capaz
de ir a projects
vale
este es el dashboard
de Vercell
aquí tenemos
aquí tengo yo
todos mis proyectos
que estoy utilizando
tengo el de Giphy
tengo incluso mi blog
el de React Slidy
el coronavirus
el spread simulator
este que hizo
maravilloso
os lo recomiendo
como era esto
de si nos quedábamos
en casa
cuántos muertos había
y tal
o sea
era bastante interesante
os recomiendo
y le echéis un vistazo
bueno
total
que se puede hacer
de todo
deployar cualquier cosa
vamos a nuestro proyecto
a este de Giphy
y vamos aquí
ya podemos ver
que tenemos
deploy with our git integrations
vas a ver
que es tan fácil
que igual
me matáis
entonces
aquí podemos ver ya
pues
la configuración
de nuestro proyecto
y nos dice
el git integrations
cómo podemos conectar
este repositorio
es como hacer un link
de nuestro proyecto
con el repositorio
de github
aquí
ya nos dice
que tenemos que añadir
el repositorio
entonces
solo tenemos que mirar
cuál es el nombre
es React Live Coding
pues lo vamos a copiar
y vamos aquí
y lo pegamos
pam
y le vamos a decir
un save
ya está
entonces
ya
se supone
que tenemos
updated git integrations
successfully
¿qué pasa?
hay veces
que aquí
os pide permisos
es posible
que si no
lo habéis hecho nunca
os diga
necesito permisos
para continuar
y entonces
os salta a github
y os dice
¿permites que
Purcell
tenga permisos
para poder
integrarse
y tal
y tal?
pues claro
le decís que sí
¿vale?
y ya está
o sea
en realidad
debería ser tan sencillo
como eso
vamos a probar
si lo que he hecho
pues funciona
o no funciona
voy a crear aquí
una nueva PR
que vamos a añadirle
vamos a llamarle
seo and github integration
¿vale?
vamos a copiar todo
a saco
add seo class
y esto lo empujamos
en esta rama
¿vale?
ahora si vamos aquí
a nuestro github
¿vale?
podemos ver
que me ha saltado
que tengo esta PR
para aquí
bueno esta rama
que puedo crear PR
¿no?
que la compare con master
y a ver
vale
pues lo dejamos aquí
y ya puedo crear
nuestra PR
add the new class
about
seo and react helmet
y creamos la PR
vamos a ver
¡pum!
entonces
ya puedes ver aquí
que lo que está diciendo
es que esta rama
está siendo deployada
y podemos ver
entre los checks
el de versell
nos dice que pending
y que se está deployando
podemos inspeccionar aquí
tal y como por aquí
podemos inspeccionar ya
el deploy
hacemos inspect
podemos ver como va
aunque esto lo va a actualizar
en la PR
super fácil
pero aquí podríamos ver
vale pues está haciendo el building
o podemos ver los errores
si ha habido algún tipo de error
o si
aquí nos dice
que ha habido un warning
porque hay una cosa del linter
o algo ¿vale?
entonces
mira
ya ha terminado
si volvemos a nuestra PR
se actualiza automáticamente
con el nuevo estado
y nos deja
una URL
que es esta de aquí
con nuestra rama
deployada
que podemos ya
acceder a ella
desde cualquier sitio
de hecho
os la voy a pegar
en el chat
para que veáis
que no es ninguna mentira
bueno
no sé si se podrá ver
pero
ya os he dejado en el chat
ahí una URL
que es esta URL
de la PR
o sea
por cada PR
que vayamos a crear
vamos a tener una URL
que vamos a poder compartir
imagínate esto
pues si tenéis un proyecto
y estáis probando
una nueva funcionalidad
pues
imagínate
le cambies el diseño
y decís
bueno pues quiero
compartirlo con mis amigos
para que vean el nuevo diseño
sin necesidad de que se instale
el repositorio
y todo esto ¿no?
pues en menos de un minuto
hemos tenido una URL
deployada con HTTPS
y que nos ha permitido
compartirlo súper fácil
que decimos ahora
bueno pues voy a mergear esto
pues le damos a merge
lo confirmamos
y ahora cuando mergeemos
¿vale?
vamos a eliminar la rama
y ahora cuando mergeemos esto
lo que nos vamos a encontrar
aquí no se ve tan fácil
pero aquí en esta
esta cosita aquí
Lila
esto que se está deployando
si le hacemos un clic
nos sale este pop-up
que lo que nos hace
es indicarnos
todo lo que está ocurriendo
¿no?
y lo que está ocurriendo
es que Purcell
está deployando
es importante notar
que en la pull request
nos ha deployado
nuestra aplicación
en una URL
que pues tenía esa
como
el nombre de la rama
aquí
nos está haciendo
el deploy
a producción
o sea
el nombre
que le hayamos indicado
en nuestro proyecto
que debe tener
como
nombre definitivo
es el que vamos a ver
aquí en producción
vamos a ir aquí al deploy
ya lo tenemos
vale
pues ya lo tendríamos aquí
entonces
cuidado con esto
porque claro
ahora cuando mergeéis
podéis machacar
vuestros cambios
directamente
así que
tened cuidado
a la hora de hacer
un deploy
porque ahora lo que hemos conseguido
básicamente
es tener un deploy
continuo directamente
¿vale?
de hecho aquí podemos ver
mira y de hecho
ha fallado por algo
el de producción
¡ah!
ya
ahora vais a ver
por qué ha fallado
o creo que sé
por qué ha fallado
bueno
aquí
en los environments
podéis encontrar
las diferentes
los diferentes entornos
que tenéis
tendríais el de preview
y tendríais el de producción
¿vale?
el de producción
dice que ha fallado
en este caso
creo
que cree que ha fallado
porque
le configuré un dominio
¿vale?
es totalmente gratuito
configurar el dominio
y lo podéis hacer
también aquí en projects
vamos a
no
aquí no
a ver
aquí
no
este es el anterior
aquí
vale
vale
aquí podéis ver
que hay un error
¿vale?
fail to assign
domain
vale
esto es porque
en la última clase
cuando estábamos hablando
de esto
teníamos el tema
del dominio
en settings
aquí podemos tener
los dominios
y en los dominios
podéis ver
que este
que lo había puesto
para que veáis
que se podía añadir
pues no lo
no lo encuentra
porque no existe
¿vale?
entonces lo vamos a quitar
para que deje de dar
los problemas
el que sí que debería
funcionar es este
que es el de gifing out
lo que pasa es
como ha intentado
hacer el de preview
en el anterior
pues por eso
seguramente ha fallado
y por eso nos ha dicho
que había un failure
¿vale?
pero ha sido
básicamente
porque no teníamos
el dominio configurado
¿vale?
oye
por cierto
muchas gracias
Sergio Serrano
por el dólar
y muchas gracias
Emanuel Villanueva
por los 100 ARS
que deben ser
argentinos
argentinos
super buenos
aquí tienes
profe
un viernes más
aportado de comunidad
muchas gracias
Emanuel
muchas gracias
por aportar
vale
pues entonces
es totalmente gratis
deployar en Vercel
tenéis
deploy por PR
tenéis un deploy
os deja una URL
como esta
que podéis configurar
esta sería
para la que hemos visto
para la pull request
y esta
la que podemos configurar
le podemos poner aquí
la que queramos
le podríamos poner
por ejemplo
another
giphyurl
.nao.sh
si utilizáis
.nao.sh
estos son
el gratuito
digamos
de Vercel
¿vale?
así que lo podéis añadir
y esto es un dominio
que os da
de forma totalmente
gratuita
pero también podéis
poder configurar
por supuesto
vuestro dominio
podríais poner
el buscador
más chido
o más chévere
más chévere
en honor a Emanuel
más chévere
.com
entonces esto lo añadís
y ya tendríais
pues haría el deploy
directamente
en estas tres URLs
como están estas tres URLs
es bastante importante
que tengáis
el tema
de las canonical
¿vale?
en Helmet
podéis también
hacer el tema
de las canonical
por ejemplo
¿qué pasa?
que ahora
si entramos
en esta URL
¿vale?
another giphyurl
now
y en esta
bueno esta
porque ahora
todavía tenía anterior
porque no se deployó
y tal
pero imagina que está
la misma página
ahora tendríamos
la página
en dos URLs
distintas
entonces
para evitar esto
una de ellas
sería
quitar las URLs
de now
pero hay veces
que te puede interesar
por qué motivo
y otra
sería
indicarle
la canonical
que esto es como
para decirle a Google
ok
si tienes que buscar
esta URL
o sea
si entras a esta URL
tienes que saber
que la canonical
la realmente
la página
a la que me estoy refiriendo
tiene este path
porque si no
puede pensar
que tienes contenido duplicado
o que hay diferentes
dominios duplicados
así que
ten en cuenta esto
añadir la canonical
con el meta
a ver si
por ejemplo
yo creo que sí
que tengo canonical
aquí
digo yo
porque también me pasaba
un poco algo similar
yo también tengo una URL
por aquí
entonces aquí tengo
la canonical
que me indica
cuál es realmente
la URL
cuando entra Google
a esta página
cuál es la URL
cuál es la buena
¿vale?
por si encuentra
el mismo contenido
en más de un sitio
entonces
aquí deberíamos hacerlo
también en todas
nuestras páginas
aquí la canonical
pues deberíamos decir
bueno la canonical
por si se nos cuela
una URL de desarrollo
o lo que sea
pues que será
pues el buscador
HTTPS
el buscador
más chévere
punto com
¿vale?
así que tened en cuenta esto
que esto es súper importante
y hay que cerrar aquí
que si no
esto no funciona
que no se os olvide
de las canonical
que las carga el diablo
y luego hay un montón
de líos
así que
vamos a ver
lo pongo por aquí
no está mal
esta cámara
sí
me gusta
el buscador
más piola
ponle
vale
lo llegó a saber
gracias por el
me está haciendo
el cambio tarifario
100 ARS
son 1,46 dólares
pesos argentinos
muy bien
no sé
por qué
por qué se llamarán
pesos
todas las monedas
de
muchos pesos
pesos
pesos
pesos
no sé
porque pesaba
y ya está
no sé
qué chorrada
me estoy preguntando
pues
con esto hemos visto
cómo añadir SEO
pero desde cero
desde cero
cómo cambiarle el título
cómo cambiarle la descripción
y lo hemos hecho nosotros
nada
con muy pocas líneas de código
de una forma controlada
pensaba que
el problema este
de que se
se quedaba el título
iba a ser solo nuestro
pero
ya has visto que en Helmet
también ocurre
es normal
es normal
porque la idea es que
en todas las páginas
tengas este tipo de utilidad
¿no?
una vez que lo tienes en una
lo deberías tener en todas
así que
si te ha gustado
cómo hemos hecho
el tema del SEO
si no conocías
Reagelmet
o si lo conocías
o si no conocías
Reaget
el cual te recomiendo mucho
que lo revises
y lo mires
dale un dedito
dale un dedito
si estás aquí
dale un like
al vídeo
al live
si te ha gustado
suscríbete
ayudadme a compartir
a llegar a más gente
por ahí
que me ayuda
para hacer más vídeos
y tal
también me podéis seguir
en Twitter
y para ver cosas
como esta
como que estoy
de mudanza
este soy yo
en la mudanza
¿vale?
y también
pues os podéis ir informando
de cuando
cuando ocurren los live
¿vale?
que voy avisando
voy avisando ahí
de cuando son los live
cuando queda
y todo esto
y así también estamos
más cerquita
¿vale?
entonces
también hemos visto
cómo hacer
deploys
con Vercell
pero no solo deploys
sino también hemos visto
cómo podemos integrarlo
en GitHub
lo mejor de esto
es que ahora
ya
tal y como tenemos
nuestra aplicación
si alguien
hace una PR
a nuestro proyecto
lo cual invito
a que la hagáis
para mejorar el 404
para mejorarle el SEO
para no sé
para añadir
lo que sea
darle una vuelta
que me encanta
y veo que además
lo hacéis
hacéis cosas brutales
pues ahora
vamos a tener la ocasión
de que cualquier persona
vean una URL
en lo que
esos cambios
así que
esto nos va a ayudar
pues a acelerar
el desarrollo
que es lo que queremos
¿no?
lo que queremos
es entregar
cuanto antes
valor a nuestros usuarios
así que también
hemos visto
la integración
con Vercell
dale like
comenta
este vídeo
lo que sea
y me vas diciendo
qué te gustaría ver
en los siguientes
creo que
no sé si en el siguiente
pero en próximos
vamos a ver
Emotion
algo muy parecido
a Style Components
y no sé
no sé qué más
no sé qué más
en algún momento
me gustaría ver
Server Site Rendering
sé que va a ser
muy complicado
pues una
algo muy denso
pero creo que puede valer
la pena
pero
va a ser
va a ser
tenemos que
tenemos que llegar a ello
pues nada
de verdad
muchísimas gracias a todos
otra vez
Sergio
muchas gracias
Sergio Serrano
gracias grande
esperando al siguiente viernes
muchas gracias Sergio
por esos dos dólares
te agradezco un montón
dice
veremos algo de Server Site Rendering
sin Next
dice Adrián Rueda
sí
me gustaría
y solo haríamos eso
porque
realmente es complejo
y tendríamos que hacer
muchos cambios
en nuestra aplicación
porque
el cómo recuperamos
los datos
en el servidor
para hidratarlo
ahí es donde está
la magia
y la complejidad
de Server Site Rendering
y me da un poco de pena
porque en React 17
creo que esto
se va a simplificar mucho
entonces
si nos lo curramos
mucho con esto
pues nada
va a ser una
va a ser un poco
a contrapié
pero creo que puede
valer la pena
es avanzado
no os voy a engañar
puede ser avanzado
pero creo que
es muy interesante
porque muy poca gente
lo hace
me dicen por aquí
drag and drop
animaciones
o inputs file
son muchas cosas
pues de animaciones
sé que hay
un chico
argentino
o de Sudamérica
que hace
que tiene una librería
de animaciones
que me gustó mucho
y que quería añadir
en nuestro proyecto
para
para hacer la transición
entre la parrilla
y el detalle
así que
este también lo apunto
a ver si lo añado
con el motion
y así tenemos
dos temitas
vale
gracias Adrián Rueda
3 euros 49
muchas gracias
muchas gracias
que sepáis que
también me apoyáis
os agradezco un millón
que contribueráis
y que me soportéis
o sea
me deis
me deis estas donaciones
y tal
porque
bueno
porque así puedo dedicarle
más tiempo
y también
que sepáis que no hace falta
que me deis dinero
si no podéis
si no queréis
y no hace falta
o sea
me ayudáis un montón
compartiéndolo
comentándolo
dándole like
hablando por ahí
en grupos y tal
de estos live
del canal
y todo esto
y de todos los contenidos
en los que vamos a trabajar
vale
así que
me podéis ayudar
de un montón de formas
y seguir creciendo
para seguir
más en esto
gracias a ti Adrián
eres un crack
Enrique Moreno
gracias Midudev
excelente material
y con esto
pues nada
nos vamos a ir
para
el siguiente viernes
aquí en Midudev
seguir y continuar
con estas clases en vivo
que nos lo pasamos
súper bien
ya os iré contando
a ver
de qué vamos a hablar
pero creo que
estamos haciendo
un trabajo
fenomenal
creo que entre todos
de verdad
estoy hasta emocionado
y súper orgulloso
del trabajo
que entre todos
hemos llevado adelante
con esta aplicación
súper súper bien
y os lo agradezco
vaya
gracias Adrián
por esos 100 pesos
argentinos
la comunidad debe darte las gracias
de alguna manera
Sergio
sí
os lo agradezco
vuestro apoyo
es suficiente
de verdad
para realizar
deploy en un servidor propio
la verdad es que
el servidor propio
es complicado
pero también lo podemos
lo podemos mirar
lo miraremos
lo que pasa es que
Vercell
es tan fácil
tan fácil
que un servidor propio
tienes que tener un servidor
dedicado
y tal
bueno
lo miraremos
muchas gracias a todos
gracias Nicolás
gracias Martín
Juan Carlos
Sergio Serrano
Federico
Adrián Rueda
David Ramírez
Camilo GG
Manuel Villanueva
muchas gracias a todos
Adrián Nieves
Jonathan DB
Miguel Álvarez
muchas gracias de corazón
cuidaos mucho por favor
os mando un abrazo
y de verdad
cuidaos
seguid dándole
como siempre
al frontend
gracias por estar aquí
hasta el siguiente vídeo
y mi dúde
adiós
chao
las gracias a todos
videos