¿Cómo se vuelven interactivos los sitios de Framer?

Un sitio web está hecho de HTML y se vuelve interactivo con JavaScript. Para garantizar que la carga inicial de la página sea rápida, enviamos primero HTML, para que los usuarios (y los motores de búsqueda) vean el contenido lo más rápido posible. Esto se suele llamar renderizado del lado del servidor.

En paralelo, cargamos el JavaScript que se necesita para un proceso llamado “hidratación” (sí, como regar plantas 🫗🪴). El propio proceso es manejado por nuestro marco de elección, React, que potencia cada sitio de Framer. Técnicamente, la hidratación toma el HTML recibido y adjunta escuchas de eventos, por ejemplo, hace que los elementos escuchen por ‘clics’ o ‘scroll’. Es en este momento cuando tu sitio web puede procesar interacciones de usuario y cuando lo llamamos ‘interactivo’.

Algunos de los elementos basados en JavaScript necesitan datos que tienen que ser obtenidos del servidor para proporcionar interactividad. Por ejemplo, nuestra página de inicio necesita el estado de inicio de sesión del usuario en las áreas marcadas en rojo:

En otros sitios de Framer podría ser obtener reseñas, las últimas publicaciones del blog o incluso solo el clima. Cada obtención toma un poco de tiempo. Especialmente si una obtención conlleva a otra obtención, lo cual es bastante común. Todo esto se realiza durante la hidratación.

A partir de aquí, vamos a ser más técnicos para mostrarte lo que realmente está sucediendo bajo el capó. Si te interesan menos los detalles técnicos, puedes saltar directamente a los resultados en el último capítulo.