Clever Geek Handbook

Representación en el cliente, en el servidor y generación de sitios estáticos

¡Saludos a todos los profesionales y fanáticos de la construcción de sitios! Llamo su atención sobre la traducción del artículo "Representación del lado del cliente frente a representación del lado del servidor frente a generación de sitios estáticos" de Malcolm Laing.



Los frontenders suelen utilizar estos términos para describir sus aplicaciones. Sin embargo, para las personas menos familiarizadas con las tecnologías web, estos conceptos suelen ser engañosos. Si le resulta difícil comprender las diferencias entre la representación en el cliente , la representación en el lado del servidor y la generación de sitios estáticos , ¡este artículo es para usted!



Representación del lado del cliente



La renderización del lado del cliente se hizo popular con el auge de la tecnología de aplicaciones de una sola página (Spa). Este enfoque se utiliza en muchos marcos de JavaScript, por ejemplo AngularJS, ReactJS, Backbone.JS, etc. En las aplicaciones generadas por el cliente, el servidor envía archivos JS y HTML estático al lado del cliente. Luego, el cliente realiza suficientes llamadas a la API para obtener los datos sin procesar y luego se procesa la aplicación.



<!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



En mi opinión, NextJS ofrece una combinación de lo mejor de ambos enfoques, lo que nos permite crear mashups que utilizan tanto la representación del lado del servidor como la creación de sitios estáticos. NextJS ofrece lo que el marco llama optimización estática automática para aquellas páginas que define como estáticas. Esto le permite crear mashups que contengan tanto páginas renderizadas por el servidor como estadísticas generadas.



More articles:


All Articles