Nodejs模板是实时渲染好，还是渲染为HTML较好

Nodejs模板是实时渲染好，还是渲染为HTML较好

预渲染为HTML主要是考虑速度，读取静态文件就可以了，直接nignx做缓存。但实时渲染也可以用缓存策略，大家觉得呢。

2 回复

Node.js 模板是实时渲染好，还是渲染为 HTML 较好？

在 Web 开发中，使用模板引擎时，选择实时渲染还是预先渲染为 HTML 是一个常见的问题。每种方法都有其优缺点，具体选择取决于你的应用需求、性能考虑以及用户体验。

实时渲染

实时渲染是指在每次请求时动态生成 HTML 页面。这种方式的优点在于可以提供高度动态的页面内容，例如根据用户登录状态显示不同的导航栏或内容。实时渲染通常通过服务器端的模板引擎实现，比如 EJS、Pug 或 Nunjucks。

示例代码（使用 EJS）：

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

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const user = { name: 'John Doe' };
    res.render('index', { user });
});

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

在这个例子中，res.render 方法会实时渲染 index.ejs 模板，并将 user 对象传递给模板。EJS 模板文件可能如下所示：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
</head>
<body>
    <h1>Hello, <%= user.name %>!</h1>
</body>
</html>

预渲染为 HTML

预渲染为 HTML 是指在构建阶段一次性生成所有静态 HTML 文件。这些文件可以直接由 Nginx 等静态文件服务器提供服务，从而减少服务器端的计算负担。这种方式适合于内容变化不频繁的网站。

示例代码（使用 Pug 和 Gulp）：

const gulp = require('gulp');
const pug = require('gulp-pug');

gulp.task('views', function buildHTML() {
    return gulp.src('./src/views/*.pug')
        .pipe(pug())
        .pipe(gulp.dest('./dist/'));
});

gulp.task('default', ['views']);

在这个例子中，Gulp 任务会在每次运行时编译 Pug 模板到 dist 目录下的 HTML 文件。Pug 模板可能如下所示：

// src/views/index.pug
doctype html
html
    head
        title Welcome
    body
        h1 Hello, #{name}!

总结

实时渲染适合需要高度动态内容的应用，而预渲染为 HTML 则适用于内容变化不频繁的场景。实际选择时，可以根据应用的需求、性能考虑以及用户体验来决定最适合的方法。


Node.js 模板引擎的选择主要取决于应用场景和个人需求。以下是对实时渲染和预渲染为 HTML 的一些分析及示例代码。

实时渲染

实时渲染是在请求到达后根据模板动态生成 HTML。这种方式的好处是可以灵活地处理各种数据，如用户认证信息、个性化内容等。缺点是每次请求都会重新渲染页面，增加了服务器负担。

示例：EJS（Embedded JavaScript）模板引擎

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

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const user = { name: 'Alice' };
    res.render('index', { user });
});

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

views/index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
</head>
<body>
    <h1>Hello, <%= user.name %></h1>
</body>
</html>

预渲染为 HTML

预渲染是将页面在构建时一次性渲染成静态 HTML 文件。这种方法可以提高页面加载速度，因为客户端只需读取静态文件。适用于内容变化不频繁的网站，如博客、新闻站点等。

示例：使用 html-minifier 进行静态 HTML 文件的压缩

const htmlMinifier = require('html-minifier');

// 预渲染并压缩 HTML
function renderAndMinifyHtml(templatePath, outputPath) {
    const template = fs.readFileSync(templatePath, 'utf8');
    const minifiedHtml = htmlMinifier.minify(template, {
        collapseWhitespace: true,
        removeComments: true,
        minifyCSS: true
    });

    fs.writeFileSync(outputPath, minifiedHtml);
}

renderAndMinifyHtml('./templates/index.html', './public/index.html');

结论

  • 实时渲染适合需要高度动态和交互性的应用。
  • 预渲染适合内容变化较少且对性能有高要求的应用。

选择哪种方式取决于你的具体需求。

回到顶部