太空人？让我们尝试一下-DEV365 开发者社区

演示：https://astro-rickandmorty.netlify.app/
代码：https://github.com/mirkosaugo/Astro-RAM

为什么这个项目

作为开发人员，我认为有时候遇到新挑战很重要，这不仅是因为我很乐意尝试新技术，而且还因为是一个更新我的技能并在那里发生的全景的绝佳机会。
今天，我想与您分享我关于一个名为Astro的新框架的反馈。
我不是一个好的作家，本文的目标不是生成内容，因此我将非常简短地关注某些框架原则，并解释我的演示以及最终的大纲优点和缺点。

。

什么是Astro？

主页的回报说，Astro是“建立快速，以内容为中心的网站的网络框架”。
在这个市场上这是非常新的，但我看到了很多热情。
Astro是一种新型的静态站点构建器，它将您的整个页面呈现到静态HTML，默认情况下从最终构建中删除了所有JavaScript。您可以使用您喜欢的JavaScript框架（React，Svelte，Vue等）中使用不同的UI组件撰写网站。

主要概念：岛屿

“ Astro Islands代表了前端网络架构的领先范式。”
该原理允许Astro在页面中提供较少的JavaScript，因为它仅在变得互动时加载了特定组件的一小部分代码（例如，当React组件在视口中输入时）。因此，没有巨大的未使用JavaScript的捆绑包大小。

，而且，正如该图显示的有时网站中的许多组件是纯静态内容，在这种情况下，您不想将未使用的JavaScript运送到用户中吗？（请考虑一个博客文章页面，也许用户单击Google链接并仅访问该页面，那么为什么要加载整个JS捆绑包？）。
Read more about Astro Islands.

该项目

好吧，现在让我们跳入真实情况。
我使用RickAndMortyAPI（我是IT的忠实拥护者），打字稿和尾风开发了这个项目。
您可以在我的github repo和this link的演示中找到代码。

在Astro组件中，您可以以2种不同的方式编写JS代码。在构建时间（服务器端）或在普通脚本标签内部编译的页面顶部，以进行客户端操作：

---
// Server Side (compiled on build process)
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';

const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0];
---
<!-- Markup -->
<h2>{randomUser.name.first} {randomUser.name.last}</h2>
<button id="interactivity">Click Me</button>

<!-- JS Client Side -->
<script>
  const button = document.getElementById('interactivity');
  button.addEventListener('click', () => {
    alert('Hello World!');
  });
</script>

在第一种情况下，该零件用于渲染页面和/或从另一个组件传递的prop时获取和显示内容。
这些组件的定向是静态的，因此您无法访问页面中的状态（例如，在菜单打开或关闭菜单时检测到组件外部）或React中的onClick的自定义事件处理，但是您可以使用经典的QuerySelector来进行触发事件并知道DOM的状态。

例子

Astro组件和框架组件（在我的情况下，反应）

Astro组件非常易于使用，但是您不能在框架组件中使用它（例如React）。
在我的情况下，当我创建一个静态组件<CharacterCard />时，我遇到了这一点我在主页上使用了这些卡片，其中内容来自构建时间的获取，并且是静态的。
但是，假设我想在React中创建一个搜索组件（您可以在主页中看到它），并在响应后循环所有项目。好吧，在这种情况下，我不能重复使用相同的组件渲染列表，因为您不能在框架组件中使用Astro静态组件。或者更好，您可以使用<slot />属性将HTML呈现在其中，但是您不能将道具传递给另一个Astro组件或循环，因此我认为它是毫无用处的。
Read more about Astro and UI Frameworks.

您会少货物吗？

例如，与nextJ相比，性能是无与伦比的，但实际上Astro始终在文档中导入JS代码，即使组件不在视图中或调用的脚本标签中时，也会在脚本标签中写入脚本标签。对于框架组件）。
因此，仅当DOM中的特定元素变得互动并被用户唤醒时，与Qwik一样。

结论

优点

易于理解和使用
与NextJS相比，更好的性能
您可以使用Astro
良好的社区：在Astro中有很多有用的插件（例如为懒惰图像生成模糊图像的插件）

缺点

您不能在Astro中将SSR页面和SSG页面组合在一起（例如，如果您想从搜索表格中读取参数，则需要在SSR中转换整个项目：这会给SEO带来一个大问题，因为您会失去的力量静态内容）
框架组件（喜欢）不能使用Astro（静态）组件
astro组件没有反应性，因此您无法管理状态
如果框架组件在客户端中：空闲或客户端：加载模式，则它们在加载页面时导入整个代码（我想在构建过程中具有client：load模式，然后将其作为客户端：可见模式）

最后，我认为和糟糕的词，Astro对小博客和静态/创意网站有益，但不适合Web应用程序，例如，互动是主要重点（例如：搜索，过滤，订购，，共享状态ECC ...），因为在这种情况下，您失去了Astro的真正力量。