Next.js14从入门到实战015:NextJS基础篇之部分预渲染

在本意,你将学习到......

  • 什么是部分预渲染?
  • 部分预渲染的工作原理

结合静态和动态内容

目前,如果在路由中调用动态函数(例如 noStore()cookies() 等),整个路由都会变成动态的。

这就是当今大多数网络应用程序的构建方式。您可以为整个应用程序或特定路由选择静态或动态渲染。

不过,大多数路由并不完全是静态或动态的。路由可能既有静态内容,也有动态内容。例如,考虑一个电子商务网站。您可能可以预渲染产品页面的大部分内容,但也可能希望按需动态获取用户的购物车和推荐产品。

回到您的dashboard页面,您认为哪些组件是静态组件,哪些是动态组件?

准备就绪后,点击下面的按钮查看我们如何分割仪表板路线:

  • <SideNav> 组件不依赖于数据,也不是针对用户的个性化组件,因此可以是静态的。
  • <Page> 中的组件依赖于经常变化的数据,并将为用户提供个性化服务,因此它们可以是动态的。

什么是部分预渲染?

Next.js 14 包含了 "部分预渲染 "的预览,这是一项实验性功能,可以用静态加载外壳渲染路由,同时保留部分动态部分。换句话说,你可以隔离路由的动态部分。例如

用户访问路由时:

  • 提供静态路由外壳,确保快速初始加载。
  • 外壳留下了动态内容异步加载的漏洞。
  • 异步holes是并行流式传输的,从而缩短了页面的整体加载时间。

这与现在应用程序的行为方式不同,现在整个路由要么完全是静态的,要么是动态的。

部分预渲染将超快的静态边缘交付与完全动态的功能结合在一起,我们相信它有可能成为网络应用程序的默认渲染模型,将静态网站生成和动态交付的优点结合在一起。

部分预渲染是如何工作的?

部分预渲染利用了 React 的Concurrent API,并使用Suspense功能来延迟渲染应用程序的部分内容,直到满足某些条件(如加载数据)。

回退与其他静态内容一起嵌入到初始静态文件中。在构建时(或重新验证时),路由的静态部分会预先渲染,其余部分会延迟到用户请求路由时再渲染。

值得注意的是,用 Suspense 封装组件并不会使组件本身动态化(请记住,您使用 unstable_noStore 实现了这一行为),而是将 Suspense 用作路由的静态和动态部分之间的边界。

部分预渲染的好处在于,使用它无需更改代码。只要使用 Suspense 封装路由的动态部分,Next.js 就会知道路由的哪些部分是静态的,哪些是动态的。

摘要

经常之前几章的学习,我们做了以下几件事:

  1. 在与应用程序代码相同的区域创建数据库,以减少服务器与数据库之间的延迟。
  2. 使用 React 服务器组件在服务器上获取数据。这样,您就可以在服务器上保留昂贵的数据获取和逻辑,减少客户端 JavaScript 捆绑,并防止您的数据库机密暴露给客户端。
  3. 使用 SQL 只获取所需的数据,减少了每次请求的数据传输量和转换内存数据所需的 JavaScript 量。
  4. 在有意义的情况下,使用 JavaScript 实现数据获取的并行化。
  5. 实施流式处理可防止缓慢的数据请求阻塞整个页面,并允许用户开始与用户界面交互,而无需等待加载所有内容。
  6. 将数据获取下移到需要的组件,从而隔离路由中哪些部分应该是动态的,为部分预渲染做准备。

下一章,我们将介绍获取数据时可能需要实现的两种常见模式:搜索和分页。

相关推荐
子兮曰2 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰2 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万2 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝2 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋2 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁2 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95272 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大2 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师2 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学2 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端