现在构建网站不再局限于单页应用，有了更多的方式。本文中，笔者将讨论现有的三种免费的主流替代方案，以及何时用哪种方案来构建你的2021网站。

静态网络应用程序

第一种是最古老的方法，即使用静态网站，在其中有一个或一堆HTML文件。将这些文件放到一个服务器上，然后那个服务器即能为用户提供很好的服务。如果用户进入页面，他们将进入返回的不同HTML文件。

动态网络应用程序

第二古老的方式是使用动态网络，通过它响应中的HTML代码是在服务器上按要求飞速渲染的，这是一个非常重要的要求。因为通过使用静态网站，你只能写HTML代码，然后把它放到服务器上，但是你无法建立网上商店或博客这样的东西。

所以每当你需要用户生成的内容，或者你有需要很大变化的动态内容，比如说你无法把用户的购物车里有什么写在HTML文件上，它们就会改变。

这时就需要一个解决方案：HTML文件在服务器上生成，然后返回给用户。存在一些服务器端的语言，比如Nodejs，C#或者Python，还有像Express，dotnet core或者Django这样的框架方式。

然后，传入的请求会被服务器端解析和处理。然后服务器端的代码会接触到一个数据库，从那里获取一些数据，然后把这些片段拼接起来，在服务器上构建HTML代码。

作为一个开发者，你通常会定义一个模板，并定义模板中的动态点的位置。现在，服务器会完成所有的重任，把所有碎片拼接在一起。然后将相应的HTML和完成的HTML页面返回给用户。

单页网络应用程序

第三种构建网站的方式是建立一个单页应用。这是最先进的方式，它的灵感基本来自于移动应用。人们点击，事情便立即发生。人们从不必等待一个新页面加载，可能在获取一些数据时，会偶尔看到一个微调器。但通常情况下，大家保持在应用程序的体验感中，事情在瞬间发生。

在点击某个地方后不久，就会立即得到一个新的页面，在浏览器上，大家也希望有这样的体验。

你会选择哪一个呢?

为什么以及在哪里选择动态网络应用?

在动态网络方式中，服务器端在每次点击时都会渲染所有内容。但是加载新页面会导致一个新的请求，然后回应在服务器上生成的页面。虽然现代引擎的速度真的很快，但还是会有轻微的延迟，如果动态内容没有变化，我们甚至需要一个新的页面。

假设一下，如果用户只想要一个网站的介绍或联系页面。这时出现了一个单页面应用程序。这里，如果只有一个单页、服务器上的一个HTML文件，那么只有一个文件返回给用户。但在这个文件中，最核心的事情就是加载并启动了一堆JavaScript，然后JavaScript代码将执行，从服务器上获取数据，然后构建整个HTML页面。

另一方面，DOM要做的正是用户在浏览器中迅速看到的东西。其中一个巨大的优势就是JavaScript在浏览器中运行，用户看到的一切都在浏览器中呈现。对于即时发生的事情，不需要发送额外请求来加载新的页面。

偶尔会有一些请求需要被发送来获取新的数据。但是在这期间，网站可以呈现一个微调器或者干脆在导航中延迟半秒之类的。这就是一些可以提高用户体验的技巧。这些全都是免费的方法，且往往看起来像单页应用程序。

为什么以及应该在哪里使用静态网络?

如果你有一个非常简单的页面，没有动态的内容，比如你的个人主页，上面的内容不会频繁变化;比如你每年只更新一次简历，那么你当然可以用一些CSS，或许加上一点点JavaScript构建一堆HTML文件，然后配置到服务器上。然后任务就完成了。

即使当遇到有改变更加频繁的内容，像是Medium.com。那么你可以使用静态网站生成器，在那里你会有一些数据源，可能是一个数据库或一堆markdown文件。然后你可以定义你的页面一般应该是怎样的，每个页面的框架是怎样的等等。

然后这个静态网站生成器就可以由你来运行了。你启动生成过程，生成器会查看你所有的数据源，获取数据，使用预定义的HTML框架，然后插入数据，输出一堆预生成的HTML文件，这并不是在服务器上生成的，而是在你的机器或云端。

但这并不是作为传入请求的一部分。而是在页面部署之前，你将那个完成的静态页面部署到服务器上。最棒的是，甚至有像gatsby、nextJS这样的解决方案，可以让你构建一个react应用。然后，当你把它构建成一个静态网站时，它就会为你呈现出基于用户可能访问的每一个页面而预生成的HTML页面。然后，无论你加载哪个页面，都会加载到完成的HTML代码。

但一旦加载出了一个单页应用程序，它就会接管并执行。最好的事情是，此后你又会得到那种快速的移动应用般的体验。这就是静态网站的显著优势以及很多应用案例了。

图源：unsplash

为什么使用单页网站应用程序?

对于在服务器上生成内容的动态页面，这是一个不错的选择。例如，如果你要建立一个搜索引擎优化和动态内容都很重要的在线商店，那就太好了。

动态页面可能是完美的，因为单页应用程序经常有搜索引擎优化的问题，搜索引擎不必等待浏览器中运行的JavaScript代码完成呈现。特别是当你首先需要从JavaScript代码中获取一些内容时。但它们第一次搜索引擎的优化可能是单页应用程序的一个问题。

它不像服务器端的应用那样，内容是动态生成的，在那里你已经获取了一个完成的页面，所以搜索引擎的爬虫看到的就是用户看到的，唯一一点缺陷是所有的重任都落在服务器上之外。当然，这样做的好处是，当应用程序在用户的浏览器中运行时，你不会影响它的性能。

特别是在较慢的设备上，它可能更适合。因此，动态页面与动态站点相比，内容是在服务器上按请求生成的。它们无处不在，它们有自己的用例。

不仅如此，以那些数据频繁变化的用例为例，内容是高度动态变化的，此时搜索引擎的优化很重要，或者你想在服务器上把性能从用户那里拿走，或者不是性能，而是把性能的影响拿走，这都是一些有用的场景。

结论

图源：unsplash

当然，它们三个也都有反应性较弱的缺点。但面对这些选择，总要有所取舍。

总结来说，动态网页的优点如下：

当然，它的缺点是：

如果要建一个单页应用，它有如下优点：

同样它也有一些缺点：

最后，来看看静态网页应用程序的优缺点：

如果谈到缺点：

三者并不是有你没我的关系，涉及到开发者的需求时，这三种类型的开发网站都是有用的。关键是结合你的需求做出选择。