¿Cómo se vuelven interactivas las sitios de Framer?

Un sitio web está hecho de HTML y se vuelve interactivo con JavaScript. Para asegurar 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 llama generalmente renderización del lado del servidor.

En paralelo, cargamos el JavaScript que es necesario para un proceso llamado “hidratación” (sí, como regar plantas 🫗🪴). El proceso en sí 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 oyentes de eventos, por ejemplo, hace que los elementos escuchen 'clics' o 'desplazamientos'. Es en este momento cuando tu sitio web puede procesar las interacciones del usuario y por eso lo llamamos 'interactivo'.

Algunos de los elementos basados en JavaScript necesitan datos que deben 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 conduce a otra obtención, lo cual es bastante común. Todo esto se hace durante la hidratación.

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