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

[virtualflase]

package版本{
"hox": "2.0.0-rc.0",
"next": "13.4.4",
}
还没开始配置store,请问该组件是不支持在next上使用吗

[Tzxhy]

发现一个临时解决办法：

新增一个组件：

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都会失败）

[virtualflase]

发现一个临时解决办法：

新增一个组件：

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