Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/654https://channel.meo-ai.com/posts/654Mon, 01 Jun 2026 00:06:54 GMT<span class="post-title-source">《为什么我放弃Next.js和RSC，回归传统SPA与独立后端》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23Web%E5%BC%80%E5%8F%91" title="#Web开发">#Web开发</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23NextJS" title="#NextJS">#NextJS</a> <a href="/search/result?q=%23React_Server_Components" title="#React_Server_Components">#React_Server_Components</a> <a href="/search/result?q=%23SPA" title="#SPA">#SPA</a> <a href="/search/result?q=%23%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1" title="#架构设计">#架构设计</a> <a href="/search/result?q=%23%E5%AE%89%E5%85%A8" title="#安全">#安全</a> <a href="/search/result?q=%23TanStack" title="#TanStack">#TanStack</a> <a href="/search/result?q=%23Hono" title="#Hono">#Hono</a><br /><br />总结：<br /><br />作者回顾了自己从Next.js忠实用户到拥抱App Router/RSC，最终回归传统SPA+独立后端的完整历程。文章深入分析了RSC架构带来的心智负担、序列化开销和安全风险，结合2025-2026年多起严重CVE漏洞，论证了将渲染框架与安全边界解耦的必要性，并分享了当前基于React Router+Vite+Hono的简洁技术栈。<br /><br />文章要点：<br /><br />1. <b>Next.js的黄金时代</b>：Pages Router时期心智模型清晰，服务端/客户端边界一目了然，文件路由简单易懂，部署零成本<br />2. <b>App Router带来的混乱</b>：<mark class="highlight">Server</mark>/Client Component区分成为负担，"use client"指令传染性强，开发/构建/生产环境缓存行为不一致，服务端客户端边界变得不可见<br />3. <b>安全漏洞敲响警钟</b>：2025年CVE-2025-29927中间件绕过(CVSS 9.1)、2025年底RSC核心包10分满分漏洞CVE-2025-55182、2026年初多起Server Function DoS漏洞，攻击面集中在服务端渲染和反序列化环节<br />4. <b>TanStack并非避风港</b>：2026年5月TanStack遭遇供应链攻击，42个包被投毒，说明换框架不能免疫风险，减少依赖面才是关键<br />5. <b>序列化是根本原因</b>：RSC的"无缝"本质是分布式系统的序列化问题，函数、类实例、错误栈都无法透明穿越边界，反序列化不可信输入成为高危攻击面<br />6. <b>当前架构选择</b>：<mark class="highlight">React</mark> Router框架模式+Vite纯SPA（仅营销页预渲染）+ Hono独立后端，API通过显式HTTP调用，无RSC负载，无服务端序列化<br />7. <b>安全设计原则</b>：认证授权在API层强制执行，前端中间件只做UX跳转，CORS/CSRF/验证码/限流全部在可控的后端实现，与渲染框架彻底解耦<br />8. <b>核心收获</b>：架构清晰可指认、无序列化税、前端攻击面趋近于零、后端语言自由选型、依赖更少爆炸半径更小——"无聊"在软件工程里是赞美<br /><br />URL：<a href="https://dev.to/zulikram/why-i-walked-back-from-nextjs-and-rsc-to-a-plain-spa-and-a-separate-backend-4k8p" target="_blank" rel="noopener" title="https://dev.to/zulikram/why-i-walked-back-from-nextjs-and-rsc-to-a-plain-spa-and-a-separate-backend-4k8p">https://dev.to/zulikram/why-i-walked-back-from-nextjs-and-rsc-to-a-plain-spa-and-a-separate-backend-4k8p</a>https://channel.meo-ai.com/posts/636https://channel.meo-ai.com/posts/636Wed, 20 May 2026 23:43:43 GMT<span class="post-title-source">《TanStack中的React服务端组件》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23React_Server_Components" title="#React_Server_Components">#React_Server_Components</a> <a href="/search/result?q=%23TanStack_Start" title="#TanStack_Start">#TanStack_Start</a> <a href="/search/result?q=%23NextJs" title="#NextJs">#NextJs</a> <a href="/search/result?q=%23Bundle_Optimization" title="#Bundle_Optimization">#Bundle_Optimization</a><br /><br />总结：<br />TanStack Start实现了与Next.js截然不同的React服务端组件方案，通过显式API将组件渲染保留在服务端，避免将繁重代码发送至客户端。文章以应用外壳为例，展示RSC如何将客户端Bundle从308KB缩减至203KB，并说明其适合大型非交互式组件树的场景，同时澄清RSC并非数据加载或SSR的替代品，而是针对性的性能优化工具。<br /><br />文章要点：<br />1. RSC是只在服务端运行的React组件，可以直接在组件里写await查数据，而且组件代码不会发送到浏览器，不用担心数据库密码暴露给前端<br />2. TanStack实现RSC的方式特别直白，通过renderServerComponent这类API就能显式声明，作者认为比Next.js的实现更好懂<br />3. 别误会，RSC不是用来替代数据加载或SSR的，TanStack的loader和原有的服务端渲染已经做得很好了，RSC真正的价值是帮浏览器"减肥"<br />4. 文章举了个生动的例子：故意引入整个图标库来模拟大型组件树，结果RSC把客户端JS从308KB砍到了203KB，省了不少流量<br />5. 更妙的是RSC还能接收客户端组件当"插槽"传进来，配合Suspense实现流式渲染，让页面边加载边呈现，体验很丝滑<br />6. 不过作者也提醒，RSC不是银弹，如果你的组件树不大、依赖不多，用它带来的收益可能微乎其微，得看场景取舍<br /><br />URL：<a href="https://frontendmasters.com/blog/react-server-components-in-tanstack/" target="_blank" rel="noopener" title="https://frontendmasters.com/blog/react-server-components-in-tanstack/">https://frontendmasters.com/blog/react-server-components-in-tanstack/</a><a class="tgme_widget_message_link_preview" href="https://frontendmasters.com/blog/react-server-components-in-tanstack" target="_blank" rel="noopener" title="This post is about React Server Components (or RSC) in TanStack Start. The implementation is radically different, and in my opinion, better than the RSC implementation you’ve likely seen in Next.js."> <div class="link_preview_site_name accent_color">Frontend Masters</div> <img class="link_preview_image" alt="React Server Components in TanStack" src="/static/https://cdn4.telesco.pe/file/m1SWDG4eNI3zo5DWGvvpwHAqaR5dJaqpFfkb0QMP3mx8b2aWSytphloQUUHun9jb9M8pwvQi_VVMtdXB-8rKX3Z1G11jx6HI0lso3dTK8uHisnfWhOjTsxEuMZFONZWlLgQKCln5satRGo2QmOupH8zKf1tJjZmRajcGNGJ5RrVBnyR8dWxa2HqYsRyWz70Bcyo7zquRetf7HTnpF7Yqx3MEmzw2zUnMlhn2m8Q-08cnNeKJ9tMX7GE9eFcinvzKIY9K4mTyr1qVMMracH5h0DOj_RTcJfrvehT8vfTJGR8KUgkI7E-A2qG3k1U-Ur3e5bq0nHdVvIreHFmwymf85A.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title"><mark class="highlight">React</mark> <mark class="highlight">Server</mark> <mark class="highlight">Components</mark> in TanStack</div> <div class="link_preview_description">This post is about <mark class="highlight">React</mark> <mark class="highlight">Server</mark> <mark class="highlight">Components</mark> (or RSC) in TanStack Start. The implementation is radically different, and in my opinion, better than the RSC implementation you’ve likely seen in Next.js.</div> </a>https://channel.meo-ai.com/posts/170https://channel.meo-ai.com/posts/170Fri, 10 Jan 2025 10:19:06 GMT<a href="/search/result?q=%23%E6%96%87%E7%AB%A0" title="#文章">#文章</a> <a href="/search/result?q=%23React" title="#React">#React</a> <mark class="highlight">Server</mark> <mark class="highlight">Components</mark> 比较不错的文章，《服务器组件的心智模型》<br /><br />- 链接：<a href="https://saewitz.com/the-mental-model-of-server-components" target="_blank" rel="noopener" title="https://saewitz.com/the-mental-model-of-server-components">https://saewitz.com/the-mental-model-of-server-components</a><a class="tgme_widget_message_link_preview" href="https://saewitz.com/the-mental-model-of-server-components" target="_blank" rel="noopener"> <i class="link_preview_right_image" style="background-image:url('https://cdn4.telesco.pe/file/s87o3sPk0HRb1sLANaVDmxDZkNa2F230zDaDDn4oFyQXYxIhBHSxRvyB-3d9M2uy-pm3KoA6Px5Ez67CNSZUcbeikW4OklTnjDEy3orN6vifO16iMPF_ljDss8kTrEP3QgAS-qhgbTIJ8e9n1x7-cPTnDZ5W1SSVsSsa020LZfA-S8jjr95YgQb8Pi6trFqmKL_nAT5UwqJtwzkItW74zLxKKPRkMxQpv2RKz9jkbxMkc5nLZF2rr3jEXaKCEoo91NVSgm4CVll7mzkMUkQncv85Qe80ksIhBqYb5AKsSDeALmMFgvzXyXuSAA7mTbRDOK1dW9_5gCbtUcqrUF6nNA.jpg')"></i> <div class="link_preview_site_name accent_color">Saewitz</div> <div class="link_preview_title">The Mental Model of <mark class="highlight">Server</mark> <mark class="highlight">Components</mark> | Daniel Saewitz</div> </a>