Astro 框架

Astro 是什么？

Astro 是一个为构建快速、内容驱动的网站而优化的 JavaScript Web 框架。

服务器优先

Astro 通过在服务器上渲染组件来提高网站性能，将轻量级 HTML 发送到浏览器，实现零不必要的 JavaScript 开销。

内容驱动

Astro 旨在处理您的内容，无论它存放在何处。从您的文件系统、外部 API 或您喜欢的 CMS 加载数据。

可定制

使用您喜欢的工具扩展 Astro。自带您的 JavaScript UI 组件、CSS 库、主题、集成等。

一流的性能

Astro Islands

Islands 以前所未有的方式优化您的网站。利用 Astro 独特的页面加载性能来提高转化率、核心 Web 指标和 SEO。

具有良好核心 Web 指标的真实网站百分比

Astro

60%

WordPress

43%

Gatsby

41%

Next.js

26%

Nuxt

23%

查看完整数据集 · 基于来自 HTTP Archive 和 Chrome 用户体验报告的真实性能数据。

最大灵活性

零锁定

Astro 支持所有主流的 UI 框架。带上您现有的组件，并利用 Astro 优化的客户端构建性能。

集成您喜欢的框架

---
import BuyButton from '../components/BuyButton.jsx';
import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';

const product = await getProductDetails(Astro.params.slug);
---

<ProductPageLayout>
  <img src={product.imageUrl} alt={product.imageAlt} />
  <h2>{product.name}</h2>
  <BuyButton id={product.id} client:load />
</ProductPageLayout>

棒球帽

$15.50

---
import BuyButton from '../components/BuyButton.vue';
import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';

const product = await getProductDetails(Astro.params.slug);
---

<ProductPageLayout>
  <img src={product.imageUrl} alt={product.imageAlt} />
  <h2>{product.name}</h2>
  <BuyButton id={product.id} client:load />
</ProductPageLayout>

棒球帽

$15.50

---
import BuyButton from '../components/BuyButton.jsx';
import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';

const product = await getProductDetails(Astro.params.slug);
---

<ProductPageLayout>
  <img src={product.imageUrl} alt={product.imageAlt} />
  <h2>{product.name}</h2>
  <BuyButton id={product.id} client:load />
</ProductPageLayout>

棒球帽

$15.50

---
import BuyButton from '../components/BuyButton.svelte';
import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';

const product = await getProductDetails(Astro.params.slug);
---

<ProductPageLayout>
  <img src={product.imageUrl} alt={product.imageAlt} />
  <h2>{product.name}</h2>
  <BuyButton id={product.id} client:load />
</ProductPageLayout>

棒球帽

$15.50

---
import BuyButton from '../components/BuyButton.jsx';
import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';

const product = await getProductDetails(Astro.params.slug);
---

<ProductPageLayout>
  <img src={product.imageUrl} alt={product.imageAlt} />
  <h2>{product.name}</h2>
  <BuyButton id={product.id} client:load />
</ProductPageLayout>