本文转载自公众号《核心阅读》（ID：AI_Discovery）。现在建站不再局限于单页应用，方式更多了。在本文中，我将讨论三种免费的主流替代方案，以及何时使用哪一种来构建2021年的网站。静态网页应用第一种是最古老的方法，即使用静态网站，其中有一个或一堆HTML文件。把这些文件放在一个服务器上，那个服务器就可以很好的为用户服务。如果用户转到该页面，他们将转到返回的不同HTML文件。动态web应用程序第二种最古老的方法是使用动态web，其中响应中的HTML代码在服务器上动态呈现，这是一个非常重要的要求。因为使用静态网站，你只能编写HTML代码并将其放在服务器上，而不能构建在线商店或博客之类的东西。因此，无论何时您需要用户生成的内容，或者您??有需要大量更改的动态内容，比如说您不能在HTML文件上写下用户购物车中的内容，它们都会更改。这时候就需要一个解决方案：在服务器端生成HTML文件，然后返回给用户。有一些服务器端语言，例如Nodejs、C#或Python，以及框架，例如Express、dotnetcore或Django。然后，传入的请求由服务器解析和处理。服务器端的代码然后接触数据库，从那里获取一些数据，并将这些片段拼接在一起以在服务器上构建HTML代码。作为开发人员，您通常会定义模板并定义模板中动态点的位置。现在，服务器完成所有繁重的工作，将所有部分拼接在一起。然后将相应的HTML和完成的HTML页面返回给用户。单页Web应用程序构建网站的第三种方法是构建单页应用程序。这是最先进的方式，基本上是受移动应用的启发。人们点击，事情立即发生。人们永远不必等待新页面加载，也许在获取一些数据时每隔一段时间就会看到一个微调器。但通常，人们停留在应用的体验中，事情发生在瞬间。单击某处后不久，您会立即获得一个新页面，并且在浏览器上，您也想要这种体验。你会选哪一个？为什么以及在哪里选择动态网络应用程序？在动态web方法中，所有内容都在每次点击时呈现在服务器端。但是加载新页面会导致新请求，然后该请求会在服务器上以生成的页面进行响应。虽然现代引擎非常快，但仍然存在轻微滞后，如果动态内容不发生变化，我们甚至需要一个新页面。让我们假设一下，如果用户只想要网站的介绍或联系页面。这是一个单页应用程序。在这里，如果服务器上只有一个页面，一个HTML文件，则只返回一个文件给用户。但是在这个文件中，最核心的是加载并启动了一堆JavaScript，然后执行JavaScript代码，从服务器获取数据，然后构建整个HTML页面。另一方面，DOM执行的正是用户在浏览器中快速看到的内容。巨大的优势之一是JavaScript在浏览器中运行，用户看到的所有内容都在浏览器中呈现。对于即时发生的事情，无需发送额外的请求来加载新页面。偶尔需要发送一些请求来获取新数据。但与此同时，该网站可能会呈现一个微调器，或者只是在导航中延迟半秒之类的。这就是一些可以改善用户体验的技巧。这些都是免费的方法，通常看起来像单页应用程序。为什么以及在哪里应该使用静态网站？如果你有一个没有动态内容的非常简单的页面，比如你的个人主页，那不会经常改变；就像你每年只更新一次你的简历，那么你当然可以使用一些CSS，也许是一点点JavaScript来构建一堆HTML文件，然后将其部署在服务器上。然后工作就完成了。即使涉及更频繁更改的内容，例如Medium.com。那么你可以使用一个静态站点生成器，在那里你会有一些数据源，可能是一个数据库或一堆降价文件。然后你可以定义你的页面应该是什么样子，每个页面的框架应该是什么样子等等。然后这个静态网站生成器就可以由你来运行了。你开始生成过程，生成器查看你所有的数据源，获取数据，使用预定义的HTML框架，然后插入数据，并输出一堆预先生成的HTML文件，这些文件不是在服务器上生成的，但在您的机器上或在云中。但这不是作为传入请求的一部分完成的。相反，您在部署页面之前将已完成的静态页面部署到服务器。最棒的是，甚至还有像gatsby、nextJS这样的解决方案，可以让你构建一个React应用程序。然后，当您将其构建为静态网站时，它会根据用户可能访问的每个页面为您呈现预先生成的HTML页面。然后，无论你加载哪个页面，它都会加载到完成的HTML代码中。但是一旦加载了单页应用程序，它就会接管并执行。最棒的是，之后您将再次获得类似移动应用程序的快速体验。这是静态网站和众多应用案例的显着优势。图片来源：unsplash为什么要使用单页网站应用程序？对于在服务器上生成内容的动态页面来说，这是一个不错的选择。例如，如果您要建立一个SEO和动态内容都很重要的在线商店，那就太好了。动态页面可能是完美的，因为单页应用程序通常存在SEO问题，搜索引擎不必等待浏览器中运行的JavaScript代码完成呈现。尤其是当您首先需要从JavaScript代码中获取某些内容时。但是他们的第一个搜索引擎优化对于单页应用程序来说可能是个问题。它不像服务器端的应用程序，内容是动态生成的，你已经获取了一个完成的页面，所以搜索引擎爬虫看到的就是用户看到的，唯一的缺点是所有的繁重工作都落在了外面的服务器上.当然，这样做的好处是您不会影响应用程序在用户浏览器中运行时的性能。特别是在速度较慢的设备上，它可能更合适。因此，动态页面与动态站点相比，动态站点的内容是根据请求在服务器上生成的。它们无处不在，并且有自己的用例。不仅如此，还拿那些数据变化频繁、内容高度动态、此时SEO很重要的用例，或者你想从服务器上的用户那里夺走性能，或者不是性能，而是把性能命中远离，这些是一些有用的场景。结论来源：unsplash当然，这三者也都有反应性弱的缺点。但面对这些选择，总要权衡取舍。综上所述，动态网页的优点如下：提供成品代码。负责服务器上的所有繁重工作。所以浏览器不必再做这些任务了。当然，它的缺点是：需要等待每个新页面的加载。因此，使用感不如手机应用流畅、快捷。后端开发紧密相连，因为一切都发生在服务器上。如果你想构建一个单页应用，它有以下优点：作为开发人员，你的工作只需要专注于前端。高度响应和即时性，没有页面重新加载时间。很棒的经历。同样，它也有一些缺点：SEO可能是一个真正的问题。虽然这是一个可以解决的问题，但它仍然是一个问题。浏览器需要完成所有繁重的工作。所以在速度较慢的设备上会有问题，速度较慢的网络也是如此。最后，看看静态Web应用程序的优缺点：当您针对网络或设备较慢的受众时，静态网站非常有用，因为它们可以为您提供完整的内容。它们也非常适合SEO。没有性能问题，因为不需要在服务器或浏览器中生成页面。它只是已经存在，因为您在开发过程的早期就生成了它。说到缺点：页面生成也是一个很大的缺点，它不太适合快速变化或用户生成的内容。.一切都是预生成的，但有时您不希望预生成整个页面。如果您想完全自动化，那么使用像这样的静态站点生成器来设置完整的工作流程是很有挑战性的。这与你或我无关，当涉及到开发人员的需求时，这三种类型的开发站点都很有用。关键是根据您的需要做出选择。
