1. 使用RSC
RSC 减少了客户端处理的需求,使站点响应速度更快。发送到浏览器的 JavaScript 减少,从而加快了页面交互和查看的速度。例如,React 树是有选择性的,不会为所有 DOM 元素创建 React Client 组件。
2. SVG、Image优化
使用内置 next/images
组件,用于加载和渲染各种图像格式(包括 SVG),并进行效率和性能优化。它扩展了 HTML 图像元素,提供无缝集成和自动优化等优势。
3. 通过包装组件为RSC添加交互
如果一个组件需要有交互,又不想让组件改为客户端组件时,可以使用包装组件,在服务端组件之外包装一层客户端组件,通过 chidren
将服务端组件嵌入到客户端组件内。交互逻辑放在客户端组件中处理。例如
使用
4. 不同的设备不同输出
服务器组件针对不同的设备做判断,客户端、Web、移动端等,例如移动端和Web端的布局不同,存在两套菜单栏布局代码,我们希望移动端访问时,服务器只会返回移动端使用的菜单栏布局代码,反之 Web端亦然。
使用 middleware
来获取用户访问设备,并设置到 header
中,在 Layout
中判断用户设备
5. 动态导入组件
对于比较大、或者使用频次不高的的组件,可以使用NextJS 提供的动态导入特性来加载组件:NextJs dynamic 动态加载,它可以将代码分割成小块并按需加载,这可以带来性能上的巨大提升。尤其在移动设备上,同时也将减少应用程序的初始加载时间和整体的抱大小
Link