Astro和岛屿建筑

Photo by 卢卡斯戴维斯 on 不飞溅

又到了引入新 JavaScript 框架的时候了。今天是新的框架 天文 几周前在其第一个完整的 1.0 版本中发布。但是，是什么让 Astro 和它的“孤岛架构”在无尽的 JavaScript 框架世界中与竞争对手如此不同。让我们来看看。

我会将 Astro 描述为核心的静态站点生成器。您可以选择使用模板编写代码，然后将其转换为真正优化的 HTML 页面。但是，这种描述对于框架来说有点不公平，因为它可以做更多的事情。除了真正的静态页面 HTML 生成之外，Astro 还可以渲染页面的交互部分。但是如何在静态文件中显示交互元素呢？这个问题困扰了网络社区很长时间。

对交互性的追求

在互联网之初，只有静态文件。您使用 URL 来访问特定的超文本 文档 .后来，引入了 CSS 和 JavaScript。现在，您可以使用 CSS 设置文档样式并使用 JavaScript 实时操作 DOM。一个网站由多个页面组成：它是一个多页面应用程序。

多页应用程序是在 Web 中做事的传统方式。在过去，由于执行缓慢而复杂，您希望避免在客户端上运行代码。多页应用程序通常与后端服务器捆绑在一起。当用户访问该站点时，服务器会生成包含最新内容的 HTML 页面。此外，您可以从数据库中获取各种数据并在服务器上进行用户身份验证。

快进几年，现在我们有了可以做的客户端框架 状态管理 以及更多的事情从一开始。开发人员有能力使用这些强大的工具开发类似应用程序的网站。单页应用程序诞生了。它仅包含一个使用 JavaScript 呈现站点其余部分的 HTML 文件。但是，您需要向浏览器客户端发送大量 JavaScript，以便以交互方式呈现网页。大量使用 JavaScript 会导致首页加载缓慢，并且没有很好的 SEO 选择。具有许多文件的大型应用程序也臭名昭着更复杂。

所以，让我们退后一步。我们可以将单页应用程序的开发人员体验与多页应用程序的灵活性相结合。我们可以发送较小的部分作为单独的站点，而不是发送一个巨大的 JavaScript 应用程序。这是许多服务器端渲染框架的工作方式。

动态到静态

多页面应用程序的问题是前端与后端完美集成。有必要在后台运行服务器。但并不是每个网站都有一些变化很大的数据，动态生成是有意义的。此外，它使整个网站的处理和编程更加复杂。那么，解决方案是什么？我们不会在每次用户提出请求时呈现网站，而是提前呈现。现在，只有静态文件存储在服务器上。这种方法更容易，并且是 JAM 堆栈（JavaScript、API、标记）的基础。一些数据现在是预渲染的静态部分，一些数据是通过 API 在客户端收集的。

但是这里我们仍然没有解决必须在客户端运行大量 JavaScript 的问题。如果我们没有交互式且经常变化的内容，我们可以预渲染整个页面，就像 Hugo 这样的静态站点生成器已经做了一段时间了。通常你有两者的混合。这就是 Astro 的用武之地。

岛屿及其用途

Astro 会提前渲染网站的静态部分。 JavaScript 仍然用于网站的动态部分。它们或多或少地充当网站的一个独立的自我集成部分，创建一个 岛 .同时，Astro也不固执己见。 Astro 让您可以使用您选择的 JavaScript 框架来设计网站的动态部分。如果你想使用 苗条 对于您的网站，没问题。但是您网站的某些部分是否需要 React 及其庞大的库生态系统？没问题！只需对这些部分使用 React。

此外，这种方法还解决了另一个大问题：JavaScript 太慢了。乍一看，在客户端呈现网页听起来是个好主意。您现在可以使用客户端设备的资源。但实际上这些仍然是有限的。最后，显示 HTML 文件总是比渲染这样的文件更快。这就是为什么 Astro 的核心速度相对较快。

此外，Astro 为博客提供了一个非常有趣的功能：使用 Markdown 创建页面。这使您可以简单地为单个页面创建一个新的 Markdown 文件，然后在构建过程中将其转换为 HTML。

概括

那么，什么是Astro？我会以目前的形式将它描述为一个具有极好的交互可能性的静态站点生成器。 Astro 还可以进行服务器端渲染和许多其他功能。但是，核心仍然是半动态站点。这就是 Astro 可以大放异彩的地方。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/14372/32230501

标签：静态,JavaScript,岛屿,应用程序,Astro,客户端,建筑,页面
来源： https://www.cnblogs.com/amboke/p/16656700.html