(小白求解) nextjs client component 加载很慢的问题

[byqtxdy07]

nextjs version: 14.1.0

当我在服务端页面使用 client component 组件时，发现一个问题就是，页面已经渲染出来，但 client component 无法及时处理对应的事件(例如 click ，change 等)，需要等一会才可以

问了一下 gpt ，好像是因为有一个 "水合" 的现象，用 useState + useEffect + 骨架屏解决了这个问题，类似于

const [isHydrated, setIsHydrated] = useState(false)

useEffect(() => {
    setIsHydrated(true)
}, [])

if(!isHydrated) {
	return 骨架屏
}

return 真正的视图

两个疑问:

1. 页面部分 SSR + 部分 CSR 会不会看着很怪(是主流的做法吗，之前学 nuxt 的时候没怎么注意，当时好像是一起返回了)
2. 骨架屏的高宽设定，用的 MUI 的 Skeleton 组件，高宽只能写死在 Skeleton 标签上吗(自己写起来感觉还可以，想找大佬们取取经，看看有没有更舒服的写法😙😙😙)

[stimw]

这是 page router 还是 app router

[byqtxdy07]

@stimw app router

[nddcc]

nextjs 14 dev 环境下确实很慢，性能有些问题，看了官网 issue 还是 open 状态。不过打包后就非常快了。
1 、用 nextjs 全部用 use client 都可以，服务端渲染会加快首屏加载速度，还自带 api handler ，所以当 spa 来写也是有优势的
2 、Skeleton 我也是写死高度