0Pricing
Angular Academy · Aula

Configurando o Angular SSR

Adicione SSR com o CLI do Angular.

Configurando o Angular SSR é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 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.

Adicionando SSR

A maneira mais rápida de habilitar o SSR é usar o esquema ng add @angular/ssr. Ele configura a compilação do servidor, um servidor baseado em Express e a hidratação para você.

// terminal
// ng add @angular/ssr

Novos projetos

Ao criar um novo app, você pode ativá-lo diretamente com a opção SSR, para que o projeto já comece preparado para SSR.

// ng new my-app --ssr

O que o esquema adiciona

Ele adiciona um server.ts (servidor Express), um ponto de inicialização main.server.ts, um app.config.server.ts, atualiza angular.json com opções do servidor e habilita a hidratação na configuração do app.

provideServerRendering

A configuração da aplicação do servidor fornece o mecanismo de SSR por meio de provideServerRendering(), mesclado à configuração do navegador.

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

Hidratação no cliente

A configuração do navegador habilita a hidratação, para que o cliente reutilize o HTML do servidor em vez de renderizá-lo novamente. Isso é adicionado automaticamente pelo esquema.

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

O servidor Express

server.ts cria um app Express que disponibiliza recursos estáticos e delega a renderização do HTML ao mecanismo de SSR do Angular para todas as outras rotas.

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

Servidor de desenvolvimento

Durante o desenvolvimento, ng serve executa o SSR automaticamente com o construtor de aplicações, para que você veja a saída renderizada pelo servidor e a hidratação sem etapas adicionais.

// ng serve

Compilação para produção

Uma compilação de produção gera um pacote browser e um pacote server. Você executa a entrada do servidor Node para disponibilizar o SSR em produção.

// ng build
// node dist/my-app/server/server.mjs

APIs exclusivas do navegador

O código também é executado no servidor, onde window, document e localStorage não existem. Proteja esses acessos; caso contrário, o SSR falhará.

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

URLs absolutas para HTTP

No servidor, as URLs relativas de APIs não têm uma origem. Use URLs absolutas ou configure uma base para que as chamadas do HttpClient no servidor sejam resolvidas corretamente.

Verificando se o SSR funciona

Para confirmar o SSR, solicite uma página e inspecione a resposta bruta (por exemplo, com curl). Você deverá ver conteúdo renderizado no HTML, não apenas uma raiz de app vazia.

// curl http://localhost:4000/ | grep "<h1>"

Verificação rápida

Verifique seus conhecimentos sobre a configuração do SSR.

Recapitulação

Você configurou o SSR com ng add @angular/ssr: ele adiciona um servidor Express, provideServerRendering() e a hidratação no cliente. Lembre-se de proteger APIs exclusivas do navegador, usar URLs absolutas no servidor e verificar o HTML renderizado na resposta bruta.

Perguntas Frequentes

A aula “Configurando o Angular SSR” é grátis?

Sim — o texto completo de “Configurando o Angular SSR” é 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 “Configurando o Angular SSR”?

Adicione SSR com o CLI do Angular. 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 2 de 4.

Quanto tempo leva a aula “Configurando o Angular SSR”?

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

  1. Por que usar renderização no servidor
  2. Configurando o Angular SSR
  3. Rotas do servidor e modos de renderização
  4. Transferindo o estado para o cliente
← Voltar para Angular Academy