Day10 - Astro Series: UI framework integration

Astro 系列第十日：整合 UI 框架

@ Astro

一个漂亮的渐变背景上面有一句标题：「整合 UI 框架」

前言

之前提到如何在 .astro 格式中添加客户端 JavaScript 使组件具备交互性。Astro 最吸引人的特点之一就是可以将各大 UI 框架整合到组件中，享受不同技术及其生态带来的便利和好处。本章将从安装与整合开始，示范制作一个 React 组件。

在 Astro 中使用 UI 框架

安装

Astro 内建 astro add 指令可以全自动化地安装官方支持的整合功能🔗，其中就包含了像是 React、Vue、Svelte……等各大框架。

让我们先从安装 React 开始：npx astro add react，过程中自动安装所做的任何更动都会显示在终端中，只需要按 y 执行下一步很快就能完成安装。

# Astro 将会自动安装
Astro 将会执行以下指令：
如果跳过这一步，你随时可以在之后重新执行。
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ npm install @astrojs/react @types/react-dom@^18.0.6 @types/react@^18.0.21 react-dom@^18.0.0 react@^18.0.0  │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯


Astro 将会在专案设定档中做以下更动:


 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import react from "@astrojs/react";           │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [react()]                     │
 │ });                                           │
 ╰───────────────────────────────────────────────╯


Astro 将会对 D:\USER\Desktop\nebulous-nova\tsconfig.json 做以下更动


 ╭ D:\USER\Desktop\nebulous-nova\tsconfig.json ╮
 │ {                                           │
 │   "extends": "astro/tsconfigs/strict",      │
 │   "compilerOptions": {                      │
 │     "jsx": "react-jsx",                     │
 │     "jsxImportSource": "react"              │
 │   }                                         │
 │ }                                           │
 ╰─────────────────────────────────────────────╯

创建 jsx 文件

现在就可以在 src 中任何地方创建 jsx 文件并且开始撰写 React 组件。并且在需要时引入进 Astro 组件当中：

---
import Counter from '../components/Counter.jsx
---
<!-- 只会在服务器端渲染静态内容 -->
<Counter />

预设所有框架组件只会在服务器端渲染并且没有任何的客户端互动，我们需要特别标注该组件需要采取怎样的渲染时机，使用「Client 指令🔗」，才能通过 Hydration 或是完全客户端渲染让组件具备响应性，以下是一些预设的指令：

<!-- 标注组件要渲染的时机 -->
<Component client:* />
  • client:load：高优先级，可用于需要立即加载的组件，会尽可能快速地加载并执行 Hydration。
  • client:idle：中优先级，当页面加载完成时才开始加载并执行 Hydration。
  • client:visible：低优先级，当组件出现在画面中才开始加载并执行 Hydration。
  • client:media：低优先级，当画面在特定画面尺寸下才开始加载并执行 Hydration。
  • client:only：跳过服务器渲染，直接在客户端渲染该组件。
---
// 示例：在同一个 Astro 组件中混合多个 UI 框架的组件
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

同时整合多个 UI 框架在同个 Astro 组件当中是可行的，但是必须留意整合多个使用 JSX 的框架（React, Preact, Solid）时就必须要透过设定不同框架使用的 JSX 所在的位置，Astro 才知道怎么渲染：

import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import solid from '@astrojs/solid-js';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';


export default defineConfig({
  // 整合不同框架支持各式各样的元件
  // 如果只使用一个使用 JSX 的框架的话则无需设置 `include` ！
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
    svelte(),
    vue(),
  ],
});

通常会建议再创建一个以框架为名的资料夹，并且把所有相关的档案放到该位置来分类。

总结

在以静态网页为主的场合下，使用 Astro 自创语言其实已经绰绰有余了，但如果要额外添加客户端互动性，或是只是单纯想撰写其他熟悉的 UI 语言，都可以非常轻松地整合到 Astro 专案之中！

延伸閱讀

@astrojs/react🔗 - Astro 文档