NextJS生产构建的页面加载太慢

oxf4rvwz  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(376)

我是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;

我将图像设置为延迟加载,但这对减少加载时间没有帮助。
如何缩短装货时间?

46qrfjad

46qrfjad1#

您的网络屏幕截图中有您的答案。
您正在获取一个userId.json资源,它需要2.92秒才能返回,它与Profile组件无关。
尝试在等待请求完成时显示加载程序或某种类型。在任何情况下,在等待这种类型的用户特定资源时都不要阻止呈现

相关问题