避免使用Firebase身份验证闪烁

Question

我有一个使用NextJS的react应用，并且我实现了此HOC以使用Firebase进行身份验证：

// Assume auth is defined, and set to firebase.auth()
export default Component => class extends React.Component {
    state = { userId: null }

    componentDidMount() {
        auth.onAuthStateChanged(user => {
            if (!authUser) { Router.push('/login') }
            else { this.setState({ userId: auth.currentUser.uid}) }
        })
    }

    render() {
        return this.state.userId ? 
            <Component {...this.props} userId={this.state.userId} />
            : <div>loading</div>
    }
}

这很好用，但是我想利用SSR，并避免使用loading部分。我对NextJS的理解是，这将在服务器上执行，因此该页面将被预先填充。顺便说一句，我确实看到“ Loading” div大约一秒钟，然后看到具有正确加载状态的实际页面。

如何强制将其呈现为服务器？

谢谢:)