网站开发技术栈，一次理清语言、框架、工具与云服务

刚接触网站开发时，经常会看到这样的介绍：

这个网站用 TypeScript、React、Next.js、Tailwind CSS、Supabase 和 Stripe 开发，部署在 Cloudflare。

这些名字放在一起，并不代表它们是六七种相互竞争的框架。它们分别负责写逻辑、组织界面、处理页面、设置样式、保存数据、收款和部署。

理解技术栈，先问两个问题：它属于哪一类？它解决什么问题？

先按职责分组

类别	常见技术	主要负责什么
页面基础与语言	HTML、CSS、JavaScript、TypeScript	描述内容、样式和逻辑
界面库与框架	React、Vue、Angular	组织组件，让界面随数据变化
样式工具与组件库	Tailwind CSS、MUI、Element Plus	更快地完成外观和常见控件
开发与构建工具	Vite、Webpack、Turbopack	运行开发环境、转换和打包代码
网站与应用框架	Next.js、Nuxt、Astro	组织页面、路由、渲染与服务端能力
运行时、后端与数据	Node.js、Express、PostgreSQL	执行服务端代码、处理请求、保存数据
云平台与第三方服务	Vercel、Cloudflare、Supabase、Stripe	托管网站，提供数据、身份认证或支付能力

这是一张职责地图，不是严格的继承树。框架可能内置构建工具，云平台也可能同时提供计算和数据库服务。同层经常需要选型，不同层通常相互配合；也并非每层都必须引入一个产品。

HTML、CSS、JS、TS：写网页的基础

浏览器中的普通网页，主要由三种基础技术构成：

• HTML 是标记语言，描述内容的结构和语义，例如标题、段落、链接和表单。
• CSS 是样式表语言，控制颜色、字体、布局和不同屏幕下的呈现。
• JavaScript（JS） 是编程语言，处理交互与逻辑，例如点击按钮、筛选列表和请求数据。

可以把一个登录表单拆开看：HTML 定义输入框，CSS 决定它的样子，JS 处理提交时的交互。这也是 MDN 入门教程采用的基础划分。

TypeScript（TS）是在 JavaScript 基础上增加类型系统的语言。 它帮助编辑器和检查工具提前发现问题，例如把字符串误当成数字。浏览器通常执行的是去掉类型、经过转换的 JavaScript，而不是直接执行 TypeScript 源码。参见 TypeScript 官方入门。

因此，TS 与 JS 不是两套互不相干的网页技术；React、Vue 等也没有取代 HTML、CSS、JS，只是让我们用更有组织的方式编写界面。

React、Vue、Angular：组织界面；UI 库：提供现成控件

页面复杂以后，手动修改每个元素会很繁琐。组件化工具允许我们把导航栏、商品卡片、购物车拆成可复用的组件，再根据数据更新界面。

技术	更准确的定位	主要特点
React	构建用户界面的库	聚焦组件与界面更新，路由等能力通常由其他库或上层框架提供
Vue	渐进式 JavaScript 框架	用模板、组件和响应式数据组织界面，可按需要引入配套工具
Angular	功能较完整的 Web 框架	以 TypeScript 为基础，官方体系提供路由、表单、依赖注入等能力

日常交流会把三者统称为“前端框架”，但它们的职责范围并不完全相同。理解边界比争论称呼更有用。

React 中常见的 JSX，是允许在 JavaScript 中描述界面的语法扩展；TSX 则是在 TypeScript 中使用 JSX。它们不是另一套框架，也不等于浏览器直接读取的 HTML。

UI 组件库又是另一层。React 提供构建组件的机制，而组件库提供已经做好的按钮、弹窗、表格等：

生态	常见组件库
React	MUI、Ant Design
Vue	Element Plus
Angular	Angular Material

选组件库时要看它面向哪个生态，不能因为外观相似就直接混用。

还有两个经常被混在一起的名字：

• Tailwind CSS 是以工具类为主的 CSS 框架，通过组合类名设置样式；它本身不是 React 组件库。
• shadcn/ui 提供可引入项目、由你直接修改的组件源码和分发工具。它与通常作为依赖安装、升级的组件库，在代码所有权和维护方式上有所不同。

所以，React + Tailwind CSS + shadcn/ui 是一种分工：React 管组件逻辑，Tailwind 管样式，shadcn/ui 提供组件起点。

Vite：把开发代码变成可运行的产物

Vite 是开发服务器与构建工具。 开发时，它提供本地预览和热更新；构建时，它协调代码转换、资源处理和生产打包。

它可以服务于 React、Vue，也可以用于不使用界面框架的项目。因此：

• React + Vite：React 负责界面，Vite 负责开发与构建。
• Vue + Vite：Vue 负责界面，Vite 仍然做同一类工作。

Vite 不负责替你设计页面、保存用户数据，也不等于网站上线后的业务服务器。 它能启动本地服务器，不代表构建后的站点需要继续运行 Vite。

Webpack、Turbopack 也属于构建工具范畴，但“构建工具”是大类：有的更聚焦打包，有的还整合开发服务器和插件流程。项目往往通过框架间接使用它们，不必自己逐个拼装。

另一个细节是：能转换 TypeScript，不等于已经检查类型。 Vite 本身只做转换，类型检查需要 tsc、vue-tsc 等工具或项目脚本单独承担。参见 Vite 的 TypeScript 说明。

Next.js、Nuxt、Astro：组织整个网站

界面组件之外，网站还需要决定“哪个网址显示哪个页面”“数据在哪里读取”“页面何时生成”。应用框架会为这些问题提供一套约定。

框架	与其他技术的关系	主要职责与侧重
Next.js	基于 React	整合路由、页面渲染、数据获取和服务端功能
Nuxt	基于 Vue，默认使用 Vite 构建	整合路由、渲染、自动导入和服务端功能
Astro	有自己的组件语法，可集成 React、Vue 等	侧重内容型网站，按需要为局部界面添加客户端交互

Next.js 与 React、Nuxt 与 Vue，都是建立在已有界面技术上的关系。用了 Next.js，依然在写 React；用了 Nuxt，依然在写 Vue。

Astro 不要求使用 React 或 Vue。它可以用自己的组件生成页面，也可以把 React、Vue 组件嵌入页面，并只为需要交互的部分加载相应的浏览器端代码。这类局部交互区域常被称为“岛屿”。

flowchart TD
  Next[Next.js] -->|基于| React[React]
  Nuxt[Nuxt] -->|基于| Vue[Vue]
  Nuxt -->|默认构建工具| Vite[Vite]
  Astro[Astro] -.->|可选集成| React
  Astro -.->|可选集成| Vue

图中实线表示基础或工具关系，虚线表示可选集成，不是执行顺序。

Next.js 也自带构建体系，例如 Turbopack，不需要因为用了 React 就再加一个 Vite。“Next.js 还是 Vite”实际上是在比较一套应用框架方案与一套更自行组装的开发方案。

顺便理清 CSR、SSR、SSG

这三个缩写描述的是页面如何生成，不是三种框架：

方式	主要页面内容何时、在哪里生成
CSR，客户端渲染	浏览器运行 JavaScript 后生成
SSR，服务端渲染	通常在请求到来时，由服务端生成 HTML
SSG，静态生成	在构建阶段提前生成 HTML，访问时直接提供

同一个框架可以支持多种方式，同一个网站也可以按页面混合使用。静态生成的页面仍然能通过 JS 实现搜索、评论等交互；服务端生成 HTML 后，也可以在浏览器中接上交互逻辑。

后端与云服务：代码在哪里运行，数据由谁管理

前端主要指用户浏览器中的界面与交互；后端处理可信的业务逻辑，例如权限验证、订单处理和数据写入。两者通常通过 API 通信，也就是约定好的程序接口。

这里要再分清三层：

• 运行时：例如 Node.js，让 JavaScript 在浏览器之外运行。它既能运行开发工具，也能运行后端程序，本身不是编程语言或 UI 框架。
• 后端框架：例如 Node.js 生态的 Express、NestJS，以及 Python 的 Django、PHP 的 Laravel、Java 的 Spring Boot，用于组织请求处理和业务逻辑。
• 数据库：例如 PostgreSQL、MySQL，负责持久化数据。SQL 是查询语言，数据库则是执行查询、管理数据的系统。

Next.js、Nuxt 等提供服务端能力后，小型应用可以在同一个项目里写前后端；复杂系统也可以独立部署后端。“全栈框架”不意味着数据库、权限规则和所有业务逻辑已经自动完成。

云平台与第三方服务，则承担其中一部分运行和维护工作。

Cloudflare：网络与应用部署平台

Cloudflare 是一组产品，不是某一种前端框架。DNS 用于域名解析，CDN 用于内容分发和缓存；Workers 可以运行服务端逻辑并提供静态资源，Pages 提供网站部署能力，R2 提供对象存储，例如保存图片和上传文件。可以结合 Cloudflare 网站应用架构说明理解这些分工。

因此，“用了 Cloudflare”可能只是用了 DNS，也可能把应用部署在 Workers 上，必须看具体产品。

Vercel、Netlify 也是常见的网站部署平台；AWS、Google Cloud、Azure 则提供更广的云基础设施。部署平台与框架是两类选择，实际搭配时仍要检查运行时和适配器兼容性。

Supabase：以 PostgreSQL 为基础的后端服务平台

Supabase 在 PostgreSQL 之外，还提供身份认证、文件存储、实时更新和函数等能力。它可以减少自行搭建通用后端设施的工作，但不负责代写你的业务规则。

“用 Supabase”与“用 PostgreSQL”不矛盾：前者是服务平台，后者是其数据库基础。Firebase 也常被归入后端服务平台，但具体数据模型与产品能力不同，不能当作完全等价的替换。

Stripe：支付与订阅服务

Stripe 负责支付相关能力：Payments 处理收款，Checkout 提供预构建的结账界面，Billing 管理订阅与计费。

它能与不同前后端技术组合。安装 Stripe 的 SDK，只是让应用更方便地调用服务，并不意味着支付能力全部运行在浏览器中。

使用托管服务后，仍要配置权限。需要保密的支付密钥、数据库管理凭据不能放进浏览器代码；涉及支付状态与敏感写入的操作，也不能只相信前端传来的结果。密钥的前后端边界可参见 Stripe API 密钥说明。

把名字放回一个具体项目

下面只是职责组合示例，并不要求每个网站都照搬：

网站需求	一种组合	分工
博客、文档站	Astro + CSS + Cloudflare Pages	生成内容页面、设置样式、托管静态产物
管理后台	Vue + TypeScript + Vite + Element Plus + 独立 API	组织界面、检查类型、构建、提供控件、处理业务
带登录和订阅的产品	Next.js + Tailwind CSS + Supabase + Stripe + Vercel	构建应用、设置样式、管理账号与数据、收款、部署

第三组方案中，Next.js 已经包含 React 和构建工具；Supabase 又包含 PostgreSQL。技术栈清单常省略这些间接依赖，所以清单短不代表没有使用它们。

开发中还会遇到 npm、pnpm、Yarn：它们是包管理器，负责安装依赖、管理版本和运行项目脚本。pnpm build 的具体工作由项目中的 build 脚本决定，不是 pnpm 自己完成了打包。

Git 记录代码版本；GitHub 等平台托管仓库、支持协作。Docker 打包应用及其运行环境。它们属于开发与交付流程，也不应与 React、数据库或云服务混为一类。

以后再看到陌生名字，可以按这条顺序辨认：它是用来表达代码、组织界面、加工代码、运行程序、保存数据，还是提供外部服务？ 把职责放对位置，就能看清哪些可以替换，哪些需要配合，以及自己的项目究竟需不需要它。