Блог

Главная - Вопросы по программированию - Содержимое моего эффекта использования задерживает рендеринг моего DOM в Next.js

Содержимое моего эффекта использования задерживает рендеринг моего DOM в Next.js

#node.js #reactjs #next.js #server-side-rendering

#node.js #reactjs #next.js #рендеринг на стороне сервера

Вопрос:

извините, но я все еще чего-то не понимаю. У меня есть страница пользователя, и в конце страницы я подумал о создании компонента, который предоставлял бы возможность путешествовать для трех других пользователей. Например, «предложения друзей». Поскольку это ресурс, который находится в конце моей страницы, я подумал о сохранении загрузки и рендеринга только при загрузке страницы. Однако при отладке этой пользовательской страницы я понял, что компонент, который я разместил внутри 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.

Комментарии:

1. Не должны быть объявлены handleFooterUsers и getServerSideProps async ? Похоже, у вас также есть несоответствия в именовании переменных. Это просто опечатки в попытке сократить ваш код до минимального примера или у вас есть какие-то реальные опечатки в вашем коде?

2. Я забыл указать это, но в моем коде есть асинхронность. Я исправлю вопрос, извините!

3. Да, я поместил это для простоты.

Ответ №1:

Хорошо, я попытаюсь объяснить некоторые анализы, которые я заметил. Красная вертикальная линия появляется в момент загрузки моей страницы, а не последней зеленой горизонтальной полосы, как я уже сказал. Потому что время идет очень быстро. Так что, по-видимому, я не страдаю от этой задержки. Я установил время ожидания в 10 секунд внутри эффекта использования, и моя страница уже загрузилась, пока мой компонент не был активирован. Через 10 секунд появилась панель, которая появляется как обычно, поэтому я не думаю, что это задерживает мою страницу, я думаю.

Может быть, кто-то с большим опытом работы с отладчиком сможет объяснить это лучше, обнимаю всех!