Web 应用Web Application可以按照架构模式、功能用途、交互方式、技术栈等多个维度进行分类。下面给你一个清晰、常用的分类体系一、按架构 / 技术模式分类1️⃣ 静态 Web 应用Static Web App由HTML、CSS、JS 组成不依赖服务器端动态渲染常部署在 CDN如 GitHub Pages、Vercel示例企业官网、文档站点、博客✅ 优点快、简单、成本低❌ 缺点交互和业务逻辑有限2️⃣ 动态 Web 应用Dynamic Web App页面内容由服务器动态生成常见技术JSP、ASP.NET、PHP、Thymeleaf示例早期门户网站、管理系统✅ 优点SEO 友好、简单直接❌ 缺点耦合高、交互体验一般3️⃣ 单页应用SPASingle Page Application只加载一个 HTML 页面后续通过 JS 动态更新前端框架React、Vue、Angular示例Gmail、Notion、钉钉 Web 版✅ 优点流畅、接近原生体验❌ 缺点首屏慢、SEO 需额外处理4️⃣ 多页应用MPAMulti Page Application每次操作可能跳转新页面传统 Web 应用典型形式示例电商网站、新闻站✅ 优点简单、SEO 好❌ 缺点交互不如 SPA 流畅5️⃣ PWAProgressive Web App渐进式 Web 应用具有离线能力、可安装、推送通知使用 Service Worker Manifest示例Twitter Lite、星巴克 PWA✅ 优点接近原生 App 体验❌ 缺点兼容性、开发复杂度6️⃣ SSR / SSG / ISR 应用现代前端架构SSR服务端渲染Next.js、NuxtSSG静态生成构建时生成 HTMLISR增量静态再生✅ 优点SEO 性能兼顾❌ 缺点架构复杂二、按功能 / 用途分类类型说明示例企业 Web 系统OA、ERP、CRM用友、钉钉管理后台电商平台商品、订单、支付淘宝、京东内容管理系统CMS内容发布与管理WordPress、Drupal社交 / 社区用户互动微博 Web、知乎在线工具实用功能在线 PS、JSON 工具教育 / LMS在线学习慕课网、学堂在线数据可视化平台图表、大屏监控平台、BI 系统SaaS Web 应用多租户服务Notion、Figma Web三、按前后端关系分类1️⃣ 前后端不分离后端渲染页面JSP / Thymeleaf传统 Java / PHP 项目2️⃣ 前后端分离后端 APIREST / GraphQL前端独立部署当前主流方式四、按访问方式浏览器 Web 应用最常见Web 移动适配响应式Web App 可被“添加到桌面”内网 Web 应用Intranet五、按用户规模与部署方式个人 / 小型项目企业内部系统互联网级平台私有化部署 Web 系统云原生 Web 应用K8s 微服务总结常用对照✅现代 Web 应用 ≈ 前后端分离 SPA/PWA API 后端 云部署
