La web funciona a partir de peticiones que pasan del navegador al servidor. Luego, este servidor obtiene una respuesta que pasa de vuelta al navegador para ser interpretada y transformada en el resultado final que se muestra en pantalla. En este post, te enseñaremos cómo funciona el orden de peticiones en el servidor para que comprendas la lógica detrás de lo que pinta el navegador.
Un poco de contexto
En nuestro post sobre cómo funciona el inspector web, te hemos enseñado que, cuando seleccionamos el segmento de network en el inspector de un navegador Chrome, podemos revisar las distintas peticiones que se le hacen a nuestro servidor cuando se ejecuta cualquier acción en una página web. Ahora, te explicaremos cuál es el orden de peticiones en el servidor cuando ejecutamos un simple hola mundo.
El orden de peticiones en el servidor que te explicaremos se basa en un proyecto con un archivo index.html. Dentro de este archivo, tenemos el código que hemos escrito en nuestro post sobre crear un hello world en JavaScript, además de algunas líneas de código que hemos usado para explicar conceptos en nuestro post sobre cargar JavaScript en HTML.
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset= «UTF-8″/>
<meta http-equiv= «X-UA-Compatible» content=»IE-edge»/>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>
<title>Helloworld kc</title>
</head>
<body>
<h1>hola mundo!</h1>
<script>
console.log(«hola mundo!»);
</script>
<script src=»index.js»></script
<script type=»module» src=»index-module.js»></script>
</body>
</html>
Ahora que entendemos nuestro contexto, te explicaremos cómo funciona el orden de peticiones en el servidor usando el inspector web del navegador Chrome.
¿Cuál es el orden de peticiones en el servidor?
Ahora que tenemos nuestro código, ¿cuál es el orden de peticiones en el servidor que le corresponde? Nosotros estamos viendo cuatro peticiones al servidor HTTP que hemos creado con live server en Visual Studio Code, todas con un simple hello world.
La primera en el orden de peticiones en el servidor es para traer el documento index.html que hemos creado. Si vemos la respuesta a esta petición, veremos el código que nosotros hemos escrito más el código que inserta live server para poder montar y refrescar el navegador.
Las demás secciones que encontramos en el orden de peticiones en el servidor son las que buscan nuestros archivos index.js y index-module.js. En este momento, estas peticiones nos están devolviendo un error 404, porque no tenemos estos archivos creados dentro de nuestro proyecto. Sin embargo, en cuanto los creemos, las peticiones serán resueltas y nos devolverán un trozo de código similar al de la petición del index.html. Cuando esto sucede, el status de la petición pasa de un 404 a un 200.
¿Cómo funciona el orden de peticiones en el servidor?
Como puedes ver, el orden de peticiones en el servidor se da en el orden en el que hayamos escrito nuestro código. Es decir, lo primero que sucede es la petición del index.html. Con ella, el navegador empieza a parsear el código HTML. Luego, el intérprete de JavaScript lee el código de arriba hacia abajo.
Esto significa que, tras pedir el archivo general de nuestro proyecto, se pinta el código dentro de la etiqueta script. Luego, se irán haciendo las peticiones según lo que se inserte en nuestro código. En este sentido, primero se hace la petición de index.js y luego, una vez resuelta, se hace la petición de index-module.js.
Ten en cuenta que el orden de peticiones en el servidor es intrínseco a la posterior ejecución del código. Dicho de otra manera, el orden en el que se pintan las cosas sigue el orden en el que se piden. Entonces, el output por consola se ve afectado por el orden de las peticiones HTTP.
Como mencionamos antes, una nueva petición no se hace hasta que se resuelva la línea de código anterior, ya sea una petición o un comando como console.log. En este sentido, el intérprete de JavaScript no hará la petición de index-module.js hasta que se resuelva la petición de index.js; es decir, hasta que se interprete y ejecute todo el código dentro del archivo index.js.
A este orden de peticiones en el servidor se le llama peticiones síncronas, pues van una detrás de otra.
¿Cuál es el siguiente paso?
Después de leer este post, sabes exactamente cuál es y cómo funciona el orden de peticiones en el servidor. Sin embargo, ¡todavía queda mucho por aprender del mundo del desarrollo web para convertirte en un profesional! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva que combina la teoría y práctica para transformarte en un experto de este mundo en pocos meses. ¡No esperes más para darle un impulso a tu vida y pide información!
