跳到主要内容

TypeScript 服务端渲染

介绍

服务端渲染(Server-Side Rendering,SSR)是一种在服务器端生成 HTML 页面并将其发送到客户端的技术。与传统的客户端渲染(CSR)不同,SSR 可以在服务器上预先渲染页面内容,从而加快页面加载速度并改善搜索引擎优化(SEO)。TypeScript 作为一种强类型的 JavaScript 超集,可以帮助我们在 SSR 中编写更安全、更易维护的代码。

在本教程中,我们将逐步讲解如何使用 TypeScript 实现服务端渲染,并通过实际案例展示其应用场景。

为什么使用服务端渲染?

服务端渲染的主要优势包括:

  1. 更快的首屏加载时间:由于 HTML 是在服务器端生成的,用户无需等待 JavaScript 下载和执行即可看到页面内容。
  2. 更好的 SEO:搜索引擎可以更好地抓取和索引 SSR 生成的页面内容。
  3. 更好的用户体验:对于网络较慢或设备性能较低的用户,SSR 可以提供更流畅的体验。

使用 TypeScript 实现服务端渲染

1. 设置项目

首先,我们需要创建一个新的 Node.js 项目并安装必要的依赖项。

bash
mkdir ts-ssr-example
cd ts-ssr-example
npm init -y
npm install express typescript @types/node @types/express
npx tsc --init

2. 创建 Express 服务器

接下来,我们创建一个简单的 Express 服务器来处理 SSR。

typescript
// src/server.ts
import express from 'express';
import path from 'path';

const app = express();
const port = 3000;

app.get('/', (req, res) => {
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSR with TypeScript</title>
</head>
<body>
<h1>Hello, TypeScript SSR!</h1>
</body>
</html>
`;
res.send(html);
});

app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});

3. 编译并运行服务器

使用 TypeScript 编译器将代码编译为 JavaScript,然后运行服务器。

bash
npx tsc
node dist/server.js

现在,打开浏览器并访问 http://localhost:3000,你将看到一个简单的 HTML 页面。

4. 动态渲染内容

在实际应用中,我们通常需要动态生成页面内容。我们可以使用模板引擎(如 EJS 或 Pug)来实现这一点。以下是一个使用 EJS 的示例:

bash
npm install ejs
typescript
// src/server.ts
import express from 'express';
import path from 'path';

const app = express();
const port = 3000;

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

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

app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});

src/views/index.ejs 文件中,我们可以定义模板:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>

5. 处理异步数据

在实际应用中,我们可能需要从数据库或 API 获取数据。以下是一个处理异步数据的示例:

typescript
app.get('/user/:id', async (req, res) => {
const userId = req.params.id;
const user = await fetchUserFromDatabase(userId); // 假设这是一个异步函数
res.render('user', { user });
});

实际案例

假设我们正在开发一个博客平台,我们希望每个博客文章页面都能通过 SSR 进行渲染。我们可以使用上述技术来实现这一点。

typescript
app.get('/post/:id', async (req, res) => {
const postId = req.params.id;
const post = await fetchPostFromDatabase(postId); // 假设这是一个异步函数
res.render('post', { post });
});

src/views/post.ejs 文件中,我们可以定义博客文章的模板:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= post.title %></title>
</head>
<body>
<h1><%= post.title %></h1>
<p><%= post.content %></p>
</body>
</html>

总结

通过本教程,我们学习了如何使用 TypeScript 实现服务端渲染。我们创建了一个简单的 Express 服务器,并使用 EJS 模板引擎动态生成 HTML 页面。我们还探讨了如何处理异步数据,并通过实际案例展示了 SSR 的应用场景。

服务端渲染是一种强大的技术,可以显著提升应用的性能和 SEO。TypeScript 的强类型特性使得我们在开发过程中能够更好地管理代码,减少错误。

附加资源

练习

  1. 尝试将本教程中的示例扩展为一个完整的博客平台,包括文章列表、文章详情和用户评论功能。
  2. 研究其他模板引擎(如 Pug 或 Handlebars)并尝试在项目中使用它们。
  3. 探索如何在 SSR 中集成前端框架(如 React 或 Vue),并比较其与纯 SSR 的优缺点。