Cómo muestra Squarespace el contenido: del lado del servidor frente al lado del cliente
Esta publicación es una colaboración con BeyondSpace.studio
Los métodos de renderización en Squarespace influyen en todo, desde la velocidad de la página hasta el SEO y la experiencia del usuario. Squarespace utiliza tanto la renderización del lado del servidor (SSR) como la del lado del cliente (CSR) para diferentes tipos de bloques. Comprender cómo funcionan puede ayudarte a tomar decisiones informadas sobre qué bloques utilizar y qué puedes esperar en cuanto al rendimiento.
¿Qué es el renderizado del lado del servidor (SSR)?
Con la renderización del lado del servidor (SSR), el servidor genera el contenido antes de enviarlo al navegador. Esto significa que, cuando un usuario visita una página, recibe un documento HTML totalmente renderizado, con todo el contenido necesario ya incluido. JavaScript puede mejorar la página con interacciones adicionales, pero el contenido principal es visible de inmediato.
Renderización del lado del servidor - Fuente de la imagen: prismic.io
✅ Ventajas del SSR:
Tiempos de carga iniciales más rápidos, ya que el navegador no tiene que recuperar los datos por separado.
Es mejor para el SEO porque los motores de búsqueda pueden indexar el contenido directamente sin necesidad de ejecutar JavaScript.
Un funcionamiento más fiable, ya que el contenido se muestra incluso si JavaScript no se carga.
❌ Inconvenientes:
El SSR aumenta la carga del servidor, ya que cada solicitud debe procesarse antes de enviar la página.
La visualización de páginas complejas y con mucho contenido puede tardar más tiempo que la visualización del lado del cliente.
Las páginas dependen de una recarga completa para actualizarse, lo que las hace menos dinámicas.
Los elementos interactivos están limitados hasta que la página se haya cargado por completo.
Cómo utiliza Squarespace el SSR: bloque de resumen
El bloque «Resumen» (que se utiliza para mostrar entradas de blog, eventos u otros elementos de la colección) es un ejemplo de cómo Squarespace aprovecha el SSR.
El servidor genera y envía la lista completa de la colección como parte de la carga inicial de la página.
A continuación, se ejecuta JavaScript para aplicar estilos e interactividad, como efectos al pasar el cursor o la paginación.
El contenido está disponible de inmediato; los usuarios no tienen que esperar a que se cargue dinámicamente.
Representación del bloque de resumen de Squarespace
Esto significa que, aunque un visitante tenga desactivado JavaScript, seguirá viendo el contenido, lo que convierte al SSR en una opción más sólida para los bloques con gran cantidad de contenido.
¿Qué es el renderizado del lado del cliente (CSR)?
Con la representación del lado del cliente (CSR), el navegador carga inicialmente solo una estructura HTML mínima, y JavaScript se encarga de recuperar y mostrar el contenido de forma dinámica. Este enfoque reduce el tamaño inicial de la página, pero también implica que los usuarios pueden experimentar un retraso mientras se carga el contenido.
Representación del sitio del cliente - Fuente de la imagen: prismic.io
✅ Ventajas de la RSE:
Es más eficiente para conjuntos de datos de gran tamaño, ya que solo se recogen los datos necesarios según se vayan necesitando.
Es más adecuado para aplicaciones interactivas, ya que permite actualizaciones dinámicas sin necesidad de actualizar la página.
Una carga inicial más ligera, lo que mejora la experiencia de los visitantes que acceden por primera vez al sitio web.
❌ Inconvenientes:
Los tiempos de carga parecen más largos, ya que el contenido solo aparece una vez que JavaScript ha terminado de cargarse y procesarse.
Retos de SEO, ya que los motores de búsqueda pueden tener dificultades para indexar el contenido cargado dinámicamente.
Depende de la velocidad de la red, lo que significa que, con conexiones más lentas, se tardará más en cargar el contenido.
Cómo utiliza Squarespace la RSE: bloque de calendario
Visualización del bloque de calendario de Squarespace
El bloque «Calendario» (que se utiliza para mostrar listados de eventos o entradas de blog) es un ejemplo de CSR en Squarespace.
Al principio, solo se carga el contenedor del bloque «Calendario»; los usuarios verán una estructura en blanco o un pequeño indicador de carga.
A continuación, JavaScript recupera los datos del evento a través de Internet, lo que significa que la velocidad de carga depende de la conexión a Internet del usuario.
Una vez recuperados los datos, se introducen en las celdas del calendario y se muestran como entradas de eventos.
Este proceso se repite cada vez que el usuario pasa al mes siguiente o al anterior, lo que significa que se produce un ligero retraso cada vez que se visualiza un nuevo mes.
Con Beyondspace Source URL Helper, redirige sin esfuerzo a los usuarios al evento o a la entrada de blog original directamente desde tu bloque de calendario o de resumen.
👉 Prueba el asistente de URL de Beyondspace Source
El CSR resulta adecuado para el bloque de calendario, ya que permite actualizar los eventos de forma dinámica sin necesidad de recargar toda la página. Sin embargo, esto también implica que la carga inicial tarda más en comparación con los bloques de SSR, como el bloque de resumen.
Comparación: SSR frente a CSR en Squarespace
| Tipo de renderizado | Ejemplo de bloque | Cómo se carga | Ventajas | Contras |
|---|---|---|---|---|
| Renderización del lado del servidor (SSR) | Bloque de resumen | El contenido se precarga y se aplica el estilo mediante JavaScript | Carga inicial más rápida, lo cual es bueno para el SEO | El contenido no se puede recuperar de forma dinámica |
| Representación del lado del cliente (CSR) | Bloque de calendario | El contenido se carga mediante JavaScript una vez que se ha cargado la página | Reduce el tamaño inicial de la página y permite actualizaciones dinámicas | Requiere más tiempo de carga y depende de la velocidad de la red |
Mejora el SEO con SSR y bloques sincronizados
En lo que respecta al SEO, la representación del lado del servidor (SSR) ofrece una clara ventaja, ya que el contenido está disponible de inmediato para los motores de búsqueda. Aquí es donde el plugin Synced Blocks marca la diferencia. A diferencia del contenido cargado dinámicamente, Synced Blocks garantiza que el contenido reutilizable se represente directamente en el código HTML de la página, lo que facilita su indexación por parte de Google.
Los estudios indican que Google tarda hasta nueve veces más en rastrear contenido basado en JavaScript que en HTML. Con Synced Blocks, se elimina ese retraso y, al mismo tiempo, se optimiza la gestión del contenido. Al integrar bloques de contenido reutilizables directamente en el código HTML de la página, Synced Blocks garantiza una indexación más rápida, una imagen de marca coherente en todas las páginas y una mayor visibilidad y mejor posicionamiento en los resultados de búsqueda (SERP).
Conclusión
Tanto la representación del lado del cliente (CSR) como la representación del lado del servidor (SSR) desempeñan un papel fundamental en la forma en que se carga el contenido en tu sitio web de Squarespace, y cada una tiene sus propias ventajas y limitaciones. Aunque no puedes modificar los métodos de representación integrados de Squarespace, comprender cómo funcionan te ayuda a tomar decisiones más acertadas a la hora de seleccionar bloques de contenido y plugins de terceros. Al elegir el enfoque más adecuado a tus necesidades, podrás optimizar el rendimiento, mejorar el SEO y potenciar la experiencia general del usuario en tu sitio web.
