理解HTML的局限性
在web开发中，我们经常遇到需要根据特定条件显示或隐藏页面元素的需求。例如，当某个数据字段为空时，对应的标签或显示区域就不应出现。虽然javascript是实现此类客户端动态行为的常用工具，但有时出于性能、seo或特定架构的考虑，我们希望在服务器端完成这些逻辑处理。
然而，纯粹的HTML并非一种编程语言，它主要用于描述页面的结构和内容。HTML本身不具备执行条件判断（如if/else）、循环或变量赋值等逻辑能力。因此，仅仅依靠HTML标签和属性，是无法实现“如果某个值为空则隐藏某个标签”这种条件的。
服务器端模板引擎的解决方案
要实现不依赖JavaScript的条件渲染，我们需要引入服务器端模板引擎。服务器端模板引擎允许开发者在将数据发送到客户端浏览器之前，在服务器上对HTML内容进行动态处理。它们通常提供一套特殊的语法，允许在HTML结构中嵌入编程逻辑。
工作原理：
- 数据准备： 服务器端应用程序（如Node.js、Python Django、Ruby on Rails等）从数据库或其他来源获取数据。
- 模板渲染： 服务器将这些数据与预定义的HTML模板文件结合。模板引擎会解析模板中的特殊语法，根据数据执行条件判断、循环等操作。
- 生成HTML： 模板引擎根据处理结果生成最终的纯HTML字符串。
- 发送到客户端： 服务器将生成的HTML发送给客户端浏览器。客户端接收到的已经是完全渲染好的页面，无需再执行额外的逻辑来隐藏或显示元素。
以EJS为例实现条件隐藏
EJS (Embedded JavaScript) 是一种流行的JavaScript模板引擎，它允许在HTML模板中嵌入纯JavaScript代码。以下是如何使用EJS来解决“如果{{xyz}}变量为空，则隐藏‘Some Number’标签”的问题：
立即学习“前端免费学习笔记（深入）”；
假设我们有一个名为dataValue的变量，它可能包含一个数字或为空。我们希望当dataValue非空时显示“Some Number: [值]”，否则不显示。
示例代码 (EJS):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染示例</title>
</head>
<body>
<h1>产品详情</h1>
<%
// 假设这是从服务器端传入的数据
// 模拟变量 xyz 的值
const dataValue = "12345"; // 示例：有值
// const dataValue = ""; // 示例：空字符串
// const dataValue = null; // 示例：null
// const dataValue = undefined;// 示例：undefined
%>
<p>其他产品信息...</p>
<%
// 检查 dataValue 是否存在且非空字符串
// String(dataValue).trim() 用于确保即使 dataValue 是数字等类型也能正确处理，并去除前后空格
if (dataValue && String(dataValue).trim() !== '') {
%>
<label>Some Number: <%= dataValue %></label>
<%
}
%>
<p>更多产品描述...</p>
</body>
</html>代码解析：
- <% ... %>：这是EJS的控制流标签，用于嵌入JavaScript代码，例如if语句、循环等。这部分代码不会直接输出到最终的HTML中。
- <%= ... %>：这是EJS的输出标签，用于将JavaScript表达式的结果输出到HTML中。
- 在if条件中，dataValue && String(dataValue).trim() !== ''确保了dataValue既不是null/undefined，也不是一个空字符串（包括只包含空格的字符串）。只有当条件为真时，<label>元素及其内容才会被渲染到最终的HTML输出中。
运行效果：
- 如果dataValue为"12345"，则浏览器将收到：
<label>Some Number: 12345</label>
- 如果dataValue为""、null或undefined，则浏览器将不会收到<label>元素，该区域将留空。
注意事项与总结
- 选择合适的模板引擎： 除了EJS，还有许多其他优秀的服务器端模板引擎，如Pug (Jade)、Handlebars.js、Nunjucks (Node.js生态), Jinja2 (Python), ERB (Ruby) 等。选择哪种取决于你的后端技术栈和个人偏好。
- 性能考量： 服务器端渲染会增加服务器的负载，因为它需要在每次请求时执行模板解析和数据绑定。对于大量动态内容或高并发场景，需要仔细评估其性能影响，并可能结合缓存策略。
- SEO友好： 服务器端渲染的页面在发送到客户端时已经包含了完整的HTML内容，这对于搜索引擎爬虫非常友好，有助于提升SEO表现。
- 开发体验： 模板引擎使后端开发者能够更直接地控制前端页面的结构和内容，有时能简化开发流程。
- 与客户端框架的结合： 在现代Web应用中，服务器端渲染常与客户端JavaScript框架（如React、Vue、Angular）结合使用，形成同构应用（Isomorphic/Universal App），以兼顾首屏加载速度和客户端交互性。
总结： 当需要在不使用JavaScript的情况下，根据数据条件动态隐藏HTML元素时，服务器端模板引擎是唯一的有效途径。通过在服务器端预先处理逻辑并生成最终的HTML，我们能够确保客户端接收到的页面已满足所有条件渲染需求，从而实现更简洁、更可控的页面呈现。
