前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~

Hello，大家好，我是 Sunday。

今天咱们来看一个还在 测试阶段 就已经有了 4.3K star 的元框架项目，它就是 SolidJS

元框架是指：在前端领域中涌现出的更高级别的框架或工具，它不是单一的框架，而是由多个框架或工具组合而成，旨在简化前端开发流程

SolidJS 提供了很多通用的组件，比如：数据库、服务器、前端、捆绑器、数据获取/变更、缓存和基础设施。并且包含了：客户端渲染 (CSR)、服务器端渲染（SSR）、流式SSR、静态站点生成（SSG） 等渲染逻辑。

SolidJS 到底是什么？

SolidJS 拥有以下功能集：

• 细粒度的响应性：由于 SolidStart 是一个 SolidJS 元框架，因此它受益于 SolidJS 提供的细粒度响应性。
• 同构、嵌套路由：无论页面是在客户端还是服务器上呈现，都编写相同的路由。路由嵌套提供了简化应用程序逻辑的父子关系。
• 多种渲染模式：SolidStart 可用于创建 CSR、SSR、流式 SSR 或 SSG 应用程序。
• 命令行界面 (CLI) 和模板：使用初学者快速启动并运行。
• 部署适配器：SolidStart 提供适配器来支持部署到你最喜爱的平台 - Netlify、Vercel、AWS 和 Cloudflare 等。

SolidJS 的核心概念

SolidStart 由五个基本概念组成：

• Solid：提供渲染抽象的视图库。
• Vinxi：协调器，决定每个运行时和代码的位置。
• Vite（Vinxi 内）：用于优化代码以在不同运行时执行的捆绑器。
• Nitro（Vinxi 内）：由 Nuxt 团队创建的不可知论 Web 服务器，基于 h3 和 Rollup。
• Seroval：数据序列化器，将数据从服务器连接到浏览器并返回。

01：Solid

Solid 作为渲染库拥有非常强的渲染性能和逻辑抽离的能力。

它使用 JSX 并具有与 React 非常相似的语法，但在底层，它以完全不同的方式运行。让开发人员更接近 DOM，同时仍然提供在开发环境中提高工作效率所需的人体工程学。捆绑包大小仅为 3Kb，即使对于大多数静态站点来说，它也是一种选择。例如，许多人在需要时使用 Solid 为他们基于内容的 Astro 网站带来交互性。

Solid 还带来了其他的编码方案、内置控制流组件、高质量的状态管理和完整的 TypeScript 支持。

02：Vinxi

Vinxi 是一个 SDK（软件开发套件），它带来了一组强大的基于配置的工具来创建全栈应用程序。它在底层构建了 Nitro 来建立 Web 服务器，并利用 Vite 来捆绑组件。它受到 Bun App API 的启发，通过一个非常声明性的接口工作，通过为每个运行时设置路由器来实例化应用程序。

例如：

import { createApp } from "vinxi";
import solid from "vite-plugin-solid";

const resources = {
    name: "public",
    mode: "static",
    dir: "./public",
};

const spa = {
    name: "client",
    mode: "build",
    handler: "./app/client.tsx",
    target: "browser",
    plugins: () => [solid({ ssr: true })],
    base: "/_build"
}

const server = {
    name: "ssr",
    mode: "handler",
    handler: "./app/server.tsx",
    target: "server",
    plugins: () => [solid({ ssr: true })],
}

export default createApp({
    routers: [resources, spa, server],
});

03：Vite

没错！Solid 支持 Vite。它完全基于 TypeScript，这使得它可以轻松地通过使用库或框架进行扩展，并且拥有足够大的用户群来保证其多功能性。Vite 与许多框架配合使用并已成为事实上的工具，例如 Astro、Vue、Preact、Elm、Lit、Svelte、Nuxt、Analog、Remix 等。

04：Nitro

Nitro 本身就是一个框架，本身是用 TypeScript 编写的，可供每个元框架用作基础。它提供了一组强大的工具和 API 来管理缓存、路由和 tree shanking。它是任何基于 JavaScript 的项目构建服务器的快速基础。Nitro 具有高度可扩展性，可轻松集成到 DevOps 和 CI/CD 管道中，注重安全，功能强大，并拥有丰富的适配器集，使其可部署在大多数（如果不是全部）主要供应商平台上。

将 Nitro 视为扩展，可以让 Vite 更易于构建且更灵活。它解决了 Vite 中需要解决的大部分运行时级别的问题。

05：Seroval

得益于 Seroval，SolidStart 能够安全高效地跨越序列化边界。资源序列化可以说是全栈框架最重要的特性——没有它，后端和前端配合根本无法顺利工作。

除了资源序列化之外，SolidStart 还可以使用服务器操作。直接从文档中，这就是我们如何查找服务器操作（请注意"use server"允许 Vinxi 将代码放在正确位置的指令。

需要注意

目前 SolidJS 依然处于测试阶段，但是依据它目前所提供的理念，在未来它或许可以提供出更加亮眼的功能，从而优化我们的开发体验。