Angular e .Net Core: Server-side rendering


Angular Server-side rendering com .Net Core SSR

Image result for SSR Angular
Server-side rendering (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:

  
Angular SSR com .NET Core

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:

  
.NET Core com Angular SSR

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:

  
Angular SSR (server-side rendering)

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 😉

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

Anonimo

Anônimo

Quando dois ladrões invadem sua casa no subúrbio uma noite, Hutch se recusa a defender a si mesmo ou a sua família, na esperança de evitar violência grave. S…

Maze Runner – Correr ou Morrer

Maze Runner – Correr ou Morrer O filme mostra o jovem Thomas (Dylan O’Brien), que vai parar em um lugar desconhecido, sem memória que o
TheWildsVidasSelvagens

the wilds: vidas selvagens

The Wilds: Vidas Selvagens The Wilds: Vidas Selvagens é uma série dramática de TV americana criada por Sarah Streicher que foi lançada no Prime Video
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses