Clever Geek Handbook

Renderizando no cliente, no servidor e gerando sites estáticos

Saudações a todos os profissionais e fãs da construção de sites! Chamo a sua atenção para a tradução do artigo "Renderização do lado do cliente vs Renderização do lado do servidor vs geração de site estático" por Malcolm Laing.



Os frontenders costumam usar esses termos para descrever seus aplicativos. No entanto, para pessoas menos familiarizadas com as tecnologias da web, esses conceitos costumam ser enganosos. Se você achar difícil entender as diferenças entre a renderização no cliente , a renderização no lado do servidor e a geração de sites estáticos - este artigo é para você!



Renderização do lado do cliente



A renderização do lado do cliente tornou-se popular com o surgimento da tecnologia Single Page Application (Spa). Essa abordagem é usada em muitos frameworks JavaScript, por exemplo AngularJS, ReactJS, Backbone.JS, etc. Em aplicativos gerados pelo cliente, o servidor envia arquivos JS e HTML estático para o lado do cliente. O cliente então faz chamadas de API suficientes para obter os dados brutos e, em seguida, o aplicativo é renderizado.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>


, HTML — . HTML JS, , noscript. HTML JS, div ID root React-.







  1. , . CDN . .


  2. . - , .




  1. SEO

    . Google , , JS, . , .
  2. UX

    . , .


  3. API . , , .




HTML . API . , , , .



— . . , NextJS, , . , , .







  1. , , , . , .
  2. SEO.

    SEO . Google , , . Google -, .






  1. , , . API, HTML .


  2. React . , , NextJS.




, HTML- . API HTML- . , -, API HTML, HTML-.



, . HTML- . , .



Gatsby NextJS — , React. Hugo — .







  1. HTML- , , , , . ( : ).


  2. HTML-, CDN .






  1. . , - . , , , . , .


— NextJS



Na minha opinião, o NextJS oferece uma combinação do melhor de ambas as abordagens, permitindo-nos criar mashups que usam renderização do lado do servidor e criação de site estático. O NextJS oferece o que a estrutura chama de otimização estática automática para as páginas que define como estáticas. Isso permite criar mashups contendo páginas renderizadas pelo servidor e estatísticas geradas.



More articles:


All Articles