Rotas do servidor e modos de renderização
Configure prerenderização, SSR e CSR por rota.
Rotas do servidor e modos de renderização é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Um único modo não serve para tudo
Nem toda rota deve ser renderizada da mesma forma. O SSR do Angular permite atribuir um modo de renderização por rota: renderização no servidor, no cliente ou pré-renderização no momento da compilação.
Os três modos
RenderMode.Server renderiza a cada solicitação, RenderMode.Client renderiza somente no navegador (CSR) e RenderMode.Prerender gera HTML estático no momento da compilação (SSG).
Configuração das rotas do servidor
Defina um ServerRoute[] que associe caminhos a modos de renderização e, em seguida, forneça-o com provideServerRouting na configuração do servidor.
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '', renderMode: RenderMode.Prerender },
{ path: 'dashboard', renderMode: RenderMode.Client },
{ path: '**', renderMode: RenderMode.Server }
];Conectando tudo
Registre as rotas na configuração da aplicação do servidor para que o mecanismo de SSR saiba como tratar cada caminho.
// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';
providers: [
provideServerRendering(),
provideServerRouting(serverRoutes)
]Quando fazer a pré-renderização
Escolha Prerender para páginas públicas e estáveis: início, sobre e documentação. Elas são compiladas uma vez em HTML e disponibilizadas instantaneamente a partir de uma CDN, sem custo de servidor por solicitação.
Quando usar o servidor
Escolha Server para páginas cujo conteúdo muda a cada solicitação ou conforme o usuário, mas que ainda precisam de SEO ou de uma primeira exibição rápida, como uma página de produto com estoque atualizado.
Quando usar o cliente
Escolha Client para páginas privadas e altamente interativas, nas quais SEO e primeira exibição têm pouca importância, como um painel autenticado. O servidor envia um esqueleto e o navegador faz a renderização.
Pré-renderizando parâmetros dinâmicos
Para rotas parametrizadas, você precisa informar ao pré-renderizador quais parâmetros gerar, retornando uma lista com getPrerenderParams.
{
path: 'product/:id',
renderMode: RenderMode.Prerender,
async getPrerenderParams() {
const ids = await fetchProductIds();
return ids.map(id => ({ id }));
}
}Alternativa para a pré-renderização
Parâmetros que não foram pré-renderizados podem usar a renderização no servidor ou no cliente durante a execução. Assim, você pré-renderiza os itens populares e renderiza os demais sob demanda.
Cabeçalhos e status por rota
As rotas do servidor podem definir cabeçalhos de resposta e códigos de status, o que é útil para políticas de cache ou para retornar 404 a partir de um manipulador de rotas não encontrada.
{
path: 'old-page',
renderMode: RenderMode.Server,
headers: { 'Cache-Control': 'no-store' }
}Combinando modos estrategicamente
Um app real combina modos: pré-renderiza páginas de marketing, renderiza no servidor páginas dinâmicas essenciais para SEO e renderiza no cliente o app protegido por login. Isso otimiza custos e desempenho ao mesmo tempo.
Verificação rápida
Verifique seus conhecimentos sobre os modos de renderização.
Recapitulação
Você configurou a renderização por rota com ServerRoute[] e provideServerRouting: Prerender para páginas públicas estáveis, Server para páginas dinâmicas com SEO e Client para páginas privadas e interativas, incluindo parâmetros de pré-renderização para rotas dinâmicas.
Perguntas Frequentes
A aula “Rotas do servidor e modos de renderização” é grátis?
Sim — o texto completo de “Rotas do servidor e modos de renderização” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Rotas do servidor e modos de renderização”?
Configure prerenderização, SSR e CSR por rota. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Rotas do servidor e modos de renderização”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Por que usar renderização no servidor
- Configurando o Angular SSR
- Rotas do servidor e modos de renderização
- Transferindo o estado para o cliente