Published on 2025-02-01

SolidStart 概述与入门准备

主要内容：

• 什么是 SolidStart？介绍其定位、发展背景以及与 SolidJS 的关系。
• 与传统前端框架（如 React、Next.js）的对比。
• 为什么选择 SolidStart 开发生产级应用？

实践环节：

• 环境要求和开发工具简介。
• 简单的 Hello World 实例展示。

欢迎来到《SolidStart 全面进阶：从 0 到 1 构建生产级应用》系列的第一篇！本周我们将带大家初步了解 SolidStart —— 这个基于 SolidJS 的全新全栈框架。本文将介绍 SolidStart 的基本概念、背景及其优势，同时带你动手实现第一个 “Hello World” 小案例，为后续深入实战打下基础。

本教程将试图对基本概念和逻辑讲解清晰，这既是笔者的自我回顾，也是尽量适应对不同基础读者的考虑。

1. 什么是 SolidStart？

SolidStart 是一个专为 SolidJS 打造的全栈开发框架，它融合了现代前端与服务端渲染（SSR）的最佳实践，让开发者可以快速构建高性能、响应迅捷的 web 应用。与传统的前端框架相比，SolidStart 在以下几方面有着明显的优势：

• 极致性能：基于 SolidJS 的 fine-grained 响应系统，渲染性能和内存占用均处于行业领先水平。根据官网评测数据，solidjs的性能相对于react而言可谓遥遥领先。而从个人使用的体验而言，也是肉眼可见的提升。
• 无缝 SSR 与 CSR：内置对服务端渲染（SSR）的支持，可根据需求灵活切换到客户端渲染（CSR），适配不同场景。
• 简化开发流程：内置路由管理、数据预加载、状态管理等常用功能，降低了开发复杂度。
• 全栈的最佳实践：基于solidstart，实现前后端均使用ts/js实现，不必单独编写API，可以快速实现产品上线；
• 部署方便：solidstart部署便利，通过vinxi不仅仅实现在node环境上的部署，也可实现在deno上的部署。

2. SolidStart 的发展背景

在现代 web 开发中，如何在高性能和开发效率之间找到平衡，一直是技术选型的重点。随着 React、Vue 等框架的广泛应用，越来越多的项目开始关注服务端渲染以及静态站点生成（SSG）的优势。而 SolidJS 以其细粒度更新和极低的开销，迅速引起了开发者的关注。SolidStart 正是在这种趋势下应运而生，它不仅继承了 SolidJS 的高性能特点，还为全栈应用开发提供了一整套解决方案。

3. 为什么选择 SolidStart？

选择 SolidStart 的理由有很多，这里列举几点主要优势： • 性能优势：相比其他全栈框架，SolidStart 在页面渲染、数据响应速度上有着明显优势，非常适合对性能要求极高的项目。 • 开发体验：提供开箱即用的开发工具和丰富的内置功能，使得开发者可以专注于业务逻辑，而不用花费过多时间在底层配置上。 • 灵活扩展：无论是小型单页应用还是复杂的生产级系统，SolidStart 都能通过灵活的架构满足需求，支持服务端渲染、静态生成以及 API 集成。

4. 环境准备与 Hello World 实例

在正式动手之前，请确保你的开发环境中已安装以下工具： • Node.js（建议 LTS 版本） • 包管理工具（npm 或 yarn）

4.1 安装 Node.js

如果你还没有安装 Node.js，请前往官网下载安装包并完成安装。安装完成后，在终端中输入以下命令确认安装成功：

node -v
npm -v

4.2 创建 SolidStart 项目

官网提供了多种创建的方法。使用npm/pnpm/bun都可以快速安装。个人偏好使用pnpm。

pnpm create solid

在安装时，会有一些预设模板，此处建议可以从with-tailwindcss开始。这样可以通过语义描述来快速调整样式。如无特殊说明，后续的例子，都基于tailwindcss。

此处值得注意的是在创建的本质是从github上将代码下载至本地，所以若github访问出现问题，会提示错误something goes wrong。这时，请注意检查github的通讯（例如ping github.com）

4.3 运行 Hello World 示例

项目创建完成后，启动开发服务器：

pnpm dev

打开浏览器，访问 http://localhost:3000，你将看到默认的 “Hello World” 页面。这个简单的示例展示了 SolidStart 框架如何快速生成一个可运行的应用，为后续功能扩展提供了坚实的基础。任何的修改都会随时更新并体现。

如果希望在本地部署，当然，这绝大部分并不需要。可以通过pnpm build的方式来打包。这时，solidstart项目将会被打包，并部署。默认是在node环境中，也可以在deno中。本地打开时访问http://0.0.0.0:3000即可。

无论是开发服务器运行，还是生产环境部署，都非常快速。但实际上，正式环境的部署将更为迅速，绝大多数情况不需要pnpm build。在后续的分享中，会详细说明。

5. 小结与后续展望

在本篇文章中，我们了解了 SolidStart 的基本概念、发展背景以及选择它的原因，并通过 CLI 工具创建了一个简单的项目并运行了 Hello World 示例。接下来的文章中，我们将深入探讨项目结构、核心概念以及如何利用 SolidStart 构建更复杂的页面和交互。

下期预告：第二篇文章中，我们将详细讲解如何搭建开发环境、初始化 SolidStart 项目以及解读项目目录结构，敬请期待！