Otimização de loja Next.js, NestJS e MongoDB
hoje às 18:19Descrição do Projeto:
OBS: O pagamento final só será liberado após 100% dos itens abaixo validados.
1) Renderização e UX (OBRIGATÓRIO)
- Home
- Home carrega sem tela preta ao dar F5.
- Conteúdo principal aparece imediatamente, sem esperar JS.
- HTML da Home está presente no View Source (não depende de JS).
- Home usa SSG + ISR (revalidate configurado).
- Home não depende do backend em tempo real para renderizar (funciona mesmo com latência entre VPS).
- Página de Produto
- Produto carrega sem flashes de loading.
- Nome, preço e descrição aparecem antes do JS.
- HTML completo no View Source.
- Produto usa SSG + ISR.
- Produto continua abrindo mesmo se o backend ficar offline temporariamente.
2) Loading e skeletons
- Não existe loading global pesado (loading.tsx causando tela preta).
- Skeletons são:
- leves
- locais
- sem fundo preto
- sem textos crus piscando
- Skeletons aparecem apenas onde há atraso real (ex.: carrossel, reviews).
- Skeletons não bloqueiam a página inteira.
3) Arquitetura Next.js (App Router)
- Páginas críticas são Server Components por padrão.
- "use client" usado somente onde há interação.
- Não há fetch principal via useEffect em Home ou Produto.
- Fetch usa:
next: { revalidate: X }
ou
cache: 'force-cache'
- Frontend não espera resposta da API para começar a renderizar.
4) JavaScript e performance
- Componentes pesados usam dynamic() com ssr: false.
- JS total carregado foi reduzido (comparado ao antes).
- Scripts externos (GTM, Pixel, Ads):
- async ou defer
- não bloqueiam a renderização inicial
5) CSS, layout e CLS
- CSS global apenas em app/layout.tsx.
- Nenhum layout “pula” ao carregar (CLS ? 0).
- Altura de banners e imagens reservada.
- Textos não se sobrepõem durante o carregamento.
6) Imagens
- Todas as imagens usam <Image /> do Next.js.
- priority apenas no banner principal (hero).
- Demais imagens com lazy loading.
- Nenhuma imagem bloqueia o primeiro paint.
7) Backend (NestJS + MongoDB)
- Indexes criados para:
- slug
- category
- platform
- filtros principais
- Queries pesadas revisadas e otimizadas.
- Populate pesado evitado ou substituído.
- Cache implementado (Redis ou similar) para:
- Home
- Categorias
- Produtos populares
- TTL configurado corretamente (30–60s).
8) Integração Front + Back (VPS separadas)
- Home e Produto não fazem múltiplas chamadas desnecessárias à API.
- Refresh da página não dispara sempre queries pesadas.
- Cache realmente funciona (comprovável via logs ou testes).
- Latência entre VPS não impacta a renderização inicial.
- Backend é usado em tempo real apenas para:
- estoque
- carrinho
- checkout
- área logada
9) Testes obrigatórios (VALIDAÇÃO FINAL)
- Testes manuais
- F5 várias vezes — sem tela preta
- Teste em mobile — layout estável
- Site carrega mesmo com JS desativado (conteúdo principal visível)
- Teste crítico – backend offline
- Backend desligado por 1 minuto:
- Home continua abrindo
- Produto continua abrindo
- Se falhar — entrega reprovada.
- Performance
- Lighthouse Mobile ? 80
- Lighthouse Desktop ? 90
- CLS próximo de 0
- LCP visivelmente rápido (< 2.5s em conexão normal)
Regra de pagamento (IMPORTANTE)
- Pagamento NÃO será liberado se:
- Lighthouse subir mas a UX real continuar lenta
- HTML não aparecer no primeiro paint
- Solução for apenas “remover loading”
- Performance quebrar novamente após F5
- Correções forem apenas visuais
Pagamento liberado somente após validação completa deste checklist.
Habilidades desejadas:
CSS Monitoramento de Performance de Aplicativos NodeJS React SEO
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: | 9 |
| Interessados: | 13 |
| 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
Tema Shopify exclusivo com sistema de licenciamento - Olá! Sou Lucas, responsável pela ConstruLoja, uma agência especializada na criação de lojas profissionais para Shopify. Estou buscando um desenvolvedor experient...
SaaS assistente de marketing digital - Desenvolvimento de um SaaS assistente de marketing digital com as seguintes funcionalidades: • Login seguro • Conexão com a API do Meta Ads para coleta de dados • Banco de da...
Automação n8n, Hasdata e Supabase - Projeto de automação de prospecção envolvendo n8n, Hasdata e Supabase. Integra informações do LinkedIn (via Hasdata) e e-mails, automatizando a coleta, o a...
Transformar PDFs em planilhas - Tenho 8 PDFs com padrões de informações diferentes para transformar em formato XLS. Gostaria de uma tela para que os usuários possam importar os PDFs e gerar as informa...
Criação de landing page institucional - Tipo de serviço Criação de landing page institucional (one page) para empresa de construção civil / engenharia. Sobre a empresa Empresa de construç&atil...
