No Angular v16 ganhamos um novo sistema de hidratação . Também foi sugerido que experimentos para hidratação parcial e retomada estão em andamento . Esta é uma ótima notícia para os desenvolvedores Angular, mas ainda há muito trabalho a ser feito para tornar os aplicativos Angular com melhor desempenho e SEO mais amigáveis.

Embora a Hidratação e a Retomabilidade sejam ótimas para melhorar o desempenho de nossos aplicativos, elas não são suficientes. Ter que renderizar o aplicativo no lado do servidor para cada solicitação do usuário não é eficiente e pode ser caro para aplicativos grandes com muitos usuários.

Soluções como SSG (Static Site Generation) renderizam o site no momento da construção e armazenam em cache os arquivos para cada rota do aplicativo. SSG tem seus próprios problemas. Por exemplo, se uma página for atualizada, todo o site precisará ser reconstruído. Isso pode levar muito tempo para sites grandes (se o cache de compilação não for aplicado).

É por isso que precisamos de uma solução que combine o melhor dos dois mundos: renderizar o aplicativo no lado do servidor para cada solicitação do usuário e armazenar as páginas em cache enquanto as atualiza quando necessário, sem precisar reconstruir o site inteiro.

E é aí que entra a Regeneração Estática Incremental (ISR). ISR é uma técnica que permite atualizar páginas estáticas de um site sem a necessidade de reconstruir todo o site.

Como funciona

A ideia por trás do ISR é renderizar as páginas do nosso site no lado do servidor em tempo de execução e, em seguida, armazená-las em cache para solicitações futuras. Em vez de armazenar as páginas em cache para sempre, podemos definir um limite de tempo para cada página ou rota. Quando o limite de tempo expira, enviamos o conteúdo obsoleto ao usuário e acionamos uma regeneração interna que renderizará novamente a página e a armazenará em cache novamente. Podemos atualizar as páginas do nosso site sem precisar reconstruir todo o site.

O ISR pode atualizar as páginas de um site quando os dados mudam. Considere um blog. Quando uma postagem é atualizada, podemos renderizar novamente a página que representa a postagem e armazená-la em cache novamente. Isso também é útil para sites de comércio eletrônico. As páginas de produtos individuais podem ser atualizadas quando ocorrem alterações de preço ou um produto está fora de estoque. Isso também é chamado de regeneração sob demanda porque as páginas são regeneradas somente quando são alteradas.

Pré-requisitos

Antes de ativar o ISR em seu aplicativo, as seguintes etapas precisam ser concluídas:

• Habilite a renderização do lado do servidor em seu aplicativo.
• (Opcional) Inclua um manipulador de cache personalizado (Filesystem, Firebase Firestore, Redis, Cloudflare Workers KV, etc.)

Como adicionar ISR em Angular

Usaremos @rx-angular/isr (mantido por Push-based.io que oferece também outros serviços e ferramentas para melhorar o desempenho e escalabilidade da web) para adicionar ISR em Angular. Este pacote fornece uma API que permite adicionar ISR com apenas algumas linhas de código.

Primeiro, instale a biblioteca:

npm install @rx-angular/isr

Em seguida, adicione os provedores de ISR.

Em um aplicativo independente, precisamos adicionar os provedores no arquivo app.config.server.ts :

+import { provideISR } from '@rx-angular/isr/server';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
+   provideISR() // 👈 Register ISR providers
  ],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

exportar configuração const = mergeApplicationConfig(appConfig, serverConfig);

Em um aplicativo baseado em NgModule, precisamos adicionar os provedores no AppServerModule :

+import { provideISR } from '@rx-angular/isr/server';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  
  providers: [ 
+   provideISR() // 👈 Register ISR providers
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Esses provedores nos permitirão modificar o HTML renderizado antes de enviá-lo ao usuário, e também registrar as rotas que queremos armazenar em cache e o limite de tempo de cada rota. Link para o código fonte .

Atualize o arquivo server.ts para interceptar as solicitações e enviar as páginas em cache, se existirem.

+import { ISRHandler } from '@rx-angular/isr/server';

export function app(): express.Express {
    // Other Angular Universal setup code (removed for brevity)...

+   const isr = new ISRHandler({
+       indexHtml, // 👈 The index.html file
+       invalidateSecretToken: process.env['INVALIDATE_TOKEN'] || 'TOKEN', // 👈 The secret token used to invalidate the cache
+       enableLogging: !environment.production, // 👈 Enable logging in dev mode
+   });

+   server.get('*',
+       async (req, res, next) => await isr.serveFromCache(req, res, next),
+       async (req, res, next) => await isr.render(req, res, next)
+   );

    // remove Angular render handler as we will use the one from isr
+   (req, res) => {
+     res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+   }

    return server;
}

Agora você adicionou ISR ao seu aplicativo Angular.

Como usar o ISR

Para usar o ISR, você precisa adicionar a propriedade revalidate às rotas que precisamos armazenar em cache. Esta propriedade aceita um número que representa o limite de tempo de cada rota em segundos. Por exemplo, se quiser armazenar em cache a página inicial por 10 segundos, você pode fazer desta forma:rotas const:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
+   data: { revalidate: 10 }
  }
];

É isso! Todos os blocos de construção estão implementados e agora você pode usar o ISR em seu aplicativo Angular.

NOTA: Por padrão, a biblioteca usará o manipulador de cache In-Memory .

Fora dos recursos que acabamos de explorar, a biblioteca ISR também oferece:

• Regeneração sob demanda (gerar novamente as páginas quando os dados forem alterados, por exemplo, quando uma postagem de blog for atualizada)
• Manipuladores de cache integrados (cache na memória e no sistema de arquivos)
• Manipulador de cache baseado em plug-in (crie seu próprio manipulador de cache, por exemplo Redis, Cloudflare Workers KV, Firebase Firestore, etc.)
• Tratamento de erros (se a página não for renderizada, podemos enviar o conteúdo obsoleto ao usuário, até que a página seja regenerada com sucesso)
• Logging (podemos ativar o log no modo dev para ver o que está acontecendo nos bastidores)
• Ganchos de armazenamento/recuperação de cache (atualizam o cache antes que a página seja armazenada no cache ou antes que a página seja recuperada do cache para ser enviada ao usuário)
• Combinando cache do sistema de arquivos com pré-renderização (podemos usar ISR com pré-renderização para pré-renderizar as páginas do nosso site e, em seguida, armazená-las em cache para solicitações futuras)

Benefícios

• Métrica TTFB aprimorada (tempo até o primeiro byte)
• Menos uso de recursos do servidor devido ao cache
• Evitar fazer o mesmo trabalho duas vezes
• APIs extensíveis
• Uma melhor experiência de desenvolvedor (DX)
• A biblioteca é de código aberto (MIT)

Pegadinhas

Ao usar este pacote, há algumas considerações. As páginas que dependem de dados específicos do usuário podem ser difíceis de armazenar em cache e reutilizar para todos os usuários. Na prática, pode ser melhor não armazenar essas páginas em cache.

Use ISR para melhorar sua experiência de aplicação.

O ISR não apenas melhora o desempenho do seu aplicativo, mas também melhora a experiência dos seus usuários. Comece hoje mesmo com o ISR, conferindo-o em https://www.rx-angular.io/docs/isr .

Post original de onde esse foi traduzido, blog angular