Correção de performance (SSG e ISR)
18/12/2025 às 21:50Descrição do Projeto:
Mesmo após aplicar SSG e ISR, alguns componentes above the fold (FullBanner, Header, Barra de Pesquisa e Ícones) ainda piscam/atualizam após o F5, indicando renderização incorreta no client.
Busco um dev experiente em Next.js App Router, com domínio real de Server Components, SSG, ISR e hidratação.
Objetivo
Deixar as páginas públicas 100% estáticas no HTML inicial, com carregamento instantâneo, sem flicker, sem segunda renderização e com layout estável.
Stack
Next.js (App Router)
React
Tailwind CSS
Backend já otimizado
MongoDB com índices
Cache já configurado
Problema atual
FullBanner renderiza após o primeiro paint
Header / Barra de pesquisa / Ícones aparecem com delay
Página dá a sensação de "duas atualizações" ao dar F5
Conteúdo principal (produtos, preços) já vem correto no HTML
Escopo do trabalho
1) FullBanner
- Garantir renderização correta via Server Component
Se for Client Component:
- HTML inicial idêntico ao server
- Altura fixa
- Sem useEffect/useState para render visual
- Sem dependência de Provider
2) Header / Barra de Pesquisa / Ícones
- Estrutura visual renderizada no servidor
- Interatividade pode hidratar depois
- Nenhuma mudança de layout após o carregamento do JS
3) Providers
- Providers não podem fazer fetch para páginas públicas
- Apenas receber dados iniciais
4) Regra obrigatória
- Nenhum elemento above the fold pode mudar após o F5.
Critérios de aceite (Obrigatórios)
- F5 — página renderiza uma única vez
- Sem flicker visual
- Com JavaScript desativado:
- Banner, Header e Search continuam visíveis
- Nenhum fetch de banner/produtos no client
- CLS ? 0.01
- Lighthouse Mobile ? 85
Pagamento condicionado a esses critérios.
Prazo estimado
6 a 12 horas de trabalho real
Importante
Este projeto não envolve backend, não envolve SEO e não envolve redesign. É exclusivamente correção de arquitetura de renderização e hidratação no Next.js App Router.
Diferencial
Se você:
- Entende a diferença real entre CSR, SSR, SSG e ISR
- Sabe separar Server vs Client Components
- Já resolveu problemas de hidratação / flicker
Este projeto é ideal para você.
Aguardo propostas com breve explicação de como você resolveria o problema.
Habilidades desejadas:
Atividades do cliente nesse projeto:
Última visualização: 18/12/2025 às 22:28
Tem dúvidas? Faça uma pergunta.
ou
Informações adicionais
| Categoria: | Web, Mobile & Software |
|---|---|
| Subcategoria: | Desenvolvimento Web |
| Orçamento: | Aberto |
| Nível de experiência: | Especialista |
| Visibilidade: | Público |
| Propostas: | 14 |
| Interessados: | 17 |
| Tempo restante: | |
| Valor Mínimo: | R$ 50,00 |
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
-
Submetido: | Oferta: Privado | Duração estimada: Privado
Integrar Evolution ao Lovable para rastreamento de conversas - Procuro uma pessoa para integrar a Evolution ao Lovable de forma estável. A integração deve permitir resgatar conversas antigas e rastrear/associar conversas originadas por cam...
E-commerce no segmento de utilidades - Tenho um e-commerce no segmento de utilidades e preciso de profissionais que saibam mexer em WordPress e Yampi para integrar a comunicação entre ambos no meu site.
Criar landing page simples para prestador de serviço - Criar landing page simples para prestador de serviço Página deve ser simples, enxuta e com pouco conteúdo. Somente para contato e apresentação.
Site de chamadas simuladas com painel de vídeos - Preciso desenvolver um site que simula chamadas. Ao clicar no link da chamada, a pessoa verá um botão "Atender" ou "Recusar". Ao atender, a câmera do usu&aac...
Automação WhatsApp: leitura de comprovantes Pix para Google Sheets - Descrição do projeto Olá! Estou buscando um(a) freelancer para desenvolver uma automação completa que será usada no dia a dia da minha loja. Objetivo Au...
