1. 了解同构渲染

• 1.1 模板渲染
• 1.2 服务端渲染
• 1.3 客户端渲染
• 1.4 Nuxt3 用于？

1.1 模板渲染

定义 模板渲染 即动态网站使用相同的模板和不同的数据来生成不同的 HTML 页面。

可以在哪些位置进行渲染？

• 服务端渲染
• 客户端渲染
• 同构渲染

使用同构渲染系统中的数据，部分可能由服务端去渲染，而另一部分由客户端渲染。

Nuxt3 即同构渲染框架，帮助我们快速开发同构渲染页面。

1.2 服务端渲染

早期我们使用服务端渲染，数据通过模板字符串进行拼接，生成 HTML 返回给客户端。

每次请求页面服务器都进行一次渲染，然后返回整个页面的数据。但是浏览器会直接得到 HTML 内容，显示更快。

这类系统主要使用预处理模板的技术（如 PHP、JSP 等），并使用 MVC 设计模式。

传统的服务端渲染的主要缺点如下：

• 所有的渲染都发生在服务端，因此服务器压力较大
• 常常需要返回整个 HTML 数据，占用带宽

1.3 客户端渲染

后来我们通过 AJAX 等相关的技术，通过服务器提供 JSON 格式的 API 接口，就可以在客户端渲染各种不同的数据。每次请求可以只请求必要数据，因而可以有更强的灵活性。

这类系统主要基于 SPA 类的框架（如 React、Vue 等），使用 MVVM 设计模式。

基于 MVVM 的客户端渲染的主要缺点如下：

• 首屏渲染慢
• 不利于 SEO（搜索引擎优化）

1.4 Nuxt3 用于？

Nuxt3

图片来源于：https://nuxt.com/docs/getting-started/views。

Nuxt3 是基于 Vue3 的混合式框架，用于解决：

• 首屏渲染慢的问题
• SEO 优化问题
• 同时兼备客户端渲染的优点

了解了基本概念之后，你可以在 Nuxt 官方文档 或 Nuxt 中文文档 中学习它的基本使用。