Astro, 新一代的多功能静态博客网站搭建框架

September 15, 2024

Astro 是最适合构建像博客、营销网站、电子商务网站这样的以内容驱动,加载速度快、具有良好SEO的 Web 框架。 它以开创了一种新的前端架构而闻名,与其他框架相比它减少了JavaScript的开销和复杂性。它具有

1. 支持各种UI框架:支持 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 组件等等。
2. 服务器优先:将沉重的渲染移出访问者的设备。
3. 默认无 JS:让客户端更少的执行 JS ,以提升网站速度。
4. 内容集合:为你的 Markdown 内容,提供组织、校验并保证 TypeScript 类型安全。
5. 可定制:Tailwind、MDX 和数百个集成可供选择。

Astro 专为构建内容丰富的网站而设计。这包括大多数营销网站、出版网站、文档网站、博客、个人作品集、着陆页、社区网站和电子商务网站.

相比之下,大多数现代 Web 框架都是为构建 Web 应用程序而设计的。这些框架擅长于在浏览器中构建复杂的、类似应用程序的体验:登录后的管理仪表板、收件箱、社交网络、待办事项列表,甚至是像 Figma 和 Ping 这样的类原生应用程序。 然而随着复杂性的增加,它们在提供内容时可能会遇到性能问题。

Astro 从它最初作为静态网站生成器的开始就专注于内容,使得 Astro 可以合理地扩展到性能强大的动态 Web 应用程序,同时仍然尊重你的内容和你的受众。Astro 对内容的独特关注让 Astro 能够做出取舍并提供无与伦比的在其他框架中实现起来不合理的性能功能。 服务器优先 Astro 尽可能多地使用服务器渲染而不是在浏览器中的客户端渲染。这与传统的服务器端框架 -- 像 PHP、WordPress、Laravel、Ruby on Rails 等 -- 使用了几十年的方法相同。但你不需要学习第二种服务端语言来解锁它。使用 Astro,一切仍然只是 HTML、CSS 和 JavaScript(或 TypeScript,如果你乐意的话)。

这种方法与其他现代 JavaScript Web 框架形成鲜明对比,如 Next.js、SvelteKit、Nuxt、Remix 等。 这些框架是为客户端渲染整个网站而制作的,提供服务器端渲染主要是为了解决性能问题。 这种方法被称为单页应用程序(SPA),对比 Astro 的多页应用程序(MPA)。

SPA 模式有它的优势。然而,这些都是以牺牲额外的复杂性和性能权衡为代价的。这些取舍损害了页面性能 -- 比如可交互时间(TTI)等关键指标 -- 对于以内容为中心的网站没有多大意义,而这种网站的首次加载性能至关重要。

Astro 的服务器优先方法使你可以在且仅在必要的时候选择加入客户端渲染。你可以选择添加在客户端运行的 UI 框架组件。 你可以利用 Astro 的视图过渡路由来更精细地控制选定页面的过渡和动画。Astro 的服务器优先渲染,无论是预渲染还是按需渲染,都提供了可以增强和扩展的高性能默认值。

在许多 Web 框架中,很容易在开发过程中构建一个看起来很棒的网站,但在部署后加载速度非常慢。JavaScript 通常是罪魁祸首,因为用户的手机和低功耗设备很少能与开发者的电脑速度相匹配。

Astro 的魔力在于它如何将上述两个价值 -- 以内容为中心和服务器优先的架构 -- 相结合,做出权衡并提供其他框架无法实现的功能。结果是每个网站都开箱即有令人惊叹的 Web 性能。

一个 Astro 网站可以比使用最受欢迎的 React Web 框架构建的同一网站加载速度快 40%,JavaScript 减少 90%。

Astro 的目标是使所有 Web 开发者都对它易于理解。Astro 被设计成熟悉和平易近人的感觉,无论技能水平或过去的 Web 开发经验如何。

Astro 的 .astro UI 语言是 HTML 的超集:任何有效的 HTML 都是有效的 Astro 模板语法!因此,如果你能编写 HTML,你就可以编写 Astro 组件!但是,它还结合了我们从其他组件语言中借用的一些我们最喜欢的功能,如 JSX 表达式(React)和默认使用 CSS 作用域(Svelte 和 Vue)。 这种与 HTML 的相似性也使得使用渐进式增强和常见的可访问性模式变得更加容易而无额外开销。

我们然后确保你还可以使用你已经了解的最喜欢的 UI 组件语言,甚至可以复用你可能已经有的组件。 React、Preact、Svelte、Vue、Solid、Lit 和其他的,包括 Web components,都被支持在 Astro 项目中编写 UI 组件。

Astro 的设计比其他 UI 框架和语言更简单。其中一个重要原因是 Astro 被设计为在服务器上渲染,不是在浏览器中。 这意味着你无需担心:hooks (React)、stale closures (还是 React)、refs (Vue)、observables (Svelte)、atoms、selectors、reactions、或 derivations。服务器上没有响应式,因此这些复杂性都消失了。

转载自 Astro