TDC Connections Recife 2023. Edge Middleware é uma ferramenta bastante poderosa, que recentemente se tornou bem mais fácil para nós frontenders usarmos devido à integração lançada pelo popular framework Next.js. Nesta talk vamos entrar nos detalhes do seu funcionamento e use cases, além de mostrar como a VTEX está se alavancando desta feature para servir ecommerces cada vez mais performáticos.

1. Edge middleware
acelerando o
ecommerce

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

4. Estratégias de
renderização
01

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

20. Use case do
ecommerce
02

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

23. Edge
middleware
03

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

26. EDGE MIDDLEWARE
Personalização
Recife SP

27. EDGE MIDDLEWARE
Personalização

28. EDGE MIDDLEWARE
Personalização
● Feature flags
● Testes A/B
● I18n
● O céu é o limite

29. EDGE MIDDLEWARE
Como?

30. EDGE MIDDLEWARE
Como?

31. EDGE MIDDLEWARE
Desvantagens
● Rodar na Edge é mais caro
● Limitações de código
● Limitações de tempo

32. Thanks! maira.bello@vtex.com.br