• Inicio
  • Iniciar sesión
  • Crear cuenta
  • Explorar cursos
  • Bootcamps
  • Precios
  • Blog

¡Califica el Curso para crear Single Page Applications con React!

Selecciona la calificación de 1 a 5 estrellas

Reporta un error

Curso Curso para crear Single Page Applications con React

Video Router del cliente

Tipo de error

Algo salió mal al cargar el vídeo

El vídeo no pudo cargarse, hemos enviado un reporte al equipo de desarrollo, para poder solucionarlo a la brevedad.

Mientras solucionamos el problema, intenta lo siguiente para solucionar el error:

  • Recarga la página
  • Intenta reiniciar tu navegador y luego vuelve a reproducir el vídeo
  • Vacía el caché de tu navegador
  • Intenta reproducir con las extensiones del navegador deshabilitadas
  • Intenta con un navegador distinto
  • Si el problema persiste contáctanos en Discord
home Ir al inicio report_problem Reportar falla star Valorar curso

Para comprender cómo funciona el proceso de ruteo en el cliente, primero debemos entender qué pasa cuando enviamos una solicitud a un servidor, para que esté nos entregue la respuesta que queremos.

En un sitio web sin dinamismo, tenemos múltiples archivos HTML, cada uno de ellos con una ruta correspondiente de acceso, misma que usualmente es igual a la ubicación del archivo en el servidor. El servidor tiene el trabajo de darle lectura a la ruta, y buscar el archivo correspondiente. A este proceso lo llamamos ruteo, y es la forma más básica de ruteo que existe.

En una aplicación web, el proceso de ruteo lo hace un lenguaje de programación, usualmente apoyado de un archivo en el que se definen las rutas, junto con las estructuras de código que darán respuesta a cada ruta, usualmente una función.

Cuando el servidor recibe una petición, el servicio encargado del ruteo, carga el archivo con las rutas definidas, busca la ruta recibida y delega a la función correspondiente el darle respuesta a la solicitud, la función produce la vista, y los links a los archivos necesarios para cargar la página.

la respuesta a la ruta. Este es el ruteo al que usualmente conocemos como server side routing, o ruteo en el servidor. Es el más común y el más tradicional.

Existen algunas deficiencias al routing en el servidor, como por ejemplo, que aunque dos páginas de rutas distintas, usen el mismo archivo de estilos, ambas páginas deben de volver a solicitarlo y volver a cargarlo. En cada navegación entre rutas, el navegador pausa mientras carga la nueva vista, y la despliega. Haciendo que el sitio sea inusable durante estos segundos.

Para mejorar la experiencia de usuario, se produce este concepto de routing desde el cliente, que es, traer toda la lógica de ruteo del server, hacia el cliente. Tal como en el caso del ruteo en el servidor, en el cliente, se define un archivo con las rutas de la aplicación, y qué función se encargará de responder, en el caso de React, es un componente el que se muestra para cada ruta.

Este proceso implica que sea el lenguaje del cliente, JavaScript, quien implemente la lógica necesaria para actualizar la página. Misma que puede verse de una de las dos siguientes formas:

La primera, que se cargue un archivo JavaScript que incluya todas las funciones para actualizar la página. Que al cambiar la página, se use este archivo JavaScript para actualizar la página misma, y sólo se carguen los nuevos recursos solicitados como imágenes, videos, etc.

La segunda, que se cargue una porción de JavaScript por página, y que cuando se navegue hacia otra ruta, se realice una petición AJAX al servidor, para traer otra porción de JavaScript que actualice la página. Todo esto sin recargar la página. A este proceso se le llama code splitting, porque dividimos el código por páginas.

De entre las dos estrategias, la de code splitting suele ser la mejor, porque evita que desde la primera página que visites, descargues todo el código de la aplicación completa. Por otro lado, la estrategia de code splitting, implica que debes tener una estrategia y una herramienta para separar tu código. Webpack puede hacer esto por ti.

Una de las grandes ventajas que nos ofrece el routing en el cliente, es la posibilidad de recargar la página por porciones, en lugar de hacerlo completamente. Esto entre otras cosas nos permite guardar el estado de los elementos que no se actualizan, y únicamente modificar lo que sí. Además de que permite que el usuario pueda continuar interactuando con el sitio, aún cuando una parte esté cargando.

Entre las desventajas del routing en el cliente tenemos que, puede romper la funcionalidad de la página si se deshabilita JavaScript, normalmente, estas tecnologías no están diseñadas para trabajar junto con lectores de pantalla u otras herramientas de accesiblidad. Esta práctica también puede ser más difícil de mantener, porque gran parte de la funcionalidad que el protocolo HTTP y el funcionamiento de la web, dan por defecto, tiene que implementarse desde 0 en el router del cliente.

Si tu aplicación se puede beneficiar de la experiencia mejorada del router en el cliente, y tienen el equipo para solventar las deficiencias, es una gran elección. Continuemos.

  • check_circle_outline
    Módulo 1 | 6 clases

    Introducción

    expand_more
  • check_circle_outline
    Módulo 2 | 8 clases

    Routing en el cliente

    expand_more
    • done_all

      Clase 1

      Router del cliente

    • done_all

      Clase 2

      Configurar react-router v6

    • done_all

      Clase 3

      Definir rutas

    • done_all

      Clase 4

      Links de navegación

    • done_all

      Clase 5

      Rutas anidadas

    • done_all

      Clase 6

      Navegación con JavaScript

    • done_all

      Clase 7

      Leyendo parámetros

    • done_all

      Clase 8

      Ranking de rutas

  • check_circle_outline
    Módulo 3 | 13 clases

    Autenticación de usuarios

    expand_more
  • check_circle_outline
    Módulo 4 | 10 clases

    Consumir servicios web

    expand_more
  • check_circle_outline
    Módulo 5 | 19 clases

    Styled components

    expand_more
  • check_circle_outline
    Módulo 6 | 7 clases

    Scroll infinito

    expand_more
  • check_circle_outline
    Módulo 7 | 4 clases

    Deploy a producción

    expand_more
  • check_circle_outline
    Módulo 8.-

    Examen del curso

    expand_more
    • done_all

      Examen

      Examen final del curso

3 comentario(s)

Edinson Madrid

03 Julio 22

more_vert
  • Resuelta

Tuve ciertos problemas en el tema anterior donde usan la extension rest client no me funcionó, utilice thunder client y el post me funcionó pero despues segui los pasos para hacer el GET a videos y me tira error y no lo pude solucionar todavia

Carlos Alberto Quintero Paisano

09 Agosto 21

more_vert
  • Resuelta
Wow, muy buena explicación.

Ana Castillo

19 Mayo 21

1
more_vert
  • Resuelta
Esto es simplemente increible :0

Router del cliente

arrow_back Siguiente arrow_forward
Curso para crear Single Page Applications con React