Angular Server-side rendering com .Net Core SSR
Introdução
Em um breve resumo, server-side rendering ou SSR como é muito conhecido, é uma das formas que nós temos de renderizar um projeto cliente no lado do servidor.
Mas como isso funciona?
Nesse cenário as requisições passam a ser processadas por uma linguagem backend como .NET ou Node.js (podendo ser utilizado uma outra linguagem back) , que as processam e retornam as páginas em HTML. Agora a grande dúvida, qual é a vantagem de se fazer isso?
Um dos maiores motivos é o SEO (Search Engine Optimization), hoje os crawlers conseguem interpretar e indexar os projetos desenvolvidos em SPA (single page application), mas com um certo custo.
Para quem não conhece o crawler, ele é rastreador de rede ou de uma maneira mais técnica, um programa de computador que navega pela internet com a finalidade de rastrear páginas. Um crawler muito conhecido é o GoogleBot.
Depois dessa breve introdução, vamos ao objetivo desse artigo que será demonstrar como nós podemos criar um projeto Angular, sendo renderizado do lado do servidor com .NET Core.
Criação do projeto
Para os próximos passos será necessário ter o .NET Core instalado no seu computador, caso você ainda não tenha ele, segue link contendo um passo a passo dessa instalação: Instalação .NET Core.
Agora, para que o pessoal que trabalha com linux ou no mac possa acompanhar esse artigo, vamos criar um novo projeto utilizando um terminal ou CMD no caso do Windows. Para isso, abra o seu terminal, escolha um diretório para o seu projeto e digite o comando abaixo:
dotnet new angular
Esse comando criará um novo projeto utilizando o template Angular SSR do .NET Core.
Assim que o passo anterior finalizar, digite npm install no seu terminal, para instalar as dependências do Angular.
Para os próximos passos será necessário um editor de textos, eu irei utilizar o VS Code, mas você pode utilizar um de sua preferência.
Com ele aberto no seu editor, vamos navegar pela estrutura do nosso projeto:
O projeto é dividido em duas partes, a pasta ClientApp contendo os arquivo do projeto Angular e as pastas controllers e views do .NET. Agora para rodar o projeto, execute o comando abaixo no seu terminal:
dotnet run
Esse comando executara o projeto na porta :5000. Abra o endereço http://localhost:5000/ para verificar se o projeto está rodando corretamente.
Abaixo você tem uma imagem demonstrando esse passo:
Para verificar se o seu projeto está sendo renderizado pelo server, basta inspecionar o seu projeto e procurar pelas tags HTML. Abaixo você tem uma imagem demonstrando esse passo:
Bem simples né?
Com esse template nós conseguimos pular a etapa de configuração e ir direto para parte de desenvolvimento do nosso projeto.
Bom, o intuito desse artigo era apresentar esse template. Espero que tenham gostado e até a próxima pessoal 😉
