议题与观点

通过 List 描述议题，通过 Comment 表达观点

• 背景
• 错误的喷法
  • 技术水平不够。人家有原作者团队。string directive 非常划时代
  • 耦合前后端。你得理解 nextjs 做的前后端合并绝不简单
  • 框架大而重。其实只是你不会用而已，pre render, ppr, ssr 2.0 都非常快。useLinkState 加了 loading
  • 草台班子。前面说了，高手都在里面. rsc, view transition 都他们提的。turbopack 很不好做
• 正确的喷法
  • 过于复杂
    • 路由的特殊标识 group, parallel route 等
    • 路由的特殊文件 layout, page, loading, not-found, forbidden 等
    • OG 得在 edge 运行
    • named slot 会冲突
    • otel 的配置
    • use server or client 对工程师要求极高
  • bug 过多。只有 happy path 可用
    • Parallel route 有点儿冲突
    • otel 不太可用
    • turbopack 不能编译 mdx
  • debug 困难
    • 内存泄露咋整
    • use cache 咋 debug
    • turbopack 的 error stack 问题（最近好点儿了）
  • 不规范（vue 被喷的点也被 react 抄走了）
    • 编译 css 过于严格限制最新的 select picker 语法
    • use server/client/cache 虽然想法很好，但是不规范，其他编译器咋用
    • 之前 cache 放在 fetch 里面比较炸裂
  • 社区不友善
    • 提的 bug 先回复然后几个月不管
• 远期展望
  • 相信他们还会整活，我不知道是啥，但是相信他们会继续拓展 web 开发的极限
  • bug 目测还是会很多
  • 仍然是你能用到的最好的重型框架，做严肃项目推荐（即使 bug 多）
  • 不要轻易相信其他框架。要做真正的对比
• 对于自己的项目
  • 项目的核心点要反复强调

粗剪反馈

【TODO】

发布草稿

📕 Shownotes

本期节目聊一聊如何正确开喷 next.js 和 react

有任何意见建议可以在评论区留言，或者邮件联系 [email protected] 也可以在 X(Twitter) 上与我们互动 https://x.com/AsyncTalk

👨‍👨‍👦 主播

• AnnatarHe: https://annatarhe.com

⏰ Timeline

00:20 看人不会喷 next.js 比较着急

01:11 vercel 一点儿都不草台班子

01:50 next.js 的前后端融合更高级

02:20 很大，很重，但是很快

03:40 吐槽：过于复杂

06:22 吐槽：bug 太多

07:55 吐槽：debug 困难

10:13 吐槽：不规范

12:50 吐槽：社区不够友善

13:20 预测

15:04 别被骗了。严肃项目上 next.js

🔗 相关链接

• JUST FUCKING USE REACT: https://justfuckingusereact.com/
• ViewTransition: https://react.dev/reference/react/ViewTransition
• useLinkStatus: https://nextjs.org/docs/app/api-reference/functions/use-link-status
• Partial Prerendering https://nextjs.org/docs/app/getting-started/partial-prerendering
• Could not build standalone with docker if webpack not null #73361 https://github.com/vercel/next.js/issues/73361
• How to find production memory leaks in Node.js applications? https://medium.com/@amirilovic/how-to-find-production-memory-leaks-in-node-js-applications-a1b363b4884f
• Node.js Heap profiler: https://nodejs.org/api/inspector.html#heap-profiler
• use cache: https://nextjs.org/docs/app/api-reference/directives/use-cache
• next.js fetch**:** https://nextjs.org/docs/app/api-reference/functions/fetch
• The <select> element can now be customized with CSS ****https://developer.chrome.com/blog/a-customizable-select

📚 扩展阅读

【TODO】

🤡 勘误

【TODO】

BGM by Otologic

后记

发布链接

【TODO】