在next中使用时会报服务端渲染错误,Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering. about hox HOT 2 OPEN

发现一个临时解决办法：

新增一个组件：

import {
    PropsWithChildren,
    useEffect,
    useState,
} from 'react'

export default function ClientRunWrapper({children}: PropsWithChildren) {
    const [show, setShow] = useState(false);
    
    useEffect(() => {
        setShow(true);
    }, [])

    if (!show) {
        return null;
    }
    return children;
}

用此组件包裹使用了 hox 的顶层组件，如：

"use client"
import ClientWrapper from "@/components/ClientWrapper";
export default function Page() {
    return <div style={{
        height: '100%',
        padding: 16,
        backgroundColor: '#fff',
        overflow: 'auto',
    }}>
        <ClientWrapper>
            <TableContent />
        </ClientWrapper>
    </div>
}

这样，next dev 会报错，但是可以执行next build了。（否则next build都会失败）

from hox.

发现一个临时解决办法：

新增一个组件：

import {
    PropsWithChildren,
    useEffect,
    useState,
} from 'react'

export default function ClientRunWrapper({children}: PropsWithChildren) {
    const [show, setShow] = useState(false);
    
    useEffect(() => {
        setShow(true);
    }, [])

    if (!show) {
        return null;
    }
    return children;
}

用此组件包裹使用了 hox 的顶层组件，如：

"use client"
import ClientWrapper from "@/components/ClientWrapper";
export default function Page() {
    return <div style={{
        height: '100%',
        padding: 16,
        backgroundColor: '#fff',
        overflow: 'auto',
    }}>
        <ClientWrapper>
            <TableContent />
        </ClientWrapper>
    </div>
}

这样，next dev 会报错，但是可以执行next build了。（否则next build都会失败）

这样不就是不要ssr吗,我最后还是换了个组件,毕竟这样的话直接不用next会更好o(╥﹏╥)o

from hox.