我的 UseEffect 内容延迟了我在 Next.js 中的 DOM 渲染答案

【问题标题】：My UseEffect content delays my DOM rendering in Next.js我的 UseEffect 内容延迟了我在 Next.js 中的 DOM 渲染
【发布时间】：2021-01-01 22:31:57
【问题描述】：

对不起，我还是不明白。我有一个用户页面，在页面末尾我考虑创建一个组件，该组件将为其他三个用户提供旅行选项。比如“朋友建议”。由于它是我页面末尾的资源，我考虑仅在页面加载时保存加载和渲染。但是，在调试此用户页面时，我意识到我放置在 useEffect 中的组件正在延迟我的页面的加载。代码如下。通常，我一直认为 useEffect 中的每个资源都是永远不会延迟加载 DOM 的资源。但是当我使用 Next.Js 时，我对这种情况感到困惑。很好理解，但如果有人有建议，解决我的这段代码更是如此，谢谢。

用户页面 mywebiste.com/user/thomas

 async function getServerSideProps(ctx){
        const user = await api.get( '/user-id');
        return user
 }
    
 export default function PageUser( { user }){
    
    const [ footerUsers , setFooterUsers ] = useState()
    
    useEffect((){
       handleFooter()
    },[user])
    
    async function handleFooter(){
       const others_users = await api.get('/other-users')
       setFooterUsers(other_users)
    }
    
     return ( <>
                 <h1> Hello {user.nome}</h1>
                 <UsersFooter users={footerUsers}/>
             </>
     )
 }


function UsersFooter({ users }){
 return 
    users.map( user => <h1> I'm {user.name}</h1> )
}

我的意图是我可以摆脱这个必须搜索用户的 api 并渲染 DOM 计算组件并在页面已经加载时使用 javascript 加载它的过程，而使用 useEffect 和 Next.Js 我可以不。

编辑

我仍在努力解决问题。这真的是我无法理解的事情。因为我的数据只在 useEffect 内部生成，即使这样它也坚持要延迟 DOM。

【问题讨论】：

不应该将handleFooterUsers 和getServerSideProps 声明为async？您似乎也有变量命名不一致。这些只是试图将您的代码缩减为最小示例的拼写错误，还是您的代码中有一些真正的拼写错误？
我忘了放，但在我的代码中有异步。我会解决这个问题，对不起！
是的，为了简单起见。

标签： node.js reactjs next.js server-side-rendering

【解决方案1】：

好的，我将尝试解释我注意到的一些分析。红色垂直线似乎是我的页面加载的时刻，而不是最后一个绿色水平条，正如我所说，出现。因为时间非常快。所以显然我并没有受到这种延迟的影响。我在 useEffect 中设置了 10 秒的 setTimeout，并且在我的组件未激活时我的页面已经加载。 10 秒后，会像往常一样出现一个栏，所以我认为它不会延迟我的页面。

也许有更多调试器经验的人可以更好地解释一下，拥抱大家！

【讨论】：