BigPipe
Envía páginas utilizando la técnica BigPipe que permite a los navegadores mostrarlas mucho más rápido mediante la transmisión de contenido en fragmentos.
big_pipe
Overview
BigPipe es una técnica de renderizado de páginas desarrollada originalmente por Facebook que mejora drásticamente el rendimiento percibido de carga de páginas. En lugar de esperar a que toda la página se renderice antes de enviar algo al navegador, BigPipe transmite el contenido de la página en fragmentos.
El módulo funciona enviando primero el 'esqueleto' estático de la página (encabezados, navegación, pie de página, etc.) inmediatamente, mientras que el contenido dinámico (bloques específicos del usuario, datos personalizados, tokens CSRF) se renderiza de forma asíncrona y se transmite a medida que está listo. Esto permite que los navegadores comiencen a renderizar y mostrar el contenido estático inmediatamente mientras los marcadores de posición dinámicos se reemplazan progresivamente.
BigPipe se integra automáticamente con el sistema de renderizado de Drupal y la estrategia de marcadores de posición. Identifica el contenido que debe marcarse como placeholder basándose en los metadatos de cacheabilidad, y luego reemplaza esos placeholders usando JavaScript (para navegadores con JS habilitado) o transmisión del lado del servidor (alternativa sin JS). El módulo no requiere configuración manual - se activa automáticamente para usuarios autenticados y usuarios anónimos con sesiones.
Features
- Transmite respuestas HTML en fragmentos usando Transfer-Encoding: chunked, permitiendo que los navegadores comiencen a renderizar inmediatamente
- Detección automática de JavaScript con respaldo inteligente al modo de transmisión sin JS
- Se integra perfectamente con el sistema de auto-placeholdering de Drupal para identificar contenido dinámico
- Soporta dos estrategias de placeholder: placeholders JS (reemplazados vía AJAX al final de la página) y placeholders sin JS (reemplazados en línea durante la transmisión)
- Maneja tanto placeholders HTML como placeholders de valores de atributos HTML (como tokens CSRF en URLs)
- Proporciona el contexto de caché session.exists para caché sensible a sesiones
- Establece cabeceras HTTP apropiadas para compatibilidad con CDN/proxy (Surrogate-Control, X-Accel-Buffering)
- Exclusión automática para rutas incompatibles con BigPipe (procesamiento por lotes, instalación de módulos)
- Protección XSS mediante lista blanca de IDs de placeholder en drupalSettings
Use Cases
Mejora del rendimiento percibido para usuarios autenticados
Cuando los usuarios autenticados cargan páginas, BigPipe envía el esqueleto de la página inmediatamente mientras el contenido específico del usuario (bloques personalizados, mensajes de estado, etc.) se renderiza y transmite progresivamente. Los usuarios ven el diseño de la página instantáneamente y observan cómo el contenido dinámico aparece a medida que está listo.
Sitios de comercio electrónico con carritos de compra
Los usuarios anónimos con carritos de compra tienen sesiones y se benefician de BigPipe. Los listados de productos y la estructura de la página se cargan inmediatamente, mientras que el widget del carrito y las recomendaciones personalizadas se transmiten a medida que los placeholders se resuelven.
Páginas con contenido dinámico costoso
Cuando las páginas contienen contenido que es costoso de generar (consultas complejas a base de datos, llamadas a APIs externas), BigPipe permite que las partes cacheables de la página se muestren inmediatamente mientras el contenido dinámico lento se computa y transmite.
Manejo de tokens CSRF
Los formularios y enlaces con tokens CSRF se benefician de la estrategia de placeholder sin JS de BigPipe. La estructura de la página se envía inmediatamente, y los tokens CSRF se transmiten en línea a medida que se generan, sin requerir JavaScript.
Mejora progresiva para usuarios sin JS
BigPipe detecta automáticamente cuando JavaScript está deshabilitado y recurre al modo de transmisión sin JS, donde los placeholders se reemplazan en línea durante la entrega de la página. Esto asegura que todos los usuarios se beneficien de la transmisión, no solo aquellos con JavaScript habilitado.
Tips
- BigPipe funciona mejor cuando el contenido está correctamente anotado con metadatos de cacheabilidad. Asegúrese de que sus render arrays incluyan contextos y etiquetas de #cache apropiados.
- Use #lazy_builder para contenido dinámico que debe ser marcado como placeholder. Esto se integra perfectamente con el mecanismo de transmisión de BigPipe.
- Para NGINX con php-fpm, BigPipe establece automáticamente la cabecera 'X-Accel-Buffering: no'. Para otros proxies, puede necesitar configuración adicional.
- Pruebe su sitio con JavaScript deshabilitado para asegurarse de que la alternativa sin JS funciona correctamente.
- BigPipe maneja automáticamente las dependencias de assets (CSS/JS) para el contenido transmitido, cargando nuevas librerías según sea necesario mediante comandos AJAX.
- El módulo establece la cabecera 'Surrogate-Control: no-store, content="BigPipe/1.0"' para informar a las cachés de borde que no deben cachear las respuestas de BigPipe.
Technical Details
Hooks 2
hook_help
Implementa hook_help() para proporcionar texto de ayuda en la página de ayuda del módulo explicando qué hace BigPipe y que no requiere configuración.
hook_page_attachments
Implementa hook_page_attachments() para añadir el mecanismo de detección sin JS. Cuando existe una sesión y la cookie sin JS no está establecida, añade un meta refresh <noscript> que redirige a /big_pipe/no-js para establecer la cookie. Cuando la cookie existe, añade JavaScript para eliminarla (indicando que JS está disponible).
Troubleshooting 5
Verifique: 1) El usuario tiene una sesión activa (BigPipe solo funciona para usuarios autenticados o usuarios anónimos con sesiones como carritos de compra). 2) El entorno de alojamiento soporta codificación de transferencia fragmentada y no almacena en búfer toda la respuesta. 3) Compruebe si un proxy inverso o CDN está almacenando las respuestas en búfer. 4) Asegúrese de que la ruta no tenga la opción '_no_big_pipe' establecida.
Esto se abordó en un parche reciente. Asegúrese de estar usando la última versión del módulo. El problema ocurría cuando el mismo placeholder aparecía múltiples veces en una página y se renderizaba/enviaba múltiples veces.
El mecanismo de detección sin JS usa cookies y redirecciones meta refresh. Si está viendo bucles de redirección, compruebe que las cookies se están estableciendo correctamente. La cookie big_pipe_nojs debe establecerse en la primera redirección de detección sin JS y prevenir redirecciones subsiguientes.
Revise la consola del navegador en busca de errores de JavaScript. El JavaScript de BigPipe valida los IDs de placeholder contra una lista blanca en drupalSettings.bigPipePlaceholderIds. Los placeholders desconocidos se ignoran por razones de seguridad.
Algunas rutas se excluyen automáticamente de BigPipe (páginas de lotes, instalación de módulos). Verifique si su ruta tiene la opción '_no_big_pipe' establecida. Puede añadir esta opción a rutas personalizadas en su routing.yml si es necesario.
Security Notes 4
- Las respuestas de BigPipe siempre se marcan como privadas y nunca deben ser cacheadas por cachés compartidas, ya que contienen contenido específico de la sesión.
- Los IDs de placeholder están en lista blanca en drupalSettings para prevenir ataques XSS a través del mecanismo de reemplazo de placeholders.
- Los tokens CSRF se manejan mediante placeholders sin JS para asegurar que se generen correctamente por sesión sin exponerlos a ataques de temporización.
- La cookie big_pipe_nojs se establece sin el flag httpOnly intencionalmente, permitiendo que JavaScript la elimine cuando JS está disponible.