Next.js 真的是越来越难用了,什么狗屁 use client,不如 Astro 一根,有什么话跟我的岛屿说去吧

10 天前
 u3u

5603 次点击
所在节点    Next.js
49 条回复
webwlx
10 天前
不懂就问,岛屿是什么
leokun
10 天前
@webwlx astro 的架构的中译吧
u3u
10 天前
@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 的脸色,你可以完全掌控你的网站。
importmeta
10 天前
我用 Astro 专门搞 SSG 的网站. 功能组件也是加的 React 扩展.
目前还没搞 SSR, 打算后期用 Next 搞 SSR.
twig
10 天前
Next.js 真的是很愚蠢。不只是有的地方要用 'use client',有的地方还莫名其妙变成客户端渲染的时候还得手动加 'use server'。人为地搞得很复杂,导致我觉得自己愚蠢。要不是看到别人抱怨,我还以为是我不配呢。
twig
10 天前
之前没认真看过 Astro ,多谢分享。它这种架构还挺棒的。
u3u
10 天前
@importmeta Astro 也可以 SSR 呀,用 Next 准备后悔吧
https://docs.astro.build/zh-cn/guides/on-demand-rendering/
u3u
10 天前
@twig #5 对,愚蠢至极,我一开始以为服务器组件会参考 Astro 的实现,谁知道他拉了一坨大的😅
而且每个大版本都有一些破坏性改动,一些特殊需求还需要用 Hack 的方式实现,Vercel 团队又固执又傲慢,你必须按照他们的方式来做,烦都烦死
Danswerme
10 天前
React 目前已经和 Next.js 半捆绑了,这才是最烦的。
Plumbiu
10 天前
@twig 啥时候莫名其妙会变成客户端渲染,默认不都是服务端渲染嘛
XTTX
9 天前
cal.com 这种级别的 oss 也是最近几个月才搞明白。除了坚定地抄他们的 pattern , 别无他法。X 上大家都苦 Nextjs 久矣。 能用就用吧. 不行就换,tanstack-start 现在用的人也越来越多了。
CHTuring
9 天前
试试 Tanstack Start
andrew2558
9 天前
Astro 也要服务器有 node.js 环境吧,不喜欢 next.js 就是因为不想在服务器装 node.js
craftsmanship
9 天前
@andrew2558 为啥不想装呢?
mouyase
9 天前
@andrew2558
Astro 是可以写纯前端项目的
mouyase
9 天前
已经用 Astro 把自己的博客重构了,感觉就是两个字,自由。
twig
9 天前
@Plumbiu 你问我,我就装糊涂。啊不,我是真糊涂。Next.js 让我很困扰就对了。
Philippa
9 天前
Tanstack Start 表示很好用
himself65
9 天前
虽然喜欢不喜欢 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 插进去。
rocmax
9 天前
不是一样要标 client:*吗?和 use client 区别在哪?编译器还能帮你检查使用了 hooks 的组件有没有标 use client 。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1141028

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX