[Next.js] 区分服务端与客户端

判断是服务端还是客户端

process.browser, true 为客户端，false 为服务端。

服务端与客户端渲染dom不一致

使用插件 react-no-ssr

如显示一个随机数，服务端和客户端渲染结果不一致会引起报警：

Warning: Text content did not match. Server: "0.14479126701510836" Client: "0.3119902681313358"

使用 react-no-ssr，可以在服务端和客户端渲染不同内容

import NoSSR from 'react-no-ssr';

const JustOnServer = () => <p>just on server</p>;

function NoSSRApp() {
    return (
        <div>
            <p>render on both server and client</p>
            {/*onSSR 参数也可以不加*/}
            <NoSSR onSSR={<JustOnServer/>}>
                <p>just on client: {Math.random()}</p>
            </NoSSR>
        </div>
    )
}

export default NoSSRApp;