Edge middleware acelerando o ecommerce.pdf
0 gostou19 visualizações
O documento discute várias estratégias de renderização, incluindo server-side rendering (SSR), client-side rendering (CSR), hybrid rendering e static site generation (SSG), com foco em sua aplicação no e-commerce. Cada estratégia é analisada em termos de desempenho, SEO e suas vantagens e desvantagens, especialmente em relação à velocidade de navegação e à complexidade. A apresentação também aborda o uso de middleware de edge para melhorar a personalização e a eficiência das lojas online.
Edge middleware acelerando o ecommerce.pdf
- 2. 13 anos em Web Development Staff Software Engineer @ Webinar Maíra Bello INTRO
- 3. VTEX 3.400+ Lojas ativas 38 Países com lojas ativas Public-listed company
- 5. ESTRATËGIAS DE RENDERIZAÇÃO Server-side rendering (SSR) 1. Buscar HTML da página Web Server 3. Response: página completa APIs 2. Buscar dados
- 6. ESTRATÉGIAS DE RENDERIZAÇÃO Server-side rendering (SSR) Web Server MAIN REGION (Virgínia - USA) Browser em Recife - BR 1. Buscar HTML da página 2. Response: página completa APIs 3. Buscar dados PHP SSR (2013)
- 7. Simplicidade Tudo backend Primeiro load lento Precisa renderizar e buscar dados toda vez Network time alto Pros Cons ESTRATÉGIAS DE RENDERIZAÇÃO Server-side rendering (SSR) Navegação lenta Precisa ir no servidor a cada mudança de rota SEO
- 8. MAIN REGION (Virgínia - USA) ESTRATËGIAS DE RENDERIZAÇÃO Server-side rendering (SSR) com CDN Web Server EDGE (São Paulo - BR) CDN 2. CACHE MISS: Gerar HTML da página Browser em Recife - BR 1. Buscar HTML da página 3. Response: página completa APIs 2.1. Buscar dados
- 9. Simplicidade Tudo backend Primeiro load lento para páginas dinâmicas Precisa renderizar e buscar dados toda vez Network time alto Pros Cons ESTRATÉGIAS DE RENDERIZAÇÃO Server-side rendering (SSR) com CDN Navegação lenta Precisa ir no servidor a cada mudança de rota SEO Rápido para páginas estáticas
- 10. ESTRATËGIAS DE RENDERIZAÇÃO Client-side rendering (CSR) 4. Renderizar a página 1. Buscar HTML da página 2. Response: página vazia EDGE (São Paulo - BR) CDN MAIN REGION (Virgínia - USA) APIs 3. Buscar dados Browser em Recife - BR Arquivos estáticos 2. CACHE MISS: Buscar arquivo correto TTL: 1 ano
- 11. Pros Cons ESTRATÉGIAS DE RENDERIZAÇÃO Client-side rendering (CSR) Primeiro load lento Precisa renderizar e buscar dados toda vez SEO Navegação rápida SPA Aplicação mais reativa Frontend poderoso
- 12. Pros Cons ESTRATÉGIAS DE RENDERIZAÇÃO Client-side rendering (CSR) Primeiro load lento Precisa renderizar e buscar dados toda vez SEO Navegação rápida SPA Aplicação mais reativa Frontend poderoso
- 13. Pros Cons ESTRATÉGIAS DE RENDERIZAÇÃO Client-side rendering (CSR) Primeiro load lento Precisa renderizar e buscar dados toda vez SEO Navegação rápida SPA Aplicação mais reativa Frontend poderoso
- 14. MAIN REGION (Virgínia - USA) ESTRATËGIAS DE RENDERIZAÇÃO Hybrid rendering Web Server EDGE (São Paulo - BR) CDN Browser em Recife - BR 1. Buscar HTML da página 3. Response: página parcial ou completa APIs 2.1. Buscar dados 2. CACHE MISS: Gerar HTML da página 4. Buscar dados 5. Hidratar a página
- 15. Navegação rápida SPA Pros Cons ESTRATÉGIAS DE RENDERIZAÇÃO Hybrid rendering SEO Aplicação mais reativa Frontend poderoso Falsa performance Loading & Skeletons Complexo Melhor agora com backends Node.js e frameworks como Next.js Primeiro load rápido para cache hit Até páginas dinâmicas mostram algo na tela mais rápido, e depois apenas renderizam o que falta.
- 16. Navegação rápida SPA Pros Cons ESTRATÉGIAS DE RENDERIZAÇÃO Hybrid rendering SEO Aplicação mais reativa Frontend poderoso Falsa performance Loading & Skeletons Complexo Melhor agora com backends Node.js e frameworks como Next.js Primeiro load rápido para cache hit Até páginas dinâmicas mostram algo na tela mais rápido, e depois apenas renderizam o que falta.
- 17. Navegação rápida SPA Pros Cons ESTRATÉGIAS DE RENDERIZAÇÃO Hybrid rendering SEO Aplicação mais reativa Frontend poderoso Falsa performance Loading & Skeletons Complexo Melhor agora com backends Node.js e frameworks como Next.js Primeiro load rápido para cache hit Até páginas dinâmicas mostram algo na tela mais rápido, e depois apenas renderizam o que falta.
- 18. ESTRATËGIAS DE RENDERIZAÇÃO Static site generation (SSG) EDGE (São Paulo - BR) CDN Browser em Recife - BR 3. Buscar HTML da página 5. Response: página completa TTL: 1 ano 4. CACHE MISS: Buscar arquivo correto Arquivos estáticos MAIN REGION (Virgínia - USA) Build service 1. Buscar dados APIs 2. Gerar páginas estáticas
- 19. Navegação rápida Páginas prontas em EDGE + SPA Pros Cons ESTRATÉGIAS DE RENDERIZAÇÃO Static site generation (SSG) Não serve para páginas muito dinâmicas Misturado com outras estratégias de rendering SEO Aplicação mais reativa Frontend poderoso Falsa performance Loading & Skeletons Rápido para páginas pouco dinâmicas
- 21. DEMO Quase 100% estática USE CASE DO ECOMMERCE Product Detail Page (PDP) Server-side rendering com CDN (2min TTL) Hybrid rendering com CDN (2-5min TTL) Static site generation
- 22. DEMO Quase 100% estática USE CASE DO ECOMMERCE Product Detail Page (PDP) Server-side rendering com CDN (2min TTL) Hybrid rendering com CDN (2-5min TTL) Static site generation
- 24. MAIN REGION (Virgínia - USA) EDGE MIDDLEWARE Edge middleware Web Server EDGE (São Paulo - BR) CDN 3. CACHE MISS: Gerar HTML da página Browser em Recife - BR 1. Buscar HTM L da página 4. Response: página com pleta APIs 3.1. Buscar dados Middleware 2. Buscar HTML para request reescrito
- 25. EDGE MIDDLEWARE Zoom no middleware mercado.carrefour.com.br /fralda-pampers-g/p Middleware CDN mercado.carrefour.com.br /fralda-pampers-g/p/recife
- 28. EDGE MIDDLEWARE Personalização ● Feature flags ● Testes A/B ● I18n ● O céu é o limite
- 31. EDGE MIDDLEWARE Desvantagens ● Rodar na Edge é mais caro ● Limitações de código ● Limitações de tempo