Astro 使用体验

[vivipure]

介绍

Astro 是 snowpack 的作者开发的前端框架，支持多种组件化框架。提供SSG,SSR等能力。

开始

npm create astro@latest

添加模块

solid 可以通过命令直接添加模块,例如引入 solid-js

npm astro add solid

当然也可以手动引入 solid-js和@astro/solid-js,然后在 astro.config.mjs中引入

import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js'

export default defineConfig({
  integrations: [ solid()]
});

使用组件

现代的开发框架都支持组件开发，astro自身支持 astro组件，也支持.tsx,.vue,.svelte等组件

甚至组件和组件之前可以各种嵌套。

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.vue';
import CodeEditor from '../components/CodeEditor'
---
<Layout>
   <main>
         <Card />
         <CodeEditor />
   <main>
</Layout>

[vivipure]

客户端指令

由于Astro的主要功能还是提供SSG, 因此开发组件时，很多功能性组件需要标识组件的加载优先级

默认情况服务端渲染生成的内容不会和浏览器进行水合，仅在浏览器进行展示。

client:load

优先级高

在页面加载时，加载和hydrate(水合)组件

client:idle

优先级中

空闲时加载，利用 requestIdleCallback 进行加载

client:visible

优先级低

当页面进入到用户视角时才进行加载

client:media

优先级低

媒体查询，当页面处于对应屏幕尺寸时才进行加载

<SidebarToggle client:media="(max-width: 50em)" />

client:only

和client:load加载时机类似，页面加载时进行加载。差异在于使用浏览器进行渲染，不进行SSR。 在使用该指令时需要显示的指定渲染的框架，否则浏览器渲染时不知道如何渲染。

<SomeReactComponent client:only="react" />
<SomePreactComponent client:only="preact" />
<SomeSvelteComponent client:only="svelte" />
<SomeVueComponent client:only="vue" />
<SomeSolidComponent client:only="solid-js" />