TypeScript 服务端渲染

介绍

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

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

为什么使用服务端渲染？

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

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

使用 TypeScript 实现服务端渲染

1. 设置项目

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

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。

// 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，然后运行服务器。

npx tsc
node dist/server.js

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

4. 动态渲染内容

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

npm install ejs

// 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 文件中，我们可以定义模板：

<!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 获取数据。以下是一个处理异步数据的示例：

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

实际案例

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

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 文件中，我们可以定义博客文章的模板：

<!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 的强类型特性使得我们在开发过程中能够更好地管理代码，减少错误。

附加资源

练习

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

介绍​

为什么使用服务端渲染？​

使用 TypeScript 实现服务端渲染​

1. 设置项目​

2. 创建 Express 服务器​

3. 编译并运行服务器​

4. 动态渲染内容​

5. 处理异步数据​

实际案例​

总结​

附加资源​

练习​

介绍