我是NextJS的新手,我已经部署到Netlify作为一个生产版本。然而,当我使用next router导航到一个页面时,它需要大约3-4秒才能加载到一个特定的页面。但奇怪的是,它在本地开发环境中工作得很快。
interface Props {
id: string;
}
const Profile: NextPage<Props> = ({ id }) => {
const subMenuData: any = {
posts: '게시글',
likes: '좋아요',
// playings: '연주',
lessons: '레슨',
reviews: '리뷰',
// requests: '레슨신청'
}
const [ subMenu, setSubMenu ] = useState<string>('posts');
const songData: IData[] = [ ...Array(12) ];
songData.map((v,k) => {
songData[k] = { title: '너를 만나', artist: '풀킴', rate:4 };
})
return (
<PageRoot className={styles.root}>
{/* <PageNav className={styles.nav}>
프로필
</PageNav> */}
<PageContent className={styles.content}>
<div className={styles.profile}>
<span onClick={() => moveUrl('/profile/update')}>
내 프로필 수정 <MdArrowForwardIos />
</span>
</div>
<div className={styles.info}>
<div className={styles.img}>
{/* <Image /> */}
</div>
<div className={styles.basic}>
<div className={styles.top}>
방구석 뮤지션
</div>
<div className={styles.middle}>
3년 미만 중급자
</div>
<div className={styles.bottom}>
<span>피아노</span>
<span>기타</span>
<span>드럼</span>
<span>바이올린</span>
</div>
</div>
<div className={styles.settings}>
<div className={styles.top}>
설정
</div>
<div className={styles.middle}>
고객센터 <MdArrowForwardIos />
</div>
<div className={styles.bottom}>
<span>회원탈퇴</span>
<Button onClick={()=>{}}>
로그아웃
</Button>
</div>
</div>
</div>
<nav className={styles.submenu}>
<ul>
{Object.keys(subMenuData).map((v)=>{
return (
<li
className={v===subMenu ? styles.active:''}
onClick={e => clickSubMenu(e,v)}
key={v}
>
{subMenuData[v]}
</li>
)
})}
</ul>
</nav>
{ subMenu==='posts' &&
<PostsContainer className={styles.posts} showFilterPost={false} showTitle={false} />
}
<div className={styles.content}>
{ subMenu==='likes' &&
<MyPageLikesContainer />
}
{/* { subMenu==='playings' &&
<SongsContainer className={styles.songs} data={songData} />
} */}
{ subMenu==='lessons' &&
<MyPageLessonsContainer songData={songData} />
}
{/* { subMenu==='requests' &&
<MyPageRequestsContainer data={songData} />
} */}
{ subMenu==='reviews' &&
<MyPageReviewsContainer />
}
</div>
</PageContent>
</PageRoot>
)
function clickSubMenu(e: React.MouseEvent, key: string) {
setSubMenu(key);
}
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const props = {
id: context.query.id
}
return {
props
}
};
export default Profile;
我将图像设置为延迟加载,但这对减少加载时间没有帮助。
如何缩短装货时间?
1条答案
按热度按时间46qrfjad1#
您的网络屏幕截图中有您的答案。
您正在获取一个userId.json资源,它需要2.92秒才能返回,它与Profile组件无关。
尝试在等待请求完成时显示加载程序或某种类型。在任何情况下,在等待这种类型的用户特定资源时都不要阻止呈现