Next.js 真的是越来越难用了，什么狗屁 use client，不如 Astro 一根，有什么话跟我的岛屿说去吧
u3u · u3u · 10 天前 · 5601 次点击
49 条回复 • 2025-06-26 22:36:00 +08:00
 |
1
webwlx 10 天前  1
不懂就问，岛屿是什么
|
 |
3
u3u OP @webwlx https://docs.astro.build/zh-cn/concepts/islands/#%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%BE%A4%E5%B2%9B
https://docs.astro.build/zh-cn/guides/framework-components/#%E6%B7%B7%E5%90%88%E6%A1%86%E6%9E%B6 https://docs.astro.build/zh-cn/guides/framework-components/#%E6%BF%80%E6%B4%BB%E7%BB%84%E4%BB%B6 你可以选择任何你喜欢的 UI 框架（ React 、Vue 等等），并且你无需做任何额外操作，Astro 默认将为你自动移除组件的所有 JavaScript 并渲染静态 HTML （你也可以按需使用 SSR 方案动态渲染数据，且支持流式渲染）。默认你网站的 Lighthouse 一定是 100 分，可以让你完全按需加载组件，比如设置 client:visible ，只有当该组件在可视范围内才会加载该组件的 JS 进行交互。一些非常简单的交互你甚至完全不需要 client 指令加载 JS ，直接使用原生 JS 操作一下 DOM 属性或 class 即可实现。实际上大部分交互实际上都可以通过纯 CSS 实现，或只需要额外添加一个属性实现切换效果，只有交互相对复杂，比较重的组件才需要加载框架 JS 进行交互。你不需要像 Next.js 一样愚蠢的在每个文件添加 'use client;' 指令，Astro 会自动为你完成所有工作，你也不用再担心随着网站功能越堆越多导致整个网站的 JS 越来越大，使用起来不再有心智负担。Astro 使用起来非常简单，没有复杂的“Next.js 专属特性”，一些没有办法实现的功能或选项不用再看 Vercel 的脸色，你可以完全掌控你的网站。 |
 |
4
importmeta 9 天前
我用 Astro 专门搞 SSG 的网站. 功能组件也是加的 React 扩展.
目前还没搞 SSR, 打算后期用 Next 搞 SSR. |
 |
5
twig 9 天前
Next.js 真的是很愚蠢。不只是有的地方要用 'use client'，有的地方还莫名其妙变成客户端渲染的时候还得手动加 'use server'。人为地搞得很复杂，导致我觉得自己愚蠢。要不是看到别人抱怨，我还以为是我不配呢。
|
|
6
twig 9 天前
之前没认真看过 Astro ，多谢分享。它这种架构还挺棒的。
|
|
7
u3u OP |
|
8
u3u OP 1
@twig #5 对，愚蠢至极，我一开始以为服务器组件会参考 Astro 的实现，谁知道他拉了一坨大的😅
而且每个大版本都有一些破坏性改动，一些特殊需求还需要用 Hack 的方式实现，Vercel 团队又固执又傲慢，你必须按照他们的方式来做，烦都烦死 |
 |
9
Danswerme 9 天前 9
React 目前已经和 Next.js 半捆绑了，这才是最烦的。
|
 |
11
XTTX 9 天前
cal.com 这种级别的 oss 也是最近几个月才搞明白。除了坚定地抄他们的 pattern ， 别无他法。X 上大家都苦 Nextjs 久矣。 能用就用吧. 不行就换，tanstack-start 现在用的人也越来越多了。
|
 |
12
CHTuring 9 天前
试试 Tanstack Start
|
 |
13
andrew2558 9 天前
Astro 也要服务器有 node.js 环境吧，不喜欢 next.js 就是因为不想在服务器装 node.js
|
 |
14
craftsmanship 9 天前 via Android
@andrew2558 为啥不想装呢？
|
 |
15
mouyase 9 天前
@andrew2558
Astro 是可以写纯前端项目的 |
|
16
mouyase 9 天前
已经用 Astro 把自己的博客重构了，感觉就是两个字，自由。
|
 |
18
Philippa 9 天前 via iPhone
Tanstack Start 表示很好用
|
 |
19
himself65 9 天前 6
虽然喜欢不喜欢 next.js 是个人观点，其次楼上的各种说法其实都有些事实错误。
首先你只需要在顶层的组件中开启 use client ，所有子组件也会判断为 client side component 。你们遇到这个问题绝对是每次创建新 page.tsx 的时候没有写 use client ，当然你也可以说“在每个文件”…… 其次我个人觉得“选择任何 UI 框架，Astro 给你自动做静态渲染”这个看起来很牛逼的 propaganda 实际上会出很明显的 edge case ，你无法保证所有你写的组件或者你用的依赖都是面向静态的，我认为这会造成很多未预料的事情……当然写博客这种写一次用一辈子的项目可能并不需要考虑这些事情，但我觉得这个事情本身和 Next.js 默认 server side 本质上没有任何区别。 混合框架会很明显的导致整个客户端包体积显著上升，当然你全写的是静态那是另说，但另外我觉得如果一个项目能混用这么多 web 框架，那这个项目本身其实就有点炫技的成分在里面，哪有真产品一下子什么框架都有。 不过 选择性水合（ partial hydration ）这个事情我倒是很赞同，我目前在一个 react framework 里面也推进了这个特性，不过我觉得群岛概念这个属于新瓶装旧酒，没什么新奇的，你只不过是本来多套一层组件变成了 props 里的保留关键字。 另外我仔细阅读这个文档的时候发现了一个逻辑错误，https://docs.astro.build/zh-cn/guides/server-islands/#%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%BE%A4%E5%B2%9B%E7%BB%84%E4%BB%B6 这里头像回退 GenericAvatar 的 slot fallback 虽然没有写放在哪里，但是我假定是 Avatar 的一个 children ，但是问题来了，如果做到不运行 Avatar 里面的请求代码的同时把 GenericAvatar 插进去。 |
 |
20
rocmax 9 天前 via Android
不是一样要标 client：*吗？和 use client 区别在哪？编译器还能帮你检查使用了 hooks 的组件有没有标 use client 。
|
|
21
rocmax 9 天前 via Android
astro 的处理方式像 nuxt ，hydrate-on-*指令
|
 |
23
yb2313 9 天前
astro 听起来总感觉像某个偶像团体的名字, 很涩
|
 |
24
alleluya 9 天前
@importmeta #4 还是那个问题 ssr 的收益有那么大么
|
 |
25
JustBecause 9 天前
use client 确实挺 nt 的，我的办法就是管他什么渲染都加上 use client ，出问题再拿掉
|
 |
26
v23xowen 9 天前
确实 Astro 用着很舒服
|
 |
27
DefoliationM 9 天前 via Android
@andrew2558 nextjs 也可以编译为静态文件，不用 ssr 。
|
 |
28
jguo 9 天前
nextjs 能在构建时检测到用户没加 use client 就能自动当 client component 处理，这在技术上没难度。但是一个项目 server 和 client 的边界本来就应该是明确的，写代码的时候如果脑子里分不清楚这个边界可能会出现严重的问题。
|
 |
29
EJW 9 天前
我一开始只是想起个 reac ，然后 react 推荐我直接用 next ，结果很多页面我就照着原本写法，全用 use client 了
 |
 |
30
DICK23 9 天前
不是都一样啊？ use client 只有你需要使用到 client 端的特性或 API 的时候才需要加，使用到 server action 才需要标记 use server 。
|
 |
31
heishu 9 天前
现在想写个 csr 、spa 项目，都是用的 react+vite 或者直接 vue 开嗦； react 捆绑 nextjs 真的是太烦了
|
|
32
rocmax 9 天前 via Android 4
@alleluya 在 next Pages router 和 nuxt2 的时代，ssr 意义只在于 SEO 和首屏渲染速度，SEO 不是刚需的话 ssr 不重要，大不了多等几百 ms 。
但是现在 rsc 解决的核心问题是通过 hydration 粒度控制来减少客户端需要下载的 js ，所以即便不注重 SEO 也可以利用 rsc 来提升客户端性能。 当然带来的复杂性就是毕竟服务端和客户端渲染环境不同，顺序不同，所以还需要桥梁来连接这两者，就是 use server 和 use client 。dan 最近发了一篇博客写的很好 https://overreacted.io/what-does-use-client-do/ 'use client' is a typed <script>. 'use server' is a typed fetch(). 当然 ssr 是不是正确的发展路线我不知道，兴许过几年又回归 client first 。但在 ssr 这条路上我认为 nextjs 是走在前列的，astro 和 nuxt 采用的手动标记 hydration 边界的做法不如 nextjs 的 use client 自然。 |
|
33
alleluya 9 天前
@rocmax #32 ssr 和 rsc 是两个概念啊 我主要一直对 ssr 的收益感觉没那么大 而且现在 SEO 也没那么重要了吧 或者说很多时候有替代方案 这个时候你再上 ssr 的意义是什么呢
|
 |
34
xxgw 9 天前 1
SPA: 通过请求一个带有空的 id 的 html 文件，以及一个很大的 js 文件，后续由 js 在浏览器中进行渲染整体的页面。
SSR: 服务端进行加载数据，初次渲染整体的 HTML 页面，后续 JS 水和整个页面使页面具有交互性，并且后续页面导航跳转是通过加载 JSON payload 作为 props 注入到 React 代码中。 RSC: 在服务端渲染 HTML 页面，后续 JS 水和整个页面使页面具有交互性，后续页面导航是 fetch 请求服务端 HTML 页面。 Nextjs 是 SSR 与 RSC ，新版本更多的还是 RSC Remix 和 Tanstack start 这类目前还只是 SSR |
|
35
rocmax 9 天前 via Android
@alleluya 你非要抠字眼限定 ssr 就是 pages router 或者 nuxt2 那种模式的话确实没意义。渲染模式就那几种 csr ssr ssg 最多加上 nuxt 提出的 isr ，你认为 rsc 属于哪种？
|
 |
38
arvinxx 9 天前
> Astro 自动将每个 UI 组件渲染成仅包含 HTML 和 CSS 的形式
这个和 RSC 没区别呀？ RSC 组件默认渲染出来的也是 HTML 和 CSS ，也是不包含任何客户端 JS 的。 > <MyReactComponent client:load /> 这个写法和下面这种写法有何区别？一个是外层使用，一个是顶部文件加，有啥区别？ ```tsx 'use client'; const MyReactComponent =()=>{ ... } export default MyReactComponent; ``` 不过加载优先级这个的确是更细粒度的一个控制能力，感觉 react 可以把这个也加到 RSC 规范里，能给到开发者更多控制权。 |
|
39
rocmax 9 天前 via Android
@arvinxx 不，react 从 18 开始支持并发模式，可以处理任务的优先级，hydration 并不会阻塞主线程，相当于更加高级的 hydrate-on-idle 。使用 hydrate-on-visible 和 hydrate-on-interaction 实际上是开发者在预测用户的行为，可能导致负优化。
|
 |
40
momowei 9 天前
next 就是垃圾，吹这个的都是一些所谓个人开发者。
但凡真的用户体验考虑，都不可能用 next 来实现 ssr |
 |
42
Plumbiu 8 天前
@rocmax RSC 就是会水和整个页面，至少水和的数据都是包括静态部分的，见 https://github.com/vercel/next.js/discussions/42170 。更明显的例子就是我博客实际 HTML 内容只有不到 4k 个字符，水和数据有 1 百万个字符
|
|
43
rocmax 8 天前 via Android
@Plumbiu rsc payload 中会有一份服务端渲染结果的副本，用来在客户端建立与服务器端相同的组件树，而不是用来 hydration 。rsc 渲染生成静态内容不包含 js ，没有 hydration 的必要。
1. HTML is used to immediately show a fast non-interactive preview of the route to the user. 2. RSC Payload is used to reconcile the Client and Server Component trees. 3. JavaScript is used to hydrate Client Components and make the application interactive. https://nextjs.org/docs/app/getting-started/server-and-client-components#on-the-client-first-load |
 |
44
SayHelloHi 8 天前
从某个版本开始 路由有 App 路由和 Page 路由
就开始懵了 看着头晕 长时间不写代码 再次写 Next 项目就得去翻文档 😂 |
 |
46
beyondstars 8 天前
这种框架本身是非常 opinionated 的
|
|
48
Plumbiu 8 天前
@rocmax 其实我想说的是 React 的水和包括还原组件树，hydrateRoot 方法就能看出来，需要接受用户的根组件 https://react.dev/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html
|
|
49
rocmax 8 天前 via Android
@Plumbiu rsc 渲染产物中没有 logic ，也不需要 interactive ，hydrateRoot 会跳过它们直到遇到 use client 。
To hydrate your app, React will “attach” your components’ logic to the initial generated HTML from the server. Hydration turns the initial HTML snapshot from the server into a fully interactive app that runs in the browser. |
Select Language