Astro，你真的值得试试……

首发于公众号前端从进阶到入院，欢迎关注。

上周我写了一篇关于我对 Next.js 的失望的文章。不过我接下来希望写点正能量的内容，那必须是我最喜欢的 Astro 了。

什么是 Astro?

Astro 是一个通过 JavaScript 构建静态和服务端渲染网站的框架。它类似于 Next.js 和 Gatsby，而不是类似 React 这样的客户端框架。最基本的，你可以在.astro文件中定义 HTML、CSS 和 JS，这是一个 HTML 模板文件(但不仅仅是模板)。这个文件在构建时或每次请求时都会渲染成一个 HTML 文件，具体取决于你的渲染策略。

jsx 复制代码

---
const message = "Hello, world!"
---
<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <h1>{message}</h1>
  </body>
</html>

简单概括

Astro 真正出色的地方在于，它具备构建网站所需的一切。并且以一种现代且简单的方式实现。它并不花哨或前沿，但是一切都是那么直接，不需要额外的心智负担，它就是很管用。我认为维护者做出了非常出色的努力来保持其"小而美"。

我的博客，以及 Lucia 的文档都是用 Astro 构建的。使用 Astro 相当愉快。

强大的客户端 JS 支持

Astro 允许你在.astro文件中导入大多数主流框架的组件。React、Vue、Svelte、SolidJS、Preact、Alpine、Lit，它们全部都可用！你可以传递 props 和 children，甚至可以配置它们的渲染方式(SSR 和 CSR)以及如何处理 hydration(加载时、可见时或者完全静态)。

jsx 复制代码

---
import ReactComponent from "@components/react.tsx"
import SvelteComponent from "@components/Svelte.svelte"
import VueComponent from "@components/Vue.vue"
---

<ReactComponent/>
<SvelteComponent message="hello"/>
<VueComponent>
  <p>Some static HTML</p>
</VueComponent>

但是 Astro 中一个被低估的部分是<script/> ------ 它同时支持 TypeScript 和 NPM 模块！事实上，由于这个原因，我写很多客户端逻辑时会选择常规的 script 标签而不是 UI 组件。

jsx 复制代码

---
---
<script>
    import { fn } from "./local";
    import package from "some-package";

    const t: string = fn();
</script>

不仅仅是静态的

尽管 Astro 的主要关注点是静态内容，但它实际上有相当不错的服务端特性，包括 API 路由、中间件和处理 cookie 的 API。它和现有的框架水平相当，甚至更好。但它没有像 React 服务器组件的 form action 那样魔术功能。归根结底，你只是在构建一个基本的 HTTP 服务，Astro 没有隐瞒这一点;它只是改善了体验。

jsx 复制代码

// pages/api.ts

export const GET: APIRoute = async context => {
  const user = context.locals.user; // 在中间件中填充的对象
  const query = context.url.searchParams.get('q');
  const preference = context.cookies.get('preference');
  // ...
  return new Response();
};

通过适配器，你可以将你的网站部署到任何你想要的地方，包括 Node.js、serverless 平台和 Edge (运行在全球各地服务器上的 V8 运行时)。

`.astro`文件

.astro文件不仅用于表达页面，它们也是组件。你可以把它们导入为组件，并像任何其他组件系统一样传递 props 和 children。

jsx 复制代码

---
import AstroComponent from "@components/Astro.astro"
---

<AstroComponent message="hello">
  <p>Some static HTML</p>
</AstroComponent>

它甚至支持 JSX！不过我还是比较喜欢像 Solid.js 中那样有工具组件来处理控制流。

jsx 复制代码

---
const posts = [{
  title: "Why you should use TypeScript",
  href: "/posts/1",
}, {
  title: "Why you should avoid TypeScript",
  href: "/posts/2",
}]
---

{posts.map(post => {
  return <a href={post.href}>{post.title}</a>
})}

其他小特性

内置 markdown 和 MDX 支持
内置代码块和语法高亮
Tailwind 插件
强大的插件 API
动态设置 HTML 类的指令
RSS 包
图片优化

极好的社区

Astro 社区可能是 Web 开发中最冷静、最友好的社区之一。他们不关心你喜欢 React 还是 Svelte，TypeScript 还是 JavaScript，纯 CSS 还是 Tailwind，人人生而平等。文档也是业内最佳，你可以看到他们付出了多少努力。而且它还有一个非常大的本地化团队。文档支持所有主要语言，包括日语，我也向社区贡献了一些 PR 来出一份力。

最后，所有的维护者都非常出色并且超级活跃，大赞编译器、文档和语言服务器团队！

参考来源：pilcrow.vercel.app/blog/astro
首发于公众号前端从进阶到入院，作者 ssh，工作 6 年+，阿里云、字节跳动 Web infra 一线拼杀出来的资深前端工程师 + 面试官，非常熟悉大厂的面试套路，Vue、React 以及前端工程化领域深入浅出的文章帮助无数人进入了大厂，关注后回复「指南」，获取高级前端、算法学习路线，是我自己一路走来的实践。

Astro，你真的值得试试……

什么是 Astro?

简单概括

强大的客户端 JS 支持

不仅仅是静态的

.astro文件

其他小特性

极好的社区

`.astro`文件