Koa.js 服务端渲染与模板引擎实践

发布时间：2025-06-10 | 分类：技术实现

服务端渲染的价值

尽管现代前端框架如React、Vue提供了强大的客户端渲染能力，服务端渲染（SSR）在某些场景下仍然具有不可替代的优势：首屏加载更快、对SEO更友好、可以处理复杂的数据预处理、降低客户端设备性能要求等。Koa.js配合模板引擎可以轻松实现服务端渲染。

模板引擎对比

Node.js生态中有多种成熟的模板引擎可供选择：

Koa整合EJS模板引擎

EJS是最简单易用的模板引擎之一，适合快速开发：

const Koa = require('koa');
const Router = require('koa-router');
const render = require('koa-ejs');
const path = require('path');

const app = new Koa();
const router = new Router();

// 配置EJS模板引擎
render(app, {
  root: path.join(__dirname, 'views'),
  layout: false,
  viewExt: 'html',
  cache: false,
  debug: false,
  filters: {
    json: JSON.stringify,
    upper: str => str.toUpperCase()
  }
});

// 首页渲染
router.get('/', async (ctx) => {
  const products = [
    { id: 1, name: '商品A', price: 100, stock: 50 },
    { id: 2, name: '商品B', price: 200, stock: 30 },
    { id: 3, name: '商品C', price: 150, stock: 0 }
  ];

  await ctx.render('index', {
    title: '商品列表',
    products: products,
    user: { name: '张三', isVIP: true }
  });
});

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

EJS模板语法示例

EJS使用简洁的标签语法：

<%= title %>
欢迎, <%= user.name %>!


<% if (user.isVIP) { %>
  VIP会员
<% } else { %>
  普通用户
<% } %>



<% products.forEach(function(product){ %>
  

    <%= product.name %> -
    价格: <%= product.price %>元
    <% if (product.stock > 0) { %>
      库存: <%= product.stock %>
    <% } else { %>
      缺货
    <% } %>
  
<% }); %>



<%- include('header') %>


<%= user.name | upper %>

Nunjucks高级功能

Nunjucks提供更强大的功能，适合复杂应用：

• 模板继承：使用block和extends实现模板复用
• 宏定义：定义可复用的UI组件
• 过滤器：自定义数据转换函数
• 异步渲染：支持异步加载数据

// Nunjucks配置
const nunjucks = require('nunjucks');
const env = new nunjucks.configure('./views', {
  autoescape: true,
  watch: true,
  noCache: true
});

// 自定义过滤器
env.addFilter('formatDate', function(date, format) {
  const moment = require('moment');
  return moment(date).format(format);
});

env.addFilter('currency', function(amount) {
  return '¥' + Number(amount).toFixed(2);
});

// 使用async过滤器处理异步数据
env.addFilter('async', async function(fn) {
  return await fn();
});

性能优化策略

服务端渲染需要注意性能问题：

1. 模板缓存：生产环境开启模板缓存，减少解析开销
2. 页面缓存：对静态页面或变化不频繁的页面进行整体缓存
3. 组件缓存：缓存重复使用的页面片段
4. 流式渲染：使用Koa的流式响应，分块输出HTML
5. 静态资源CDN：JS、CSS、图片使用CDN加速

SEO优化技巧

服务端渲染对SEO友好，需注意：

• 语义化HTML：使用正确的HTML标签表达内容结构
• meta信息：动态设置title、description、keywords
• 结构化数据：添加JSON-LD结构化数据
• robots协议：合理配置robots.txt