Nodejs模板引擎：客户端还是服务器端？

Nodejs模板引擎：客户端还是服务器端？

模板引擎 （Template Engine）是Web开发中将展现层和数据分离的一项技术。模板引擎根据一定的语义，将数据填充到模板中，产生最终的HTML页面。模板引擎渲染的位置可分为客户端和服务器端。

服务器端渲染：模板引擎在服务器端将模板和数据合成，返回最终的HTML页面

  • 客户端渲染通常使用JavaScript脚本，如果某些客户端不支持JavaScript，就需要在服务器端渲染；
  • 搜索引擎通常不执行JavaScript脚本，要做到SEO友好，就必须实现服务器端渲染；

客户端渲染：将模板和数据分别传送到客户端，在客户端由JavaScript模板引擎渲染出最终的HTML视图。

  • 可以对模板文件（相对静态）进行缓存和负载平衡，对于流量很大的公众站点非常有价值；
  • 由于将模板渲染的计算转移到客户端，可降低服务器负荷；
  • 如果一个前端页面的内容分别来自多个后台系统，而这些后台的架构各不相同（Java、.NET、Ruby等），则服务器端渲染需要采用不同的技术，模板资源无法共享。客户端渲染则不存在这个问题，不同的后台系统可采用相同的客户端渲染技术，这样互相之间的模板资源可以公用，前端页面的整合非常容易；

6 回复

Node.js 模板引擎：客户端还是服务器端？

模板引擎（Template Engine）是Web开发中将展现层和数据分离的一项关键技术。模板引擎根据一定的语义，将数据填充到模板中，从而生成最终的HTML页面。模板引擎的渲染位置可以分为客户端和服务器端。

服务器端渲染

在服务器端渲染中，模板引擎负责在服务器上将模板和数据合并，然后返回最终的HTML页面给客户端浏览器。

优点：

  • SEO友好：搜索引擎通常不会执行JavaScript脚本，因此为了使网站更容易被搜索引擎索引，必须使用服务器端渲染。
  • 兼容性：即使某些客户端不支持JavaScript，也能正常显示页面。

示例代码：

// 使用EJS模板引擎作为例子
const express = require('express');
const ejs = require('ejs');

const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const data = { title: 'Welcome', message: 'Hello, EJS!' };
    res.render('index', data);
});

app.listen(3000, () => console.log('Server running on port 3000'));

在这个例子中，index.ejs 模板文件将与传递的数据合并，并最终生成HTML页面。

客户端渲染

客户端渲染是指将模板和数据分别传输到客户端，然后由客户端的JavaScript模板引擎来渲染出最终的HTML视图。

优点：

  • 减轻服务器负担：模板渲染的计算转移到客户端，降低了服务器的负荷。
  • 易于整合不同后端系统：如果前端页面的内容需要从多个后台系统获取数据，而这些后台系统的架构不同（如Java、.NET、Ruby等），客户端渲染可以更方便地整合这些数据。

示例代码：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Client-side Rendering Example</title>
</head>
<body>
    <div id="content"></div>
    <script src="https://cdn.jsdelivr.net/npm/mustache@4.1.0/mustache.min.js"></script>
    <script type="text/template" id="template">
        <h1>{{title}}</h1>
        <p>{{message}}</p>
    </script>
    <script>
        const template = document.querySelector('#template').innerHTML;
        const data = { title: 'Welcome', message: 'Hello, Mustache!' };
        document.getElementById('content').innerHTML = Mustache.render(template, data);
    </script>
</body>
</html>

在这个例子中，Mustache 模板引擎在客户端将数据填充到模板中，生成最终的HTML页面。

总结

选择服务器端渲染还是客户端渲染取决于具体的应用场景和需求。服务器端渲染更适合SEO友好的网站，而客户端渲染则能更好地处理复杂的数据整合和减轻服务器负担。


我的感觉是能在服务器端渲染模板，就不在客户端做。数据更安全些。

同时

不执行js,seo不友好这是讹传，google一样抓，只是天朝的百毒对象angularjs做的这种站直接封杀，技术都是向前进步的，很多自己写的爬虫都可以执行js脚本,更不用说搜索引擎了

感觉客户端渲染是势头，只是目前服务端渲染技术更成熟。

Node.js 模板引擎：客户端还是服务器端？

模板引擎（Template Engine）是Web开发中将展现层和数据分离的一种技术。模板引擎根据一定的语义，将数据填充到模板中，生成最终的HTML页面。模板引擎可以在客户端或服务器端进行渲染。

服务器端渲染

优点：

  • SEO友好：搜索引擎通常不执行JavaScript脚本，服务器端渲染可以确保搜索引擎能够正确抓取页面内容。
  • 兼容性：客户端不支持JavaScript时，服务器端渲染依然能正常工作。

示例代码：

const express = require('express');
const ejs = require('ejs');

const app = express();
app.set('view engine', 'ejs'); // 设置EJS为模板引擎

app.get('/', (req, res) => {
    const data = { title: 'Hello World', message: 'Welcome to my site!' };
    res.render('index', data); // 渲染模板并返回HTML
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

客户端渲染

优点：

  • 性能优化：可以对模板文件进行缓存和负载均衡，适合流量很大的网站。
  • 跨后端系统：如果一个前端页面的内容来自多个不同的后端系统（如Java、.NET、Ruby等），客户端渲染可以使模板资源共享。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Client-Side Rendering</title>
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-min.js"></script>
    <script id="template" type="text/template">
        <h1><%= title %></h1>
        <p><%= message %></p>
    </script>
</head>
<body>
    <div id="content"></div>

    <script>
        const template = _.template(document.getElementById('template').innerHTML);
        const data = { title: 'Hello World', message: 'Welcome to my site!' };

        document.getElementById('content').innerHTML = template(data);
    </script>
</body>
</html>

总结

选择服务器端渲染还是客户端渲染取决于具体的应用场景和需求。服务器端渲染更适用于SEO优化和兼容性要求较高的场景，而客户端渲染则更适用于性能优化和模板资源共享的需求。

回到顶部