返回

一网打尽：Ejs + Nest + Mysql 打造服务端渲染模板

前端

使用 Ejs + Nest + Mysql 实现服务端渲染

在现代网络开发中，服务端渲染（SSR）正日益流行，因为它提供了许多优点，例如更快的页面加载速度和更好的 SEO。本文将深入探讨如何使用 Ejs、Nest 和 Mysql 这三个强大的技术实现 SSR。

什么是服务端渲染？

SSR 是一种渲染网页的技术，它是在服务器端生成 HTML 页面，然后将该页面发送给客户端。与传统的客户端渲染相比，SSR 具有以下优势：

  • 更快的页面加载速度： 由于 HTML 页面已经在服务器端生成，因此无需等待客户端下载和执行 JavaScript 来呈现页面，从而提高了页面加载速度。
  • 更好的 SEO： 搜索引擎更喜欢静态的 HTML 页面，而不是动态的 JavaScript 代码，因为它们更容易抓取和索引。SSR 确保页面在抓取时可以轻松读取，从而提高了 SEO。

为什么选择 Ejs + Nest + Mysql？

  • Ejs： Ejs 是一个简单易用的 JavaScript 模板引擎，非常适合 SSR。它提供了强大的模板功能，使您可以轻松地将数据填充到预定义的模板中。
  • Nest： Nest 是一个基于 TypeScript 的 Node.js 框架，它遵循模块化架构和面向对象的原则。它提供了许多开箱即用的功能，例如依赖项注入、路由和异常处理，从而简化了应用程序的开发。
  • Mysql： Mysql 是一个流行的关系型数据库，它提供了强大的数据存储和管理功能。它被广泛用于各种应用程序中，包括 Web 应用程序、电子商务平台和企业级解决方案。

如何使用 Ejs + Nest + Mysql 进行服务端渲染

1. 创建 Nest 项目

nest new my-project

2. 安装 Ejs 和 Mysql 依赖

npm install ejs mysql2

3. 配置项目结构

src/
  - controllers
  - services
  - models
  - views

4. 创建路由

@Controller()
export class AppController {
  @Get()
  index() {
    return 'Hello World!';
  }
}

5. 创建控制器

@Controller('home')
export class HomeController {
  @Get()
  index() {
    return this.homeService.findAll();
  }
}

6. 创建服务

@Injectable()
export class HomeService {
  findAll() {
    return ['Item 1', 'Item 2', 'Item 3'];
  }
}

7. 创建模型

export class Home {
  id: number;
  name: string;
}

8. 创建视图

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Home</h1>
    <ul>
      <% for (const item of items) { %>
        <li><%= item %></li>
      <% } %>
    </ul>
  </body>
</html>

9. 数据库连接

TypeOrmModule.forRoot({
  type: 'mysql',
  host: 'localhost',
  port: 3306,
  username: 'root',
  password: 'password',
  database: 'my_database',
  entities: [Home],
  synchronize: true,
}),

10. 查询数据库

@Get()
async index() {
  const items = await this.homeService.findAll();
  return { items };
}

11. 渲染模板

@Get()
@Render('home/index')
async index() {
  const items = await this.homeService.findAll();
  return { items };
}

12. 运行项目

npm start

常见问题解答

1. SSR 的主要优势是什么？

  • 更快的页面加载速度
  • 更好的 SEO
  • 更好的用户体验

2. Ejs、Nest 和 Mysql 在 SSR 中扮演什么角色？

  • Ejs 用作模板引擎
  • Nest 用作应用程序框架
  • Mysql 用作数据库

3. 为什么在服务端渲染 HTML 页面很重要？

搜索引擎更喜欢静态 HTML 页面，因为它们更容易抓取和索引。SSR 确保页面在抓取时可以轻松读取，从而提高了 SEO。

4. SSR 对用户体验有什么影响？

SSR 可以通过提供更快的页面加载速度和更流畅的导航体验来改善用户体验。

5. 在 Nest 中实现 SSR 的最佳实践是什么？

  • 使用 @Render() 装饰器来渲染视图
  • 使用 TypeOrm 来管理数据库连接
  • 遵循模块化架构和面向对象原则