前端模板网站是动态的还是静态的？
Posted
技术标签:
【中文标题】前端模板网站是动态的还是静态的？【英文标题】：Are frontend templated websites dynamic or static? 【发布时间】：2021-03-06 22:12:27 【问题描述】：我目前正在构建一个项目，它是一个调查创建者。我使用纯 Node.js 在后端创建了一个 Rest API，并且还在前端工作。 显然，渲染页面需要根据用户是否登录，当前的调查等来渲染。通常我使用 Express.js 并集成像 Pug 这样的模板引擎。然而，这个项目被设计成尽可能少的依赖，所以没有模板引擎。相反，当用户发送请求时，我只是将“静态”html 文件发送到客户端。然后，在前端，我使用模板字符串来“填写”HTML，如下所示：
document.querySelector('cta').insertAdjacentHTML('beforeend', `<div class="login" style=$isLoggedIn? "display: none;" : ""`); // etc.
这让我想知道我是否真的在构建一个动态网站。从技术上讲，我正在“动态”生成 HTML？
但Wikipedia definition 和 Udemy 课程似乎有相互冲突的消息，两者似乎都说动态网站是在服务器端生成的，如下所示：
When user hits request:
Backend builds template --> compiled to html --> file served to user
我的做法是这样的：
Html file served --> javascript generates html
术语在这里非常重要 - 我的网站是动态的还是静态的？
【问题讨论】：
您正在使用 JS 获取动态数据。这有点像单页应用程序。对此也有特殊的框架和库，例如 react、vue、angular。像你的例子一样的 VanillaJS 也很好，但是代码很聪明，否则你会慢慢变慢 【参考方案1】：TLDR：它是一个混合页面。如果您不关心 SEO，那么担心这些事情可能是多余的，只需以您方便的方式进行即可。
所以，你的想法是有效的，如果你给客户提供的页面内容在客户端永远不会改变——它就是静态页面。您可以显示/隐藏现有的预渲染元素（例如从 display: none; 更改 style 属性）。在运行时对影子 DOM 或附加 HTML 元素的任何操作都会将页面从“静态”提升为动态或混合页面。
接下来，如果您导航到网站上的新页面，并且您看到浏览器获取新的 .html 文件以供新页面显示，则它是静态页面的标记。但是，如果在客户端的网站脚本之后更改了获取页面的内容，则该页面不能再称为“静态”，更像是混合或动态页面。重新渲染同一个页面是单页面应用，所有页面都是纯动态页面。
我们关心的是静态页面、动态页面还是混合页面的重点是 SEO 优化。网络爬虫分析您的页面内容以检测您的页面是关于什么的，以便稍后在 Google、Bing 等中显示。爬虫可能（并且大多数情况下）会以一种对您来说有点意想不到的方式分析您的动态内容，因此您的一些目标受众会面临风险永远看不到您的页面。因此，如果您需要爬虫将您的页面分析为“互联网玩具店”，您应该从服务器获取所有促销和描述性内容，之后不要更改。如果您正在制作用户个人文件柜之类的东西，您可以不用担心这些东西，只需在客户端生成内容。
【讨论】：
@expressjs123 还有一点，关于静态和动态页面的区别要多说一点： 你可以考虑页面的大小。对于 SPA，如果唯一的页面占用 5 MB 或更多，则属于一般内容。某些应用程序不关心页面是提供给“强”PC 还是游戏页面等。但如果是网店，您的页面应该尽可能少占用资源，因此大多数网店都是混合网站。纯静态网站很少；***是最流行的静态网站示例。您可以尝试分析它的服务速度。【参考方案2】：静态网站包含具有固定内容的网页。每个页面都用 HTML 编码，并向每个访问者显示相同的信息。静态网站是最基本的网站类型，也是最容易创建的。与动态网站不同，它们不需要任何 Web 编程或数据库设计。只需创建几个 HTML 页面并将它们发布到 Web 服务器即可构建静态站点。
Source
所以在我看来，没有任何前端的纯html，任何后端生成都是静态网站，你描述的是动态网站。 所以这是非常基本的东西，将其视为生成的 pdf，您无法更改它，要对其进行修改，您需要去文件编辑，保存，然后发布给最终用户
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My static website</title>
</head>
<body>
<p> Static means no process </p>
</body>
</html>
【讨论】：
【参考方案3】：只要它在没有 JS 的情况下工作，我会说它是一个渐进增强的静态网站，因为页面不是由服务器在每个请求上生成的，然后使用 JS（如果启用）提供额外的非必要特性或功能。
【讨论】：
以上是关于前端模板网站是动态的还是静态的？的主要内容，如果未能解决你的问题，请参考以下文章
html网页设计与制作：基于html设计整套招聘网站求职前端模板页面 静态网页HTML代码 学生网页课程设计期末作业下载