Clever Geek Handbook

在客户端，服务器上渲染并生成静态站点

向所有专业人士和网站建设者致以问候！我提醒您注意Malcolm Laing撰写的文章“客户端渲染vs服务器端渲染vs静态站点生成”。



前端程序通常使用这些术语来描述其应用程序。但是，对于不太熟悉Web技术的人们，这些概念通常会产生误导。如果您难以理解客户端渲染，服务器端渲染和静态站点生成之间的区别，那么本文适合您！



客户端渲染



随着单页应用程序（Spa）技术的兴起，客户端渲染变得很流行。这种方法用于许多JavaScript框架中，例如AngularJS，ReactJS，Backbone.JS等。在客户端生成的应用程序中，服务器将JS文件和静态HTML发送到客户端。然后，客户端进行足够的API调用以获取原始数据，然后呈现应用程序。



<!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是空白页。如果您在禁用JS的情况下打开此HTML，结果将是空白屏幕，在noscript标记中写入了涡旋。当客户端收到HTML并加载JS时，React应用程序将在ID为root的div中呈现。



客户端渲染的好处



  1. 应用程序易于开发和托管，

    不需要客户端渲染应用程序的服务器。您可以简单地将应用程序托管在任何CDN或文件托管（如Amazon）上。有很多免费的发布方式。
  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



在我看来，NextJS提供了两种方法的最佳组合，使我们能够创建使用服务器端渲染和静态网站创建的混搭。NextJS为框架定义的静态页面提供了框架所谓的自动静态优化。这使您可以创建包含服务器渲染页面和生成的静态信息的混搭。



More articles:


All Articles