经常迷惑于各种前端技术，有了js/html/css三件套，但又有React/Angualar/Vue等各种技术，新技术框架层出不穷，搞得人晕头转向，今天咱们就来捋一捋。

静态网页/网站

静态网页是存放在服务器中的HTML文件，它们是提前生成、渲染好的，用户在请求时直接返回准备好的页面。

静态网站生成器是一种工具，用于从文本文件（如Markdown）创建静态HTML文件。它们不依赖于数据库或服务器端处理，生成的网站包含固定内容，每个页面都是在构建时生成好的。这些生成器通常支持主题、插件和模板，使得自定义网站变得简单。

特点

• 服务器依赖：静态网站生成器不依赖于服务器端语言（如PHP、Python等）或数据库。而传统的Web前后端框架（如Express）通常需要服务器端处理和数据库支持。
• 性能：静态网站加载速度通常更快，因为它们只包含固定的HTML、CSS和JavaScript文件，没有数据库查询或服务器端渲染的延迟。
• 安全性：静态网站由于没有数据库或服务器端脚本，因此相对更安全。
• 易于部署：静态网站可以在任何标准的Web服务器上托管，甚至可以使用CDN进行分发，部署过程简单。Github Page为每个用户提供了免费的静态网站托管服务，便于搭建个人博客。

常见框架

1. Jekyll: 一款Ruby语言编写的静态网站生成器，尤其适合与GitHub Pages结合使用，广泛用于个人博客、项目文档。
2. Gatsby: 基于React的现代静态网站生成器，适用于构建复杂的动态网站和应用程序，如电子商务站点、内容聚合站点。
3. Next.js: 虽然主要是一个React框架，但它提供静态网站生成的能力，适合创建SEO友好的Web应用。
4. VuePress: 由Vue.js驱动的静态网站生成器，特别适用于编写技术文档和博客。
5. Pelican: 使用Python编写，适用于博客和个人网站的构建。
6. Hugo：用Go编写的静态网站生成器，快的页面渲染速度，优化了大型网站的构建过程。
7. Hexo：使用Node.js，支持多种模版引擎，例如EJS、Pug，有丰富的社区主题可供选择，易于安装。

这些生成器一般用于创建个人或公司博客、文档站点、营销网站、简历、产品展示页等，特别是当内容不经常改变时非常有效。并且使用起来方便，一般不需要懂代码，仅专注于书写内容即可，操作简单。

总结来说，静态网站生成器与传统的Web前后端框架最大的区别在于它们生成的是静态内容，这在部署、性能、安全性方面提供了优势，但同时也限制了动态内容处理的能力。

动态网站

在用户访问时进行渲染、数据库读写，动态生成HTML并将内容返回给客户端。这个过程中涉及到前后端的交互，前端负责页面的布局、样式等内容的呈现。而后端负责处理数据存储和管理、与客户端通信并处理请求、**用户认证与授权、集成第三方服务(网关、电子邮件等)**以及一些性能优化操作。因此下面分成两部分来进行梳理。

前端框架

前端框架是一种工具，它为开发人员提供了一组预先编写好的代码和库，以帮助构建高效、互动且功能丰富的网站或网页应用程序的前端部分。前端通常指的是用户在网页浏览器中看到和与之交互的部分，包括布局、设计、图像、文本和表单等。

特点

1. 结构化的代码组织：前端框架提供了组织HTML、CSS和JavaScript代码的标准方式，使得代码更加模块化和可重用。
2. 快速开发：由于包含了大量预先编写的代码，开发人员可以快速构建复杂的界面和功能，减少重复编写代码的工作。
3. 响应式设计：很多前端框架提供了响应式设计的功能，使网站能够适应不同大小的屏幕和设备。
4. 丰富的界面组件：提供各种用户界面组件，如按钮、表单、导航栏等，方便开发人员实现复杂的用户界面。
5. 互动和动态功能：支持创建交互式元素和动态内容，提高用户体验。

流行的前端框架

1. React（由Facebook开发）：用于构建用户界面的JavaScript库，特别强调组件化和状态管理。
2. Angular（由Google支持）：一个完整的前端框架，提供了从模板到测试的一系列功能。
3. Vue.js：一个轻量级的框架，以其简单易学和灵活性著称。
4. Bootstrap：一个以CSS为中心的框架，重点是响应式设计和网页组件。

这些框架大大简化了前端开发工作，使开发人员能够专注于创建具有吸引力、交互性和良好用户体验的Web应用程序。在选择框架时，通常会考虑项目的特定需求、团队的熟悉度以及框架的社区支持和生态系统。更具体的框架对比和讨论见https://juejin.cn/post/6844904200556511246，这里不再展开。

示例

下面以一个例子来说明使用前端框架前后的开发差异，如果我想再页面上添加一个按钮。使用原生的js代码如下

<!-- 创建一个自定义按钮 -->
<button id="nativeButton">Native JS Button</button>

<style>
  #nativeButton {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
  }

  #nativeButton:hover {
    background-color: darkblue;
  }
</style>

<script>
  document.getElementById("nativeButton").addEventListener("click", function() {
    alert("Button clicked!");
  });
</script>

而使用Bootstrap组件，只需要两行。并且不用担心跨浏览器出现的兼容性问题。

<!-- 引入Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- 创建一个Bootstrap按钮 -->
<button type="button" class="btn btn-primary">Bootstrap Button</button>

因此使用构建好的前端框架能够帮助我们快速的设计页面，提高开发效率。对于样式更高的需求可以通过添加自定义的css来解决。

后端技术

Rust

1. Actix-Web: 性能强劲，为构建高效的Web服务提供了简单的异步编程模型。
2. Rocket: 提供易用性和可扩展性，适合快速开发。
3. Tide: 聚焦于快速和简洁的API，使用简单。

前端框架协作: 与React, Vue.js或Angular等前端框架搭配使用效果良好。

Python

1. Django: 功能全面，包括ORM、模板引擎、路由等，适合快速开发大型应用。
2. Flask: 轻量级，灵活性高，适合小型到中型应用。
3. FastAPI: 基于标准Python类型提示的现代、快速(高性能)Web框架。

前端框架协作: 可以与Angular, React或Vue.js等现代JavaScript框架结合使用。

Go

1. Gin: 轻量级、性能优越，适合构建RESTful API。
2. Beego: 遵循MVC模式，提供了一个全栈框架。
3. Echo: 高性能、可扩展，简化HTTP服务器的构建。

前端框架协作: 适合与Vue.js, React或Angular等配合使用。

Java

1. Spring Boot: 提供了快速开发大型应用的全栈解决方案。
2. Quarkus: 专为GraalVM和HotSpot优化，提供了低内存占用和快速启动的Java堆栈。
3. Micronaut: 为构建模块化、易于测试的JVM应用程序提供了现代、JVM原生全栈框架。

前端框架协作: 与React, Angular或Vue.js等前端框架结合，能提供良好的全栈体验。

总结

将前端框架和常用的后端技术组合起来，便得到了各种各样的开发方案，也就是动态网页技术。总结见下表

这个表格涵盖了多种不同的后端技术栈和它们通常与之搭配的前端框架。选择特定技术栈应基于项目需求、团队熟悉度以及项目的特定目标。例如，如果项目侧重于前后端分离，那么选择如React或Vue.js这样的前端框架，并与任意提供RESTful或GraphQL API的后端框架搭配使用将是一个不错的选择。如果项目侧重于快速开发和部署，则可能选择像Django或Spring Boot这样的全栈框架。对于需要桌面应用的项目，Tauri则是一个有趣的选择。

以上便是个人总结，如有不对的地方请大家及时提建议纠正，感谢。