Domine o Angular SSR e dê vida ao seu site!

Sumário

1. Introdução
2. O que é renderização do lado do servidor
3. Quando usar a renderização do lado do servidor
4. Comparação entre Angular e React na renderização do lado do servidor
5. Como implementar a renderização do lado do servidor no Angular
6. Instalação do pacote NG Universal/Express engine
7. Alterações no package.json e nos arquivos principais
8. Configurando o servidor Express
9. Trabalhando com o Angular Universal
10. Tratando problemas de compatibilidade com o servidor e o cliente
11. Reduzindo o estado do servidor para o cliente
12. Conclusão

🌐 Introdução

A renderização do lado do servidor (SSR, sigla em inglês) é uma técnica utilizada no desenvolvimento web para melhorar a performance e a indexação dos motores de busca em aplicações Angular. Ao contrário da renderização client-side padrão, em que o código JavaScript é executado no navegador do usuário, a SSR permite que a renderização inicial ocorra no servidor antes de ser enviada para o cliente. Neste artigo, vamos explorar como implementar a renderização do lado do servidor em aplicações Angular e discutir suas vantagens e desvantagens.

🖥 O que é renderização do lado do servidor

A renderização do lado do servidor é um processo em que a página da web é renderizada no servidor antes de ser enviada ao navegador do usuário. Isso significa que o servidor gera o HTML completo da página, incluindo seu conteúdo, antes de enviá-lo para o cliente.

⚖️ Quando usar a renderização do lado do servidor

A renderização do lado do servidor é especialmente útil em casos em que a indexação dos motores de busca é importante, como em aplicações com conteúdo dinâmico. Além disso, a SSR melhora a velocidade de carregamento da página, pois o usuário pode visualizar o conteúdo mais rapidamente, mesmo antes de todo o JavaScript ser carregado e executado.

⚙️ Comparação entre Angular e React na renderização do lado do servidor

Embora a renderização do lado do servidor seja mais comumente associada ao React, também é possível implementá-la com o Angular. No entanto, essa prática é menos comum e há diferenças na forma como cada framework lida com a SSR.

Por exemplo, no React, a renderização do lado do servidor pode ser realizada utilizando o framework Next.js, que simplifica o processo e fornece funcionalidades adicionais. Já no Angular, a SSR é implementada através do Universal, que é uma biblioteca oficial do Angular para essa finalidade.

🔧 Como implementar a renderização do lado do servidor no Angular

Para implementar a renderização do lado do servidor no Angular, é necessário instalar o pacote NG Universal/Express engine, que é a biblioteca oficial do Angular para lidar com a SSR. O NG Universal/Express engine é responsável por gerar o HTML da página no servidor.

Para instalar a biblioteca, execute o seguinte comando:

NG add @nguniversal/express-engine

Esse comando irá adicionar o pacote ao arquivo package.json e gerar os arquivos necessários para o funcionamento do servidor de renderização. Certifique-se de que a versão correta do Angular esteja sendo instalada para evitar possíveis erros.

Após a instalação, serão feitas algumas alterações nos arquivos principais da aplicação. Será adicionado o arquivo main.server.ts, que é semelhante ao arquivo main.ts padrão, mas é utilizado especificamente para a renderização do lado do servidor.

Além disso, será adicionado o arquivo app.server.module.ts, que importa o módulo da aplicação, mas com algumas alterações necessárias para a renderização do lado do servidor.

Outro arquivo importante gerado é o server.ts, que contém o servidor Express responsável pela renderização do lado do servidor. Nesse arquivo, é realizada a análise dos módulos da aplicação e a geração do HTML a partir deles.

Após as alterações nos arquivos principais, será possível iniciar a aplicação no modo de renderização do lado do servidor. Para isso, utilize o comando yarn dev:ssr.

📦 Instalação do pacote NG Universal/Express engine

NG add @nguniversal/express-engine

O pacote NG Universal/Express engine é a biblioteca oficial do Angular para implementar a renderização do lado do servidor.

🔧 Alterações no package.json e nos arquivos principais

Após a instalação do pacote NG Universal/Express engine, será feito algumas alterações no arquivo package.json e nos arquivos principais da aplicação Angular.

1. No arquivo package.json, será adicionada uma nova dependência:

{
  "dependencies": {
    "@nguniversal/express-engine": "^12.0.0"
  }
}

2. Será adicionado o arquivo main.server.ts, que será semelhante ao arquivo main.ts, mas será usado especificamente para a renderização do lado do servidor.

3. Será adicionado o arquivo app.server.module.ts, que importará o módulo da aplicação, mas com algumas alterações necessárias para a renderização do lado do servidor.

4. Será gerado o arquivo server.ts, que conterá o servidor Express responsável pela renderização do lado do servidor.

⚙️ Configurando o servidor Express

Após as alterações nos arquivos principais, será necessário configurar o servidor Express para a renderização do lado do servidor. O servidor Express é responsável por receber as requisições HTTP e realizar a renderização do lado do servidor antes de enviar a página HTML para o cliente.

No arquivo server.ts, é necessário fazer as seguintes configurações:

1. Importar os módulos necessários:

import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
import { AppServerModule } from './src/main.server';

2. Criar uma instância do servidor Express:

const app = express();

3. Definir o local dos arquivos estáticos e os cabeçalhos de resposta:

const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
app.get(`*.*`, express.static(distFolder, {
  maxAge: '1y'
}));

4. Definir o app-engine do Angular Universal como mecanismo de renderização do Express:

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule
}));

app.set('view engine', 'html');
app.set('views', distFolder);

5. Definir o roteamento padrão:

app.get('*', (req, res) => {
  res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

Após essas configurações, o servidor Express estará pronto para lidar com a renderização do lado do servidor.

💻 Trabalhando com o Angular Universal

Com a renderização do lado do servidor configurada, é possível trabalhar com o Angular Universal para aproveitar os benefícios da SSR.

Ao iniciar a aplicação no modo de renderização do lado do servidor, todos os componentes serão inicializados no servidor antes de serem enviados para o cliente. Isso significa que o usuário poderá visualizar o conteúdo da página mais rapidamente e os motores de busca conseguirão indexar o conteúdo corretamente.

Além disso, é possível fazer uso de serviços para buscar dados do servidor antes de renderizar a página. Dessa forma, é possível reduzir as chamadas de API no cliente e melhorar ainda mais a performance da aplicação.

🧩 Tratando problemas de compatibilidade com o servidor e o cliente

Ao utilizar a renderização do lado do servidor no Angular, é importante considerar as diferenças entre o ambiente do servidor e do cliente.

Por exemplo, certas funcionalidades que funcionam apenas no navegador, como o acesso ao localStorage, não estarão disponíveis no servidor. Portanto, é necessário fazer verificações e tratar esses casos de forma adequada.

Para lidar com problemas de compatibilidade, é possível utilizar o objeto platformId fornecido pelo Angular. Esse objeto indica se a aplicação está sendo renderizada no servidor ou no cliente. Com base nessa informação, é possível executar código específico para cada ambiente.

Por exemplo, para lidar com o acesso ao localStorage apenas no cliente, pode-se fazer o seguinte:

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

constructor(
  @Inject(PLATFORM_ID) private platformId: Object
) {
  if (isPlatformBrowser(this.platformId)) {
    // Código que faz uso do `localStorage`
  }
}

Dessa forma, o código que faz uso do localStorage será executado apenas no cliente.

🔍 Reduzindo o estado do servidor para o cliente

Outro aspecto importante da renderização do lado do servidor é a capacidade de reduzir o estado do servidor para o cliente. Isso significa que é possível transmitir dados do servidor para o cliente para evitar chamadas de API redundantes.

Para fazer isso, o Angular fornece o serviço TransferState, que permite armazenar e recuperar dados do servidor. Esse serviço é utilizado em conjunto com a função TransferState.makeStateKey para definir as chaves dos dados que serão transferidos.

Por exemplo, para transferir o estado do servidor para a lista de usuários, pode-se fazer o seguinte:

import { TransferState, makeStateKey } from '@angular/platform-browser';
import { User } from './user.model';

const USERS_KEY = makeStateKey<User[]>('users');

constructor(private transferState: TransferState) {}

fetchUsers(): void {
  if (this.transferState.hasKey(USERS_KEY)) {
    this.users = this.transferState.get(USERS_KEY, []); // Usando os dados do servidor
  } else {
    // Faz a chamada para a API e atribui os dados ao this.users
    // ...
    this.transferState.set(USERS_KEY, this.users); // Armazena os dados do servidor para uso posterior
  }
}

Dessa forma, os dados dos usuários serão armazenados no estado do servidor durante a renderização e, posteriormente, serão transferidos para o cliente para evitar chamadas de API redundantes.

🏁 Conclusão

Em resumo, a renderização do lado do servidor é uma técnica útil para melhorar a performance e a indexação de aplicações Angular. Com a implementação correta, é possível aproveitar os benefícios da SSR, como um carregamento mais rápido da página e melhor SEO.

No entanto, é importante considerar as diferenças entre o ambiente do servidor e do cliente ao trabalhar com a renderização do lado do servidor. É necessário fazer verificações adequadas e tratar casos especiais, como o acesso ao localStorage apenas no cliente.

Em suma, a renderização do lado do servidor pode ser uma solução poderosa para melhorar a performance e a usabilidade de aplicações Angular, especialmente aquelas com conteúdo dinâmico e que precisam ser indexadas pelos motores de busca. Experimente implementar a renderização do lado do servidor em seus projetos e aproveite os benefícios que ela oferece.