静态网站回归的原因
再融资
本文由NuxtJS的学习主管兼开发者倡导者Debbie O'Brien ( @Debs_obrien )撰写。
90年代的静态网站
多年前我们刚开始搭建网站时，它们都是静态的。那时我们只会这些：HTML、一些CSS和一点点JavaScript。1996年的SpaceJam网站就是一个典型的例子，它充分展现了静态网站的局限性。
多年前我们刚开始搭建网站时，它们都是静态的。那时我们只会这些：HTML、一些CSS和一点点JavaScript。1996年的SpaceJam网站就是一个典型的例子，它充分展现了静态网站的局限性。
虽然这在当时很酷，但现在看来却相当丑陋，我们如今绝不会再做类似的东西。但如果你对这个页面进行性能测试，它的性能得分是100分，因为它只是一个静态网站，几乎没有使用任何JavaScript和CSS。
服务器端语言
但随着互联网的发展，许多公司放弃了简单的HTML，转而使用服务器端语言。这是一种在页面间共享代码的绝佳方式，可以从数据库获取数据并在服务器端填充页面，然后将渲染后的HTML发送给客户端。这对搜索引擎优化非常有利，因为搜索引擎可以轻松索引页面。但这同时也意味着前端和后端代码混杂在一起。页面更改意味着需要再次向服务器发出请求，因此每次页面都需要完全重新加载，可能会出现轻微的页面闪烁。
单页应用程序
后来出现了单页应用程序（SPA），它允许我们在页面间共享组件，并且前端代码不再与后端代码混杂在一起。单页应用程序实现了客户端渲染。这意味着什么呢？这意味着当浏览器请求页面时，会向浏览器发送一个非常简单的 HTML 页面，然后在 JavaScript 加载完成后，在客户端渲染该页面。这意味着我们可以获得更快的导航速度，并且在导航时不会出现页面切换时的闪烁，因为实际上只有一个页面，当我们切换页面时，我们只是使用 JavaScript 重新绘制该页面以显示更改后的内容。
单页应用（SPA）非常棒，但如果你想把它推销给大公司的市场部门，他们首先会告诉你，搜索引擎无法抓取单页应用。某种程度上来说，他们的说法没错。大多数搜索引擎确实无法抓取单页应用，即使有些搜索引擎可以依赖读取 JavaScript，但即使 JavaScript 代码中存在一个很小的错误，爬虫程序也可能无法读取你的页面。此外，单页应用在首次渲染时速度可能较慢，因为页面渲染之前需要下载所有 JavaScript 代码。虽然渲染完成后速度会非常快，但初始页面加载可能会比较慢。
静态网站回归了
所以，我们真正需要的是一种既能像90年代的静态网站那样高效，又能像单页应用那样动态强大，并且代码可索引以优化搜索引擎排名的东西。这就是静态网站回归的原因。但我们并不是要回到90年代。我的意思是，如果我们想的话，当然可以。我们可以创建纯HTML，添加一些CSS和JavaScript，就能得到一个看起来非常动态的静态网站。但我们真正想要的是拥有一个性能卓越，同时又具备动态单页应用外观和体验的静态网站。这才是我们今天所说的静态网站的含义。
静态并不意味着静态
我们遇到的问题在于，“静态”这个词本身就很糟糕，因为它意味着缺乏动态，而实际上静态网站并非缺乏动态。但事实并非如此。静态网站可以根据需要实现动态效果。以 Nuxt.js 的静态网站为例，当用户请求页面时，页面会从静态托管服务商（我们称之为无服务器托管）发送给用户。页面已经渲染完毕，客户端几乎可以立即看到它。然后 Vue 的 hydration 机制接管，你的应用程序就像一个单页应用程序一样运行，例如，路由在客户端完成，这就是为什么我们在切换页面时不会看到页面闪烁的原因。所有对 API 的调用都会被缓存，因此在客户端路由时无需再次调用 API 获取数据，因为数据已经存在。这极大地提高了性能。当然，并非所有数据都会被缓存，我们仍然可以在用户事件发生时调用 API 来提交表单，甚至进行支付。 API 赋予静态网站强大的功能，正是它们在使当今的静态网站功能极其强大方面发挥了重要作用。
水合（Hydration）指的是客户端处理过程，在这个过程中，Vue 会接管服务器发送的静态 HTML，并将其转换为能够响应客户端数据变化的动态 DOM。由于服务器已经渲染了标记，我们显然不想丢弃它并重新创建所有 DOM 元素。相反，我们希望“水合”静态标记，使其具有交互性。这就像魔法一样神奇。
重建您的静态网站
是的，要说服后端开发人员或经理，静态网站才是最佳选择，确实很难，尤其静态网站在数据更改时需要重新构建，这听起来是个大工程，但实际上并非如此。举个例子，使用 Nuxt.js 处理静态网站时，我们可以缓存构建结果。如果只有内容更改，我们无需重新构建整个网站，只需重新构建内容即可。这使得构建时间大大缩短，非常实用。更不用说还有实时预览功能，您可以从 API 或 CMS 实时预览更改，准备就绪后再重新构建网站。
静态网站的优势
现在，有些时候服务器端渲染是必要的，并非所有网站都能也应该构建成静态网站，但可以肯定的是，绝大多数网站都可以轻松实现静态化。静态网站可以免费托管在静态主机服务商处，无需服务器。这不仅降低了成本，而且由于无需服务器，攻击面也大大减少，同时减少了碳排放，使您的网站更加绿色环保。静态网站速度更快，因为它们已经预先渲染，从而显著提升了性能。而且，借助 JavaScript 和 Nuxt.js 等框架，静态网站可以根据您的需求进行动态调整。从外观上看，您应该无法区分网站是静态的还是单页应用（SPA）。区别在于首字节加载时间和幕后处理。用户是最大的受益者，而将用户放在首位正是我们都应该做的。
结论
GitHub Stars 就是一个使用静态网站的公司的例子，他们的网站完全是静态的，你可以登录并提名他人为你的 Star。所有这些功能都在一个静态网站上实现。没错。所以，你还在等什么？赶紧行动起来，开始构建静态网站吧！
资源
- 这就是90年代静态网站的样子：www.spacejam.com
- 一个使用 Nuxt 构建的静态网站：stars.github.com
- Nuxt 发行说明
- Nuxt静态改进
- Nuxt入门
- 使用 Nuxt 实现全栈开发
- 将您的静态网站部署到 Azure
- 在 Azure 上部署您的 Nuxt 应用
- 免费试用 Azure（12 个月）
想用静态网页应用做更多事情吗？
欢迎参加 7 月 29 日（太平洋时间上午 8:30 / 东部时间上午 11:30）举行的CREATE:Frontend 活动，这是一场为时 4 小时的免费线上活动，包含 8 场演讲和90 分钟的实践工作坊，助您快速开启静态 Web 应用之旅。
请收藏我们的主帖，并定期查看更新。
#创建：前端
静态网站又回来了！
与大多数人认为静态网站不具备动态功能的想法相反，静态网站指的是由一组“预构建”文件（即 HTML、JS 和 CSS 文件）组成的网站，这些文件会在用户请求时直接提供服务。在CREATE:Frontend大会上，我们将探讨静态网站和服务器的优缺点，以及静态网站再次流行的原因。
请在活动期间和活动结束后收藏此页面并随时访问。
- 在线问答环节：与演讲者和社区成员进行互动讨论。演讲者将在演讲结束后在线回答问题约15分钟。
关于本次课程：
July 29, 2020: 09:05 PDT - 09:20AM PDT
我们探讨了静态网站和服务器的优缺点，以及静态网站再次流行的原因。
演讲嘉宾简介：
Debbie O'Brien 是 NuxtJS 的学习主管和开发者布道师。Wassim Chegham 是微软的高级云开发者布道师。请在 Twitter 上关注@Debs_obrien和@manekinekko。
关于 MSCreate：前端
如果您想了解更多关于MSCreate:Frontend活动的信息，请查看这篇文章，其中包含所有演讲和演讲者的链接。记得收藏这篇文章，以便在活动结束后收到录像和相关资源的链接通知！
想了解更多关于 Azure 静态 Web 应用的信息？
文章来源：https://dev.to/azure/why-static-sites-are-back-6jh