静态网页与动态网页

静态网页与动态网页

静态网页（Static Webpage）由预渲染文件（主要是 HTML, CSS 和 JavaScript）组成，内容会完全按照其在服务器上的存储方式交付给用户浏览器。每位访问者看到的内容都相同。历史上，HTML 是创建静态页面的基础语言，用于定义结构和内容。现代静态站点常使用 CSS 进行样式增强，并使用 JavaScript 实现客户端交互，有时甚至可以创建复杂的单页应用（Single Page Applications, SPAs）。

静态站点生成器（Static Site Generators, SSGs），例如 Next.js（用于静态导出）、Hugo、Jekyll 或 Gatsby，推广了一种方法：在构建过程中可以使用动态内容源来生成静态文件。这些站点随后通常部署到内容分发网络（Content Delivery Networks, CDNs）以获得最佳性能和伸缩性。

静态网站的优势

• 得益于预渲染文件和 CDN 分发，拥有卓越的性能和速度。
• 安全性增强，因为没有直接暴露数据库或服务器端处理。
• 高伸缩性和可靠性，易于由 CDN 处理。
• 更简单、通常更便宜的托管选项。
• 对版本控制（Version Control）友好，因为所有内容和结构都是文件。

静态网站的缺点

• 更新内容可能需要技术知识，或者如果未使用基于 Git 的 CMS，可能需要重新构建过程。
• 实时动态功能（例如用户评论、表单）通常依赖第三方服务或客户端 JavaScript。
• 如果没有复杂的客户端逻辑，不太适合针对单个用户频繁变化的高度个性化的内容。

上图通常说明了客户端（用户浏览器）向 Web 服务器请求网页，然后服务器提供静态文件（HTML, CSS, JS）。对于静态站点，这种交互是直接的。

一个基本的静态网站文件结构可能包括根目录下的 index.html 文件，用于样式表的 css 文件夹，用于 JavaScript 文件的 js 文件夹，以及用于资源的 images 文件夹。SSGs 通常有更复杂的源结构，这些源结构会编译成一个简单、可服务的输出文件夹（例如 public 或 dist）。

动态网页

动态网页（Dynamic Webpage）根据用户请求动态生成内容，通常从数据库或其他来源提取数据。这使得可以提供个性化体验和实时信息。服务器端编程语言（例如 Node.js, Python, PHP, Ruby, Java, Go）和框架（例如 Express.js, Django, Ruby on Rails, Spring）用于处理请求并构建发送给客户端的 HTML。

动态网站可以根据多种因素定制内容，例如：

• 用户登录状态和个人资料信息。
• 用户偏好或过往行为。
• 通过表单提交的数据。
• 来自外部 API 或数据库的实时数据。

动态网页对于电子商务网站、社交媒体平台、在线银行和内容管理系统（Content Management Systems, CMS）等应用程序至关重要。传统的 CMS，如 WordPress, Joomla 和 Drupal，从存储在数据库中的内容动态生成页面。无头 CMS（Headless CMS）（例如 Strapi, Contentful, Sanity）通过 API 提供内容，然后这些内容可以由动态前端消费，甚至用于构建静态网站。

例如，当您访问一个电子商务产品页面时，服务器会动态地从数据库中获取产品详情、价格和库存水平，以显示最新的信息。

下图通常描绘了一个动态网站架构：用户请求到达 Web 服务器，Web 服务器随后与应用服务器（运行服务器端代码）和数据库通信，以编译网页内容，然后再将其发送回用户浏览器。