大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

高级前端‬进阶

今天给大家带来的是Astro vs. Next.js vs. Remix的比较，话不多说，直接进入正题。

前言

现代框架的引入对于快速构建网站来说是具有革命性意义的，许多这些框架都利用了 React 的强大功能来创建优秀的产品。但是，了解哪种框架最适合当前项目需求是必不可少的，但是前提往往需要对其进行深入研究。

本文将介绍 Remix、Astro 和 Next.js 这三个用于构建 Web 应用程序的流行框架，同时研究它们的相似之处、主要区别以及为什么应该在下一个 Web 应用程序中值得考虑它们。

1 什么是 Next.js？

Next.js 是一个基于 React 的开源框架，用于创建混合应用程序，使用 React 将服务器渲染的网页和静态生成的网页结合起来。

Next.js的作者将其描述为 React 项目的零配置、单命令工具链。Next.js 使开发人员能够使用 React 完成用户友好且功能强大的网站和应用程序创建。Next.js有一些开发者特别看重的优势，比如：

基于文件的系统路由支持包括服务器端渲染、预渲染的静态生成，以及在运行时更新或生成内容的增量静态重新生成ISR预取（Prefetching）自动代码拆分等等

这些特性使 Next.js 成为用于构建 Web 应用程序的最广泛使用的 React 框架之一。要创建 Next.js 应用程序，只需要打开终端，进入到存放应用程序的目录，然后运行以下命令：

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

接着执行如下命令即可:

npm run dev2. 什么是 Remix？

Remix 最初以付费订阅的方式提供后， 创建者于 2021 年 10 月宣布该框架开源。目前Remix在Github上已经有22.6K的star，1.8K的fork，超过22.3K的项目使用Remix，NPM周平均下载量24K左右。

技术上讲，Remix 是一个用于服务器端渲染 (SSR) 的 React 框架， 这意味着站点前后端都可以基于单个 Remix 应用程序创建， 数据在服务器上渲染并以最少的 JavaScript 提供给客户端。 与在前端获取数据然后在屏幕上渲染的普通 React 框架不同，Remix 在后端获取、组装数据并将 HTML 直接提供给用户。

Remix的具有以下明显特点：

简单直观的开发，最少的配置支持session和 cookie ;用于高效代码加载的动态导入嵌套路由灵活等等

要创建Remix应用，执行如下命令即可：

npx create-remix@latest --template remix-run/indie-stack blog-tutorial

然后执行如下命令，打开 http://localhost:3000即可访问应用程序。

npm run dev3.什么是 Astro？

Astro 是前端生态中的最新框架， Astro 建立在 React 之上，为 Web 应用程序提供更简化的方法，它使用孤岛架构而不是常用的单页架构。

孤岛架构（查看文末参考资料）鼓励在服务器端渲染的网页的小区域集中进行交互。 使用 Astro 构建的网站性能更高，并提供整体更加出色的用户体验。

孤岛架构：使用纯 HTML 和 CSS 为所有静态内容创建 Web 应用程序，然后添加动态内容或交互区域（孤岛），这些区域可以使用任何框架来添加交互性，框架只有在使用到它的页面上才会被下载，而不是在网站的初始加载中。

Astro的独特功能包括：

模板语言以及与框架无关：与框架无关的特性意味着 Astro 支持使用来自不同 JavaScript 框架（如 Vue、Svelte 等）的 UI 组件构建网页。在构建过程中将站点打包到静态 HTML： 这意味着使用 Astro 构建的网站在最终页面上几乎没有 JavaScript！

可以通过如下命令快速开始Astro开发：

npm create astro@latest// npm方法pnpm create astro@latest// pnpm方法yarn create astro//yarn方法4.Astro vs. Remix vs. Next.js

对比并不是为了证明Astro、Remix 和 Next.js中的哪一个框架更好或更快。而是能够更好的了解它们，以便能选择最适合的框架。 下面将聚焦性能、水合作用、用例和易用性等指标。

4.1 性能

Astro 专为速度而打造，因此速度很快。 孤岛架构方法有助于 SEO ，因此基于Astro的站点在搜索引擎上排名非常高。 Astro提供了出色的用户体验并减少了样板代码。 它还为样式支持提供了良好的基础，因为它支持大多数 CSS 库和框架。

通过在服务器上并行加载数据，Remix 拥有更快的数据获取速度。 Remix 支持服务器端渲染，这意味着它在服务器上预渲染页面。 使用 Astro，开发者可以获得一个静态打包的 HTML 文档，其中很少甚至没有 JavaScript，而 Remix 则不同。

Next.js 拥有静态构建和服务器端渲染功能。 Next.js 还带有各种开箱即用的方法来获取数据。 典型示例包括： ISR（增量静态重新生成）、CSR（客户端渲染）、SSG（静态站点生成）和 SSR（服务器端渲染）， Next.js还支持 CSS 框架和库。

4.2 水合作用

Hydration 是一种技术，通过这种技术，客户端的 JavaScript 可以将静态 HTML 页面转换为动态页面。 它允许用户在页面上看到渲染的组件，但带有附加的事件处理程序。 对于静态页面，水合作用发生在用户交互之前， 这会降低用户体验。

Astro ：通过称为部分水合作用的过程解决了这个问题。 部分水合是仅在需要时加载单个组件而将页面的其余部分保留为静态 HTML 的过程。 孤岛架构是这一过程的关键，因为它鼓励小区域的互动。Remix ：不支持部分水合。Next.js： 也不支持部分水合作用， Next.js 有对非 JavaScript 网站的实验性支持，但没有对 hydrating 组件的支持。4.3 用例构建单页应用程序：Next 和 Astro 非常适合构建单页应用程序， Remix 非常适合构建处理动态数据的站点。session和 cookie：session和 cookie 用于存储信息。 Cookie 在用户或客户端计算机上使用，而会话则同时存储在服务器和客户端上。 Astro 和 Next.js 不支持会话和 cookie，但Remix 可以。实时多用户站点：Next.js 和 Astro 非常适合构建组合网站（Portfolio Websites）和博客等静态站点，也包括处理身份验证等场景。 Remix 非常适合构建专注于动态数据的应用程序。 它仅支持服务器端渲染，因此不会在构建时打包到静态文件。CSS 支持：Astro 和 Next.js 提供了对 CSS 框架和库开箱即用支持。 Remix 中样式有点不同，不支持大多数样式框架。 但是，它使用 link 标签来链接 CSS 内置样式表。4.4 易用性

Next.js、Astro 和 Remix 的学习曲线都很平缓。 它们都是基于 React 构建的，熟悉React的开发者很容易学习 Next.js、Astro 和 Remix，同时文档健全，易于使用。

Next 带有用于引导 Next.js 应用程序的 `create-next-app` CLI 命令。 Astro 带有用于引导 Astro 应用程序的 `create astro@latest` 命令，而 Remix 带有用于 Remix 应用程序的 `create-remix@latest` 命令。

4.5 代码拆分

代码拆分将代码分成许多可以并行或按需加载的包。 这使开发者能够在延迟加载其余组件的同时尽可能少地发送 JavaScript。 Next.js、Astro 和 Remix框架都启用了代码拆分。 它们还提供开箱即用的路由支持。

4.6 集成和可扩展性

Next.js、Astro 和 Remix都是基于 React 构建的，这意味着都提供了对集成和插件的支持，从而能够扩展自己的能力。

Remix 和 Astro 作为前端生态系统的新成员，可能暂时无法提供相同的功能和集成，但是未来的支持应该不远，而Next.js 通过 next.config.js 文件提供广泛的可定制性和可扩展性。

4.7 开发热度

从Github的star数据来看：next（102K） > astro (28K) > remix（22K） ，但是考虑到astro项目创建才2年时间，能有这个热度已经着实不易。

从NPM的真实下载数据来看，next依然是一骑红尘，将astro、remix远远甩在后面，而remix和astro相差非常小。因此，从总体来看next依然深得开发者青睐。但是，正如前文所言，三者各有优势，大家可以根据自己的实际需求做出选择。

5.本文总结

本文主要和大家介绍 Astro vs. Next.js vs. Remix，以及各自特点，三者如何选择，同时引入了部分水合、孤岛架构等新内容。因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://www.commoninja.com/blog/astro-vs-next-js-vs-remix-a-detailed-comparison

https://www.patterns.dev/posts/islands-architecture

https://www.toutiao.com/article/7203250053299880452

https://www.npmjs.com/package/next

https://www.npmjs.com/package/remix

https://www.npmjs.com/package/astro