Astro成为TinaCMS的默认启动器

我们计划将Astro设为TinaCMS的默认启动器。

简而言之： Next.js启动器不会消失。最新的Astro启动器已经使用了无React的可视化编辑，一旦这种新路径在实际项目中有更多时间后，Astro将成为默认。

我们还没有更改默认设置。最新的Astro启动器已经可用，我们希望在将Astro作为新项目的主要路径之前，有更多人尝试它。

为什么选择Astro？

越来越多的TinaCMS用户选择Astro。启动器克隆最近已经超过了Next.js启动器，尽管Next.js仍然是默认的。我们在Discord和支持中也看到更多关于Astro的问题。这与我们的经验一致：Astro易于使用，适合许多人使用TinaCMS构建的网站，包括文档、博客、营销页面、变更日志和公司网站。

图：GitHub讨论中关于投资哪个框架的投票

图：当前一周冲刺期间的启动器仓库克隆

Astro也很快。它快速生成静态输出，平行渲染页面，并通过其<Image />组件进行图像优化，处理格式、响应式大小和延迟加载。它也有意保持轻量。你可以在需要时使用React、Vue或其他UI框架，但不必让整个网站表现得像一个React应用。

这为可视化编辑提供了更好的基础。编辑者仍然可以获得实时预览。访问者只需看到页面。

在最新的冲刺回顾的17分钟左右有更多背景信息。

我们改进了什么

之前的Astro设置使用React进行实时编辑。这是可行的，但这意味着一个网站可能会携带仅供编辑者使用的客户端代码。

这总是感觉比需要的要重。如果编辑UI仅供编辑者使用，访问者不应该担心它。

最新的Astro启动器现在使用无React的可视化编辑。页面仍然可以构建为静态HTML，编辑部分仍然可以在编辑者输入时更新。

对于编辑者来说，工作流程应该感觉相同。他们打开TinaCMS，点击页面上的内容，进行更改，并在发布前预览它们。内容仍然以Markdown或MDX的形式存在于你的仓库中，每次保存的更改仍然可以成为Git提交。

主要的变化在幕后。当编辑者打开TinaCMS时，页面上的可编辑区域与编辑器连接。当编辑者输入时，Astro仅重新渲染编辑的部分，并将草稿内容替换到预览中，而无需重新加载整个页面。

这适用于静态和服务器生成的页面。你的页面仍然可以按照项目需要的方式渲染。TinaCMS只需要刷新编辑者正在更改的部分。

在公共网站上，一个小的内联检查会检测页面是否在TinaCMS编辑器中。如果不是，它会立即退出。

给我看看代码！

页面的每个可编辑部分都注册为一个岛屿。岛屿知道如何获取其内容，渲染哪个组件，以及如何将获取的数据转换为组件属性。

// src/lib/islands.ts
import type { IslandRegistry } from '@tinacms/astro/experimental';
import BlogBody from '../components/islands/BlogBody.astro';
import { getBlog } from './data';

type BlogResult = {
  data?: {
    blog?: unknown;
  };
};

export const islands: IslandRegistry = {
  blog: {
    fetch: (_request, params) => getBlog(params.get('slug') ?? ''),
    component: BlogBody,
    wrapper: { tag: 'article' },
    propsFromData: (data) => {
      const result = data as BlogResult;
      return { data: result.data?.blog };
    },
  },
};

一个路由处理这些岛屿的预览更新：

// src/pages/tina-island/[name].ts
import { experimental_createIslandRoute } from '@tinacms/astro/experimental';
import { islands } from '../../lib/islands';

export const prerender = false;
export const ALL = experimental_createIslandRoute(islands);

在页面本身，你用<TinaIsland>包裹可编辑部分。当编辑者更改内容时，TinaCMS将草稿数据发送到岛屿路由，Astro渲染更新的HTML并应用草稿覆盖，预览将其替换到页面中。

岛屿路由不需要为每次更新重新读取内容存储。它从TinaCMS通过桥发送的草稿数据中渲染，并且更新是去抖动的，因此输入不会为每个按键发送请求。

以下是相同流程的序列图：

experimental_前缀是真实的。此功能在最新的Astro启动器中可用，但我们仍在完善API并测试边缘情况，然后再将Astro设为默认。

已经在Astro上运行Tina？

你不必立即迁移。现有的基于React的设置（@astrojs/react、client:tina和useTina()）仍然受支持和维护。

如果你想测试新设置，大多数迁移工作通常在自定义富文本组件中。任何在你的TinaMarkdown components映射中的内容可能需要从.tsx移动到.astro。

其他更改较小：安装@tinacms/astro，用<TinaIsland>替换useTina()，并更新你的数据加载器以适应新的预览流程。

准备好后，将你的项目与Astro指南进行比较。

其他框架

同样的方法也可以适用于其他框架。Nuxt或Eleventy适配器将遵循类似的形状：从编辑器发送草稿数据，在服务器上渲染更新的部分，然后将HTML替换到预览中。

我们还没有构建这些适配器，但我们很乐意审查PR。

接下来是什么

在Astro成为默认启动器之前，我们希望有更多实际项目使用新的可视化编辑流程。

试试Astro启动器：

npx create-tina-app@latest
# 选择Astro启动器

如果你用它构建了什么，请在Discord中分享URL。如果有什么感觉不对劲，请告诉我们。打开一个问题，发送PR，或在Discord中分享你发现的内容。