Correção de performance (SSG e ISR)
ontem à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: ontem à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: | 4 |
| Interessados: | 6 |
| 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
Plataforma de checkout SaaS - Preciso de uma plataforma de checkout completa (modelo SaaS), onde os clientes possam criar seus checkouts personalizados para expor seus produtos digitais e físicos e receber pagamentos pel...
Oasis community website for France - Oferta de trabalho — Desenvolvedor front-end Estabilização do MVP — plataforma adulta — oportunidade de longo prazo --- Contexto Estamos à procura de um D...
Desenvolvimento de site - Oi! Tudo bem? Estou avaliando desenvolvedores freelancers para um projeto da Des.pressa, minha marca — um espaço híbrido que une cultura, vida urbana e autoconhecimento. Hoje at...
Criar site institucional com e-commerce em WordPress - Estamos buscando um profissional web designer com experiência em criação de sites institucionais em WordPress para projetar o site de uma empresa de consultoria. Não que...
Desenvolvedor Full Stack - Plataforma SaaS ESG com Dashboards e Módulos - Buscamos desenvolvedor Full Stack para construir a arquitetura e módulos principais de uma plataforma SaaS de gestão ESG para empresas. SOBRE O PROJETO: Plataforma web moderna e esca...
