Administrator
发布于 2024-10-15 / 26 阅读
0
0

Next.js 零基础教程9 静态和动态渲染技术实现

书接上回,我们获取了仪表盘概览页面的数据,但是我们简要讨论了当前设置的两个限制:

  • 数据在请求过程中是无意中形成一个瀑布流

  • 仪表盘是静态的,因此任何数据更新都不会反映在应用程序上。

在本章节当中我们要讨论四个问题:

  • 什么是静态渲染以及它如何提高应用程序的性能。

  • 什么是动态渲染以及何时使用它。

  • 使仪表板动态化的不同方法。

  • 模拟缓慢的数据提取以观察会发生什么。

什么是静态渲染

通过静态渲染,数据提取和渲染在构建时(部署时)或重新验证数据时在服务器上进行。每当用户访问您的应用程序时,都会提供缓存的结果。静态渲染有几个好处:

  • 更快的网站- 预渲染的内容可以缓存并在全球范围内分发。这确保世界各地的用户可以更快、更可靠地访问您的网站内容。

  • 减少服务器负载- 由于内容已被缓存,您的服务器不必为每个用户请求动态生成内容。

  • SEO - 预渲染的内容更容易被搜索引擎抓取工具索引,因为页面加载时内容已经可用。这可以提高搜索引擎排名。静态渲染适用于没有数据或数据在用户之间共享的UI,例如静态博客文章或产品页面。它可能不适合包含定期更新的个性化数据的仪表板。

与静态渲染相反的是动态渲染。

什么是动态渲染

使用动态渲染,内容会在请求时(用户访问页面时)在服务器上为每个用户渲染。动态渲染有几个好处:

  • 实时数据- 动态渲染允许您的应用程序显示实时或频繁更新的数据。这对于数据经常变化的应用程序来说是理想的选择。

  • 用户特定内容- 更容易提供个性化内容,例如仪表板或用户配置文件,并根据用户交互更新数据。

  • 请求时间信息- 动态渲染允许您访问只能在请求时知道的信息,例如 cookie 或 URL 搜索参数。

模拟缓慢的数据获取

我们正在构建的仪表板应用程序是动态的。但是,上一章中提到的一个问题仍然存在。如果一个数据请求比其他所有请求都慢,会发生什么情况?

我们模拟一次缓慢的数据获取,打开上一篇文章编写好的程序,现在我们编辑/app/lib/db.ts

// 增加一个延时函数
await new Promise((resolve) => setTimeout(resolve, 3000));
const result: QueryResult<T> = await client.query(text, params);
console.log("延时增加3秒");

添加延时模拟查询用时
超时
在这里,人为地添加了3秒延迟来模拟缓慢的数据提取。结果是,现在整个页面在提取数据时无法向访问者显示UI。

通过动态渲染,您的应用程序的速度仅与最慢的数据获取速度一样快,如何实现请看下一章总结。

更详细内容查看

独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号
公众号二维码


评论