Cuando estás trabajando duro para administrar tu tienda y administrar tu stock, mantener un servidor web puede no ser tu principal objetivo. Sin mencionar que alojar un SPA es un poco más complejo que solo servir un sitio HTML estático desde un servidor.
Afortunadamente, la tendencia hacia los spas de comercio electrónico ha creado un nuevo mercado de plataformas de infraestructura de backend sin servidor y alojamiento todo en uno que ejecutan aplicaciones web y sitios web estáticos. Tales plataformas incluyen Netlify, Vercel, AWS, Firebase y Layer0 (ahora Edgio). En este post vemos cómo se comparan en términos de aptitud para alojar complejos spas de comercio electrónico.
¿Cómo funcionan los spas?
Para entender completamente por qué los spas requieren un tratamiento de alojamiento especial, debe saber cómo se generan estos sitios y los desafíos inherentes en el proceso.
En los spas, el servidor solo devuelve una página HTML básica con un montón de JavaScript responsable de cambiar o manipular dinámicamente el código HTML (es decir, el DOM) en el navegador. Sin embargo, el servidor todavía está involucrado en el proceso por razones de seguridad. El código JavaScript del lado del cliente no puede conectarse directamente a una base de datos, ya que podría exponer datos confidenciales como credenciales de acceso; no puede ocultar su código JavaScript de frontend.
Todo el proceso de actualización de la interfaz de usuario ocurre en el navegador (a través de JavaScript del lado del cliente). Esto proporciona una experiencia de usuario similar a una aplicación móvil y resulta en una mejora de la velocidad. Las actualizaciones y los cambios ocurren casi instantáneamente y el usuario no tiene que esperar a que se cargue una nueva página. Por supuesto, tu aplicación seguirá necesitando algunos datos de vez en cuando, por lo que la aplicación puede mostrar una especie de animación de carga hasta que los datos se hayan obtenido detrás de escena (por ejemplo, a través de AJAX), o pre-rellenar elementos con esqueletos para que la página no se vea vacía.
La actualización dinámica de toda la página HTML del lado del cliente con JavaScript requiere muchas instrucciones de JavaScript, por lo general se utiliza un marco (React.js, Angular o Vue.js) o biblioteca para manejar eso. Para comparar el rendimiento de los sitios web Angular, React y Vue, lea esta publicación del blog.
La confusión de la aplicación de una sola página vs. Jamstack
Una aplicación de una sola página es una aplicación web que carga una sola página HTML estática y la hidrata dinámicamente con nuevo contenido cada vez que el usuario interactúa con ella. Debido a que los spas combinan páginas estáticas con JavaScript y API ligera, la configuración puede considerarse Jamstack (el nombre es una mezcla de JavaScript, API y Markup).
La superposición Jamstack vs. SPA es significativa y un poco confusa a primera vista, pero hay algunas diferencias. Por ejemplo, no todos los SPA sirven contenido directamente desde la caché. Para mejorar el SEO y el rendimiento, muchos spas modernos se basan en marcos isomórficos (también conocido como JavaScript universal), lo que les ayuda a mejorar la clasificación SERP a través de velocidades de sitio más rápidas mediante la utilización de renderizado tanto del lado del servidor como del lado del cliente.
Dado que Jamstack promueve la separación del código del lado cliente y del servidor, no se alinea con el diseño isomórfico (o JavaScript universal); Jamstack fomenta la inclinación por las API para agregar funcionalidad, pero no recomienda dar un control completo de la API sobre cómo se consumen e interpretan los datos. Con la API de carga frontal de Jamstack, se recomienda el consumo y la ingesta de contenido en el momento de la construcción. Si surge la necesidad, las funciones sin servidor también pueden hacer que las API estén disponibles en tiempo de ejecución.
Jamstack facilita la generación de sitios HTML prerenderizados, lo que ofrece algunas mejoras en comparación con los spas clásicos. Cada página se construye como una página estática durante la compilación y estas páginas son fácilmente cacheables, por lo que el resultado final es que la CDN entrega su sitio web, no sus servidores. Este enfoque es barato de alojar y rápido, ya que un SPA tiene que hacer primero solicitudes para mostrar contenido. Los marcos populares que facilitan Jamstack “estático” incluyen Nuxt.js, Next.js, Eleventy y Gatsby, aunque cada uno lo hace un poco diferente.
- Eleventy naves principalmente HTML pregenerado.
- Nuxt/Next/Gatsby y otros suelen enviar HTML estático, y una vez que se carga el JavaScript, transforman la página en un SPA.
También hay plataformas de alojamiento, como Layer0, que logran el mismo objetivo e incluso mejores velocidades. Con una CDN con conocimiento de la aplicación, Edgio puede almacenar en caché datos dinámicos en el borde 95% + del tiempo, eliminando así el servidor en el proceso de entrega, que está casi exclusivamente en la CDN, al igual que en el caso de un sitio estático de Jamstack. Este es un Jamstack dinámico.
Los principales desafíos de los spas
Los spas están ganando popularidad principalmente debido a la mejora de rendimiento que ofrecen. Pero el diseño de los sitios web DE SPA, es decir, el manejo de todas las actualizaciones de la interfaz de usuario y la representación del contenido en el navegador, también conduce a ciertas limitaciones.
Los spas no son excelentes para SEO
La mayor desventaja de los spas está relacionada con el SEO. Los motores de búsqueda no entienden el contenido más allá del contenedor HTML vacío. Algunos rastreadores (como el de Google) ahora supuestamente son capaces de interpretar JavaScript y esperar hasta que la página se renderiza. Sin embargo, desde 2014 todas las fuentes confiables en JavaScript SEO siguen diciéndole que no confíe en Googlebot para el rastreo de JS. El contenido de carga sincrónica se rastrea; el contenido cargado asincrónicamente no se rastrea.
Rendimiento
La carga inicial para SPA tarda más que los sitios estáticos porque el navegador necesita descargar una gran parte de JavaScript antes de que se muestre algo en la pantalla. El código debe ser analizado y ejecutado, impactando negativamente el rendimiento del sitio web. Sin embargo, este código también incluye activos para las páginas posteriores y, como resultado, las transiciones de navegación de los spas son ultrarrápidas.
Algunos frameworks JavaScript tienen una manera de lidiar con los problemas de rendimiento de los spas.
- Next.js utiliza el renderizado del lado del servidor para “convertir” la página en HTML en el servidor en cada solicitud. Esto lleva mucho tiempo hasta el primer byte, pero los datos siempre están actualizados.
- Next.js pre-procesa la página en HTML en el servidor antes de cada solicitud usando la generación estática del sitio. El HTML puede ser almacenado globalmente por una CDN y servido instantáneamente.
Idealmente, su opción de alojamiento debe tener características que remedien los desafíos anteriores.
las aplicaciones de una sola página, las aplicaciones web progresivas y las páginas móviles aceleradas pueden mejorar la experiencia del cliente. Sin embargo, la velocidad del sitio web sigue siendo un problema de pila completa que involucra el navegador, el borde y el servidor. Se necesita una solución de pila completa para acelerar cualquier sitio web, SPA y aplicaciones estáticas de varias páginas.
Una solución de alojamiento de alto rendimiento para su SPA DE comercio electrónico debe ofrecer:
Un generador de sitios estáticos que construye páginas HTML estáticas a partir del contenido de entrada, ya sea que se tome de un CMS o una plantilla incorporada.
Renderizado del lado del servidor: Para los spas, el renderizado del lado del servidor es un poco complicado, pero algunas iniciativas hacen que ese proceso sea un poco más fácil (más sobre eso a continuación).
Cómo alojar un típico sitio web DE eCommerce SPA
A continuación, echamos un vistazo más de cerca a las populares opciones de alojamiento para su SPA, y discutimos cómo abordan los desafíos típicos inherentes a los sitios web de SPA.
1. Los gigantes del hosting: Google Cloud Platform, Azure y AWS
Google Cloud Platform, Azure y AWS se han convertido en el pan y mantequilla de los servicios en la nube hoy en día y ofrecen una gama de características muy similares. Sus ofertas se han convertido en productos básicos, como algunos dicen acertadamente: Cada uno de los tres grandes proveedores incluye una CDN con POPS en todo el mundo, JavaScript sin servidor y algunas cosas buenas para los desarrolladores, como previsualizaciones de sucursales y retrocesos ilimitados. No hay mucha diferenciación. Por ejemplo, alojar un sitio en AWS requerirá Amazon S3 para el almacenamiento de sus activos estáticos, Amazon CloudFront para CDN y AWS Lambda con API Gateway para la API de funciones sin servidor.
Estos servicios son los cimientos sobre los cuales la nueva ola de proveedores intermedios construye sus servicios. Empresas como Vercel o Netlify esencialmente están revendiendo los servicios de AWS/GCP/Azure con un marcado al agregar características adicionales.
Lo que hace que Layer0 sea diferente del grupo es que la plataforma fue construida desde cero para proporcionar el alojamiento más fácil, confiable y de mejor rendimiento para sitios web basados en API a gran escala, como spas de comercio electrónico y sitios web de viajes.
2. Netlify
Netflify se ajusta a la definición de una configuración de Jamstack: ¡La compañía acuñó la frase! Netlify es una empresa de computación en la nube que ofrece soluciones de alojamiento estático Jamstack y servicios de backend sin servidor. El proceso de implementación es simple. Esto elimina el ajetreo de la gestión de la infraestructura, permitiendo que el equipo de desarrollo se concentre en la codificación.
Hay estándar HTTP/2, HTTPS, y su sitio web se sirve a través de CDN. Netlify tiene muchas características y un rico ecosistema de complementos (por ejemplo, funciones sin servidor, formularios instantáneos, identidad, análisis y muchos otros). También puedes crear tus propios complementos.
Netlify ofrece una sólida atención al cliente y está respaldada por una comunidad de usuarios a los que puede consultar en caso de problemas.
Características de cara al desarrollador
Netlify se esfuerza por simplificar la vida del desarrollador ofreciendo algunas soluciones que mejoran la productividad.
Netlify Dev ofrece un impulso de productividad al permitir a los desarrolladores probar localmente el generador de sitios, las integraciones de API, las funciones sin servidor y las reglas de borde en un único servidor de desarrollo.
Netlify Build permite a los desarrolladores utilizar el flujo de trabajo de Git para el desarrollo y permite la implementación continua: Implementar cambios después de cada confirmación utilizando una URL única.
Netlify Edge es una red de entrega para aplicaciones web. Los desarrolladores pueden conectarlo a su flujo de trabajo de desarrollo y hacer que maneje tareas complejas o ejecute alguna lógica personalizada. Propaga los artefactos del proyecto en lugares de todo el mundo, similar a una CDN normal, pero de una manera más inteligente y rápida.
Funciones sin servidor de Netlify
Con Netlify Serverless Functions, puede escribir JavaScript o Go API para realizar algunas tareas de backend y escalar automáticamente a medida que aumenta la demanda. Si bien configurar AWS Lambdas por su cuenta puede ser bastante complejo, las funciones sin servidor en Netlify son relativamente simples: Usan AWS Lambda entre bastidores, pero lo abstraen, por lo que no es necesario tocar el API Gateway, los permisos de rol IAM y la avanzada placa de boilerplate de AWS.
Netlify nivel libre
Netlify también ofrece un nivel gratuito prácticamente ilimitado que ofrece muchos de los beneficios mencionados anteriormente.
3. Vercel
Vercel (anteriormente NOW.sh, NOW o Zeit) tiene una oferta similar a Netlify, pero enfatiza fuertemente la implementación de configuración cero, que llaman un enfoque convencional y completamente compatible con versiones anteriores para la implementación. Funciona con múltiples marcos (por ejemplo, Gatsby, Vue, Ember, Svelte). Una vez que subas un proyecto package.json con un script de compilación, obtienes una representación completamente estática o híbrida fuera de la caja.
Vercel ofrece una experiencia similar a Netlify, donde puede conectar su repositorio de Git y aprovechar los beneficios de la implementación continua: Implementar cambios después de cada confirmación utilizando una URL única.
Vercel funciones sin servidor
Vercel ofrece funciones sin servidor, que utilizan AWS Lambda bajo el capó. Con más idiomas y regiones soportadas, la oferta de Vercel es un paso más allá de Netlify.
Vercel también ofrece una red de entrega robusta que puede almacenar en caché las respuestas de funciones sin servidor aparte de los activos estáticos.
A pesar de que se basa en AWS Lambda, Vercel decidió utilizar firmas de funciones personalizadas para el controlador en contraste con Netlify, que utiliza el formato de AWS.
4. Layer0 (Edgio)
Layer0 (Edgio) es una solución completa para habilitar Jamstack dinámico para sitios web de SPA, lo que hace que se carguen instantáneamente y sean más fáciles de desarrollar. Combina técnicas avanzadas de optimización para acelerar sitios web a gran escala impulsados por bases de datos, como spas de comercio electrónico, junto con potentes herramientas que brindan a los desarrolladores un día a la semana simplemente poniendo el código en el centro del flujo de trabajo. Edgio esencialmente trae Jamstack a grandes sitios web de comercio electrónico.
Edgio viene con un CDN-as-JavaScript con conocimiento de la aplicación, que puede aumentar o incluso reemplazar su CDN actual y llevar todas las características de seguridad web que necesita al borde. Layer0 también viene con un montón de tecnologías enfocadas en el desarrollo que hacen todo el proceso de desarrollo, despliegue, previsualización, experimentación, monitoreo, etc. y ejecutando su frontend sin cabeza simple, incluyendo URL de vista previa de pila completa automatizadas, un backend JavaScript sin servidor para frontend, monitoreo de caché avanzada y más.
Desarrolladores de Layer0 ❤
Edgio hace que el despliegue de SPA sea instantáneo y simple.
Al combinar las modernas interfaces de comercio electrónico de SPA y un CDN-as-JavaScript con un índice de acierto de caché del 95% para contenido dinámico en el borde y un backend-for-frontend de Node.js, Edgio ayuda a los sitios web complejos a optimizar la velocidad en toda la pila. Layer0 (ahora Edgio) es la única plataforma que garantiza tiempos medianos de Pintura de Contenido (LCP) por debajo del segundo más grande para sitios web de comercio electrónico a gran escala.
Al igual que Netlify y Vercel, Layer0 (ahora Edgio) permite a los desarrolladores utilizar el flujo de trabajo de Git para el desarrollo y permite la implementación continua: Implementar cambios después de cada confirmación utilizando una URL única.
Edgio es su plataforma todo en uno para desarrollar, implementar, previsualizar, experimentar, monitorear, y ejecuta tu frontend de comercio electrónico de SPA que te permite:
- Utilice Jamstack para comercio electrónico a través de renderizado pre y justo a tiempo
- Habilite redes de latencia cero mediante la obtención previa de datos de las API de su catálogo de productos
- Configurar Edge de forma nativa en tu app (CDN-AS-JavaScript)
- Ejecute reglas de borde localmente y en pre-prod
- Cree URL de vista previa desde GitHub, GitLab o BitBucket con cada nueva rama y push
- Ejecute divisiones en el borde para pruebas A/B de rendimiento, despliegues de canarias y personalización
- JavaScript sin servidor que es mucho más fácil y confiable que AWS Lambda
Lo que hace que Layer0 sea diferente de Netlify y Vercel
Netlify y Vercel se centran en sitios web estáticos. Funcionan bien para sitios más pequeños que pueden ser estáticos, mientras que Edgio está diseñado específicamente para sitios más grandes, dinámicos, con frecuencia cambiantes y más complejos. Esta distinción es importante, especialmente si está buscando una manera eficiente de alojar su sitio web de eCommerce SPA.
Además, Netlify y Vercel tienen limitaciones en cuanto a cuántas páginas pueden admitir, y sus clientes suelen tener menos páginas en promedio. Edgio, por otro lado, soporta sitios con millones de páginas.
Para sitios web complejos y dinámicos compuestos por miles de páginas, la creación de páginas “estáticas” durante cada compilación aumenta el tiempo de compilación exponencialmente y requiere compilaciones cada vez que hay el menor cambio de datos. La pre-renderización no lo reducirá para sitios web dinámicos de comercio electrónico con 1000s de SKU, pruebas A/B, precios dinámicos, búsquedas de inventario en tiempo real y promociones. JavaScript sin servidor puede manejar contenido renderizado en línea, sobre la marcha, del lado del servidor almacenado consistentemente en caché en el borde de CDN-AS-JavaScript.
Aquí es exactamente donde Edgio muestra su principal ventaja sobre las ofertas de infraestructura competitivas y pone en marcha los principios de Jamstack dinámico. El service worker de CDN-AS-JavaScript recupera de forma inteligente tus páginas dinámicas antes de que tu visitante toque un enlace. Nuestras herramientas de red y monitoreo garantizan que los datos dinámicos se almacenen en caché al menos el 95% del tiempo, protegiendo su base de datos de las solicitudes adicionales creadas por la preobtención.
El proceso de desarrollo e implementación de Edgio pone a los desarrolladores en el centro del proceso, dándoles todos los controles y simplificando el proceso de mantenimiento.
Herramientas de red y monitorización Layer0
Resumen
Dado que el ranking de Google pronto se centrará más en la experiencia del usuario y la velocidad de la página, ejecutar un sitio rápido aumentará significativamente el ranking SEO y las conversiones. Acelerar los sitios web dinámicos de comercio electrónico es un desafío, pero también una oportunidad que, si se aprovecha adecuadamente, puede ganar una ventaja competitiva y aumentar sus ingresos.
En Layer0 (Edgio), conocemos los puntos débiles de los operadores de comercio electrónico que ejecutan spas dinámicos y sabemos cómo acelerar estos sitios web. No solo ayudamos a las aplicaciones complejas y dinámicas de comercio electrónico a lograr velocidades de menos de segundos, sino que Edgio también se construyó con un desarrollo rápido y ayudó a los equipos a aumentar su velocidad. El crecimiento en la línea de fondo y la reducción de los costos de DevOps vienen como victorias secundarias.
No ganamos a menos que nuestros clientes lo hagan. Hemos acelerado con éxito los spas dinámicos de comercio electrónico ayudándoles a asegurar su posición en el panorama altamente competitivo del comercio electrónico: Consulte nuestra cartera para ver ejemplos que se ejecutan en Edgio.