Description
笔记
图片字体优化的参考资料
- Image Optimization Docs
- Font Optimization Docs
- Improving Web Performance with Images (MDN)
- Web Fonts (MDN)
Next.js 路由跳转原理
使用客户端路由，搭配组件快速渲染，主要有三个关键：代码分割，预拉取 以及缓存。
代码分割主要是根据你的页面路由划分，将组件代码分割成更小的 bundle 块，交由浏览器下载执行，这样减少了每个请求的数据体积和执行时间，提高了加载性能。
预拉取只在生产环境生效，并且只有 Link 组件以及 useRouter 会开启路由预加载。顾名思议，就是在页面初始加载，或者当滑动到可视区域时，预加载路由对应的组件，然后缓存 30s。
缓存是指路由缓存，这个缓存是存放于本机内存的客户端缓存。使用缓存的好处在于减少了不必要的请求，进而提高性能。
在根页面的目录下，如果 loading 不想与子页面共享，可以在根页面创建 (overview) 文件夹，然后将 loading.tsx 和 page.tsx 放进去。
流式请求
如果并行请求路由页面，采用动态渲染的情况，会导致页面的加载速度与最慢的请求速度相关。为了优化体验，不采取一次性加载所有，而是将请求路由切分成一个个 chunk，然后使用 Stream 流式返回，服务器组件结合 loading 以及 Suspense 渲染。
如果把流式加载应用于整个页面，可能会出现其中一个组件加载缓慢，导致整个页面很长时间 loading 的情况；而如果把每个组件都嵌套一层 Suspense，可能会导致 UI 加载完成时，页面闪烁。具体如何做还是得取决于业务场景。
静态渲染、动态渲染和部分预渲染
客户端组件与服务端组件
客户端组件使用 use client 声明，可以使用事件监听以及 hooks，例如 useSearchParams，这些都可以在客户端获取。
服务端组件是跑在服务器上的，因此只能拼接数据，然后返回给客户端渲染。
Server Actions
Next 覆盖了原生 form 元素的 action 属性，通过把 action 当做一个 props，传递一个函数作为值，起到增删改查的作用。
Error handling
开发报错
✅ 在关联 GitHub 仓库时，执行 git remote add origin xxx 后，git push 推送时报错：
! [rejected] main -> main (non-fast-forward)
error: failed to push some refs to ''
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
分析：这个错误表明此刻本地的 main 分支落后于远程仓库的分支，也就是你新创建了一个远程仓库，需要 pull 拉取到本地一次，不能直接就从本地 push 到远程。
解决方式：首先尝试执行 git pull origin main 发现没有效果，于是转而执行 git pull --rebase origin main 命令，这个命令的意思是将本地更改重新应用在远程更改之上，而不是创建一个合并提交。如果这个过程中又遇到了冲突，那么可以手动处理冲突，然后执行 git rebase --continue 应用剩余的更改。等全部冲突解决后，执行 git push -u origin main ，问题解决。