V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
byqtxdy07
V2EX  ›  程序员

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

  •  
  •   byqtxdy07 · 325 天前 · 917 次点击
    这是一个创建于 325 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 标签上吗(自己写起来感觉还可以,想找大佬们取取经,看看有没有更舒服的写法😙😙😙)
    3 条回复    2024-02-05 17:27:07 +08:00
    stimw
        1
    stimw  
       325 天前 via Android
    这是 page router 还是 app router
    byqtxdy07
        2
    byqtxdy07  
    OP
       325 天前
    @stimw app router
    nddcc
        3
    nddcc  
       322 天前
    nextjs 14 dev 环境下确实很慢,性能有些问题,看了官网 issue 还是 open 状态。不过打包后就非常快了。
    1 、用 nextjs 全部用 use client 都可以,服务端渲染会加快首屏加载速度,还自带 api handler ,所以当 spa 来写也是有优势的
    2 、Skeleton 我也是写死高度
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5680 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 03:30 · PVG 11:30 · LAX 19:30 · JFK 22:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.