Server Side Rendering: Criação de Páginas Dinâmicas

04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 126 Server Side Redering Criação de Páginas Dinâmicas Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 226 Início de conversa Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 326 Olá Cursista Nesta parte vamos explorar o tema server side rendering criação de páginas dinâmicas Assista o vídeo com os principais tópicos sobre o tema e anote suas dúvidas Envie suas dúvidas no Classroom da disciplina Classroom Atividades Dúvidas sobre o conteúdo interaja com o professor e colabore com seus colegas Aproveite para aprofundar os estudos explorando o material organizado na seção SAIBA MAIS Objetivos de aprendizagem Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 426 Os objetivos de aprendizagem desta parte são Entender a diferença em renderização no servidor e no cliente Criação de páginas dinâmicas Aprender a linguagem de templates Jinja Utilizar as template tags do Jinja para renderizar páginas no servidor Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 526 Conteúdo A seguir vamos ao vídeo Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 626 Server Side Rendering Views Dinâmicas Desenvolvimento Web Server Side Rendering Views Dinâmicas Desenvolvimento Web NEaD Faculdade Impacta NEaD Faculdade Impacta Clique no ícone ao lado e aproveite para fazer suas anotações durante os estudos utilizando o Google Keep Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 726 Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 826 Leitura do texto de apoio Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 926 Leia o texto para aprofundar os temas discutidos no vídeo Entre em contato com o professor para esclarecer suas dúvidas Classroom Atividades Dúvidas sobre o conteúdo Server Side Rendering Views Dinâmicas Prof MSc Yuri Maximian Rottner Dirickson Texto revisto atualizado e ampliado por Prof Dr Rafael Will M de Araujo Resumo Aprendemos a usar HTML CSS e JavaScript para construir páginas com conteúdo semântico estilizadas e dinâmicas mas todo este conteúdo precisa estar definido previamente para o navegador renderizálo E se quisermos que o conteúdo mudasse de acordo com o estado da aplicação Uma das técnicas mais clássicas e ainda em grande utilização é a renderização no servidor ou Server Side Rendering onde usamos alguma linguagem de servidor que nos ajude a gerar o HTML que precisamos para mostrar nosso conteúdo Introdução Quando falamos em termos de MVC pensando em sistemas web associamos imediatamente a camada de visualização com as tecnologias do cliente HTML CSS e JavaScript pois elas são responsáveis por estruturar estilizar e trazer vida e inteligência para as páginas na web Porém esse conteúdo é chamado de estático pois esses arquivos já estão prontos para entrega no lado do servidor Conforme movemos os negócios para o mundo digital se torna mais comum que nosso conteúdo seja cada vez mais dinâmico ou seja ele muda a todo momento não sendo possível entregar um único HTML com o mesmo conteúdo a todo momento Nesse sentido precisamos usar tecnologias adicionais que permitam juntar o conteúdo dinâmico dados em um banco de dados por exemplo com o HTML CSS e JavaScript para apresentar esses dados aos usuários E dependendo dos objetivos e características da aplicação podemos empregar diferentes técnicas de renderização ou até misturar várias delas em diferentes partes da aplicação Técnicas de Renderização Dinâmica Em termos de renderização dinâmica temos duas técnicas dominantes renderização no servidor SSR Server Side Rendering e renderização no cliente CSR Client Side Rendering A diferença entre ambos é qual dos atores do modelo clienteservidor vai ser Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1026 o responsável por montar o conteúdo a ser mostrado para o usuário Em ambos os casos temos que montar páginas com HTML CSS e JavaScript pois são essas as tecnologias que o navegador utiliza para mostrar as páginas e isso ocorre juntando dados provenientes de fontes dinâmicas APIs banco de dados arquivos etc com modelos do que deve ser montado na tela chamamos de templates A técnica mais clássica é a do servidor SSR utilizado por quase todas as aplicações legadas de antes dos anos 2000 No começo era usada a própria linguagem de programação Java Python C etc para montar diretamente o HTML a ser transferido para o navegador usando puramente manipulação de strings Posteriormente cada uma dessas linguagens e seus frameworks foram criando sublinguagens de templates de modo a facilitar o desenvolvimento do HTML A ideia dessas sublinguagens é usar anotações especiais dentro de arquivos HTML para que a linguagem principal fosse capaz de montar o HTML final visualização usando esse modelo como base além dos dados passados ao template ROCHA 2018 Os exemplos mais conhecidos dessas tecnologias são o JSP do Java ASPNET C e o PHP A partir dos anos 2000 com a popularização do JavaScript a computação em nuvem e as aplicações de página única Single Page Application SPA surgiu a necessidade de deixar a responsabilidade de montar os conteúdos HTML com o navegador Além de evitar grandes gastos com processamento de linguagens de template no lado do servidor o que é uma preocupação na computação em nuvem as SPAs precisam montar seu conteúdo conforme ele vai sendo requisitado uma vez que elas nunca mudam de página efetivamente então é necessário que o JavaScript seja responsável pela renderização deste conteúdo VEGA 2017 A Figura 101 mostra a diferença em como a renderização funciona em ambos os casos Podemos ver que o SSR consegue entregar uma página visualizável antes que o CSR o que pode ser importante em alguns casos de desempenho e necessidade de conteúdo renderizado para os buscadores Figura 101 Comparação CSR e SSR Fonte do autor 2021 Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1126 Atualmente é comum misturar as duas técnicas entregar uma parte da página já renderizada no servidor para que o usuário consiga visualizála sem executar o JavaScript importante para o SEO Search Engine Optimization do Google e o resto ser dinâmico no cliente Existe ainda uma terceira técnica mais interessante principalmente para páginas que possuam pouco conteúdo dinâmico que é a geração de sites estáticos Static Site Generator SSG OLIVEIRA 2020 A ideia é rodar algum programa que junte os dados dinâmicos com um template da mesma maneira que os anteriores mas esse programa irá gerar e salvar o conteúdo em arquivos HTML para serem enviados ao cliente Dessa forma a renderização será a mais rápida possível pois o conteúdo já chega pronto no cliente e sem custo adicional por usuário pois só precisamos gerar uma vez Sites muito simples como blogs currículos pessoais e até institucionais usam bastante essa técnica pois são conteúdos que mudam muito pouco ao longo dos dias Você quer ler A discussão entre as técnicas de renderização é quase interminável Os dois pontos mais relevantes na comparação entre eles são o SEO Search Engine Optimization e o tempo de renderização no navegador Nem toda aplicação precisa se preocupar com SEO pois nem todas estão disponíveis para serem buscadas pelo Google mas todas elas precisam se preocupar com o desempenho de renderização Para saber mais sobre como as técnicas impactam nesse desempenho leia aqui httpsichiproptrenderizandonaweb 214973935184806 Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1226 Renderização no Servidor com o Flask O foco desta disciplina vai ser na renderização no servidor SSR usando a linguagem de templates Jinja2 que já vem junto com o micro framework Flask O Jinja é uma linguagem de template muito utilizada no mundo Python baseado na sintaxe do Django outro framework Python usado em desenvolvimento web com diversas otimizações e melhorias para uso nas nossas aplicações Jinja Jinja Documentation sd Como usar no Flask O Jinja2 já vem por padrão na instalação do Flask e sua integração é automática Basta configurar na aplicação Flask qual a pasta que ela deve procurar os arquivos templates que por padrão é a pasta templates junto com o arquivo da aplicação apppy Os arquivos HTML já estão prontos para serem usados e lidos pela função rendertemplate mas o Jinja2 introduz as template tags específicas para tornar os arquivos dinâmicos permitindo uma fácil integração dos templates com os dados da aplicação As template tags são divididas em três tipos TEMPLATE TAG usada para expressões de código ou lógica VALOR usada para expressões de impressão de valores no HTML COMENTARIO usado para comentários Detalhe importante diferente dos comentários do HTML comentários feitos com a template tag serão interpretados pelo Jinja e não serão enviados junto com a requisição Exemplos simples da utilização dessas tags podem ser vistos no projeto disponível em httpsgithubcomrwillimpactaflasktemplatetagsjinja Imprimindo valores no template Para passar valores do Python para os templates no Jinja2 usamos a função rendertemplate passando o nome do arquivo de template e quantas variáveis de contexto quisermos Essas variáveis são passadas como parâmetros nomeados do Python técnica conhecida como kwargs TARDIVO 2018 podendo ser de quaisquer tipos e em qualquer quantidade Por exemplo se quisermos passar uma string em Python que representa um título que será mostrado na tag h1 do index do site devemos usar a função rendertemplateindexhtml tituloTítulo Modificado pelo Python Após passar as variáveis de contexto para um template é possível acessálas dentro do template usando a expressão de impressão das template tags Para isso basta usar o nome da variável passada como parâmetro dentro da template tag titulo Ao executar o servidor e acessar a página no navegador vamos ver o título Título modificado pelo Python dentro da tag h1 Se trocarmos o valor da string da variável de contexto ao atualizar a página o servidor vai recriála com o novo valor Expressions sd O Flask permite passar qualquer tipo de objeto e valor no contexto Se o for uma lista Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1326 podemos acessar seus elementos pelo índice Exemplo lista0 se for um objeto ou dicionário podemos acessar seus atributos objeto ou valores associados a uma chave dicionário pelo operador ponto Exemplo objetopropriedade Não podemos executar funções Python dentro dos templates mas o Jinja2 possibilita usarmos filtros filters que servem para alterar de alguma maneira o que irá ser exibido na impressão Para usar um filtro devemos colocálo após a variável de contexto separandoo através do caractere pipe Por exemplo na expressão titulo upper o título irá aparecer com todas as letras em maiúsculo Built In Filters sd Também é possível construir filtros personalizados Estruturas de Controle Além da impressão de valores presentes no contexto podemos usar estruturas de controle similares às que existem no Python para ter maiores possibilidades na construção das páginas Vamos focar nas duas mais utilizadas o for e o if Ambas têm uma estrutura quase idêntica àquelas que existem no Python Para usar a template tag for usamos ela dentro dos marcadores com uma sintaxe igual a do Python ou seja se tivermos no contexto da aplicação uma lista podemos escrever for item in lista Template Tag for sd Para marcar o fim do bloco for usamos o marcador endfor Note que é importante marcar o fim do bloco pois diferente da linguagem Python o Jinja não considera as indentações e espaços portanto essa é a única forma de informar ao Jinja onde termina o laço for Tudo que estiver entre a abertura e o fechamento do bloco for será repetido para cada item a lista Além disso a variável item estará disponível dentro do bloco para ser utilizada em expressões como a impressão item A template tag if também funciona de maneira análoga ao ifelifelse do Python Usamos o marcador if CONDICAO para abrir o bloco Template Tag if Sd A condição do bloco if respeita as mesmas regras que a do Python com os mesmos operadores lógicos and or e not Assim como o for precisamos fechar o bloco com o marcador endif Entre o marcador de abertura e o de fechamento podemos ter vários marcadores elif CONDICAO com condições diferentes e um último marcador else Outras estrutura de controle podem ser estudadas em List of Control Structure sd Herança de Templates Uma das grandes vantagens do Jinja2 é a herança de templates É possível criarmos um template de modelo com todas as estruturas básicas de uma página como o cabeçalho rodapé e navegação bem como as tags de configuração dentro da head do HTML Depois todos os outros templates que criarmos poderão herdar essa estrutura toda e se concentrar apenas no seu conteúdo específico Template Inheritance sd Um exemplo do uso de herança de templates que utiliza como base o projeto da seção 1031 está disponível em httpsgithubcomrwillimpactaflaskherancatemplates Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1426 Para isso criamos um outro arquivo HTML chamado basehtml poderia ser qualquer outro nome com essa estrutura toda em comum Depois devemos marcar todos os pontos onde os templates que herdarem o modelo deverão introduzir seus conteúdos Usamos a template tag block NOME Assim como outras template tags há necessidade de fechar o bloco com endblock Essa tag serve para marcar uma região que terá conteúdo introduzido por outro template através da herança de templates Após a construção do modelo todos os templates que queiram herdar a estrutura devem fazer duas coisas indicar a herança usando a template tag extends MODELO no Exemplo do nosso projeto extends basehtml e definir quais blocos vão ser inseridos no modelo usando a mesma template tag block NOME com o mesmo nome definido no modelo A Figura 102 mostra um exemplo completo retirado do projeto que disponibilizamos no github O primeiro código representa o arquivo basehtml onde é definida uma estrutura básica do HTML e dois blocks um no titulo e outro dentro do body chamado conteudo O segundo código representa o arquivo indexhtml que usa a template tag extends basehtml para indicar que o indexhtml usará a estrutura do basehtml No indexhtml temos os dois blocks definidos para a inserção de conteúdo o titulo e o conteudo O resultado é que o template indexhtml terá todo o código HTML presente no arquivo basehtml mas os trechos definido pelo block titulo será substituído por titlePágina inicialtitle enquanto que o trecho definido pelo block conteudo será substituído pelas tags h1 e p definidas dentro desse bloco Figura 102 Exemplo da aplicação do conceito de herança de templates no Flask Arquivo basehtml Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1526 DOCTYPE html html head block titulo endblock meta charsetUTF8 link relstylesheet hrefstaticestiloscss head body header nav a hrefPágina iniciala a hrefcursosTodos os cursosa a hrefcursodevwebDesenvolvimento Weba a hrefcursopooProgramação Orientada a Objetosa a hrefalunosMédia dos alunosa nav header main block conteudo endblock main footer pRodapé do projeto de demonstraçãop footer body html Arquivo indexhtml Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1626 extends basehtml block titulo titlePágina inicialtitle endblock block conteudo h1 titulo h1 pPágina inicial do projeto que demonstra o uso de template tagsp endblock Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1726 Fonte do autor 2022 Arquivos Estáticos Nem todo conteúdo na web é dinâmico Alguns arquivos já estão prontos e só devem ser transferidos para o navegador poder completar a renderização junto com o HTML É o caso de imagens vídeos arquivos CSS e JavaScript Idealmente esses arquivos devem ser servidos por serviços e servidores especializados como CDNs Content Delivery Networks pois eles são mais bem preparados para lidar com questões de entrega e cache de navegadores Mas podemos servir esses arquivos de dentro do Flask também Por padrão esses arquivos precisam estar na pasta static na raiz do projeto mas pode ser modificado passando a opção staticfolderPASTA no construtor da classe Flask Com isso todos os arquivos estáticos que estejam na pasta static podem ser acessados pelo caminho staticarquivo O prefixo do path pode ser alterado pela opção staticurlpathCAMINHO no construtor da classe Flask Static Files sd Referências BUILT In Filters Pallets Projects sd Disponível em httpsjinjapalletsprojectscomen211xtemplatesbuiltinfilters Acesso em 29 ago 2022 EXPRESSIONS Pallets Projects sd Disponível em httpsjinjapalletsprojectscomen211xtemplatesexpressions Acesso em 29 ago 2022 LIST of Control Structure Pallets Projects sd Disponível em httpsjinjapalletsprojectscomen211xtemplateslistofcontrolstructures Acesso em 29 ago 2022 JINJA Jinja Documentation Pallets Projects sd Disponível em httpsjinjapalletsprojectscomen211x Acessado em 30 ago 2022 OLIVEIRA W Qual a diferença entre server side render SSR e static site generator SSG 2020 Disponível em httpswoliveirascombrpostsqualdiferencaserverside renderssrestaticsitegeneratorssg Acesso em 01 set 2022 ROCHA F O que é Server Side Rendering e como usar na prática Medium 2018 Disponível em httpsmediumcomtechbloghotmartoqueC3A9serverside renderingecomousarnaprC3A1ticaa840d76a6dca Acesso em 01 set 2022 STATIC Files Pallets Projects sd Disponível em httpsflaskpalletsprojectscomen11xtutorialstatic Acesso em 31 ago 2022 TEMPLATE INHERITANCE Pallets Projects s d Disponível em Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1826 TEMPLATE INHERITANCE Pallets Projects sd Disponível em httpsjinjapalletsprojectscomen211xtemplatestemplateinheritance Acesso em 31 ago 2022 TEMPLATE TAG IF Pallets Projects sd Disponível em httpsjinjapalletsprojectscomen211xtemplatesif Acesso em 01 set 2022 TEMPLATE TAG FOR Pallets Projects sd Disponível em httpsjinjapalletsprojectscomen211xtemplatesfor Acesso em 01 set 2022 VEGA C Clientside vs serverside rendering why its not all black and white freeCodeCamp 2017 Disponível em httpswwwfreecodecamporgnewswhat exactlyisclientsiderenderingandhowsitdifferentfromserversiderendering bd5c786b340d Acesso em 01 set 2022 TARDIVO R Python entendendo o uso de args e kwargs em funções e métodos Medium 2018 Disponível em httpsmediumcomrafaeltardivopythonentendendoo usodeargsekwargsemfunC3A7C3B5esemC3A9todosc8c2810e9dc8 Acesso em 29 ago 2022 Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 1926 Saiba mais Clique no link a seguir para ler um artigo que compara a renderização no cliente CSR e no servidor SSR Redenring on the Web webdev Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 2026 Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 2126 Finalizando Desenvolvimento Web 04092023 0955 Desenvolvimento Web Nesta parte buscamos os seguintes objetivos de aprendizagem Entender a diferenga em renderizagao no servidor e no cliente Criagao de paginas dinamicas Aprender a linguagem de templates Jinja Utilizar as template tags do Jinja para renderizar paginas no servidor Reflita sobre o conteudo que vocé explorou e faca um debate com seus colegas e professores pelo Classroom ou na prdéxima aula ao vivo live Fique atento ao prazo de encerramento da atividade continua que compdem esses conteudos de aprendizagem Esperamos que vocé tenha aprofundado seus conhecimentos durante os estudos e tenha aproveitado todo o conteudo apresentado httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 2226 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 2326 Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 2426 Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 2526 Desenvolvimento Web 04092023 0955 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp10pli1authuser1 2626 Classroom Gmail Drive Portal do Aluno Núcleo de Educação a Distância Faculdade Impacta Telefone 11 55935382 Horário de atendimento 10h às 18h Desenvolvimento Web