인프런 커뮤니티 질문&답변
작성한 질문수
렌더링 관련 질문
작성
·
13
0
안녕하세요 강사님!
SSG를 설정하지 않은 페이지 접속 시에 5초 가량의 시간이 소요되는데, 강사님 강의에서는 그래도 5초보단 빠르게 렌더링이 되는 것 같은데 원인이 무엇인지 알 수 있을까요? 한번 SSG로 설정이 되고 부터는 굉장히 빠르게 렌더링은 됩니다.
이건 와이파이의 문제일까요? 공용 와이파이더라도, 그다지 느리다고 체감되지 않는 환경인데 이미지 때문인건지 자꾸만 렌더링 시 오래 걸려서 원인이 무엇일지 궁금합니다..!
이를 확인해보려면 어디를 확인해보면 되는지 알려주시면 감사하겠습니다!
추가로 강사님 강의 sns 프로젝트에서도(배포본) 동일하게 나타났었습니다! 제 추측으로는 이미지 때문이라고 생각하고는 있는데,,, 강사님 배포본에서는 이런 현상이 없어서 궁금했습니다!
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. dozer님.
페이지 로딩 속도 문제를 겪고 계신 것 같습니다. 일반적으로 SSG(Static Site Generation)를 사용하지 않고 접근할 때 SSR(Server-Side Rendering)을 통해 페이지가 즉시 생성되므로 초기 로드 시간이 더 길어질 수 있습니다. 다음 몇 가지 가능성을 제시하고자 합니다:
원인 및 해결 방안
네트워크 속도 확인: 실제 네트워크 속도에 의해 영향 받을 수 있습니다. 다른 네트워크 환경에서도 동일한 결과가 나타나는지 확인해 보세요. 같은 공용 Wi-Fi라도 때에 따라 속도가 변동될 수 있습니다.
이미지 최적화:
- 이미지를 최적화하여 사용 중인지 확인하세요.
next/image컴포넌트를 사용해 이미지를 관리하면, 최적화를 쉽게 관리할 수 있어 로딩 속도를 개선할 수 있습니다.
- 이미지가 많은 경우, lazy loading을 사용하여 초기 로딩 시 필요한 이미지만 불러오도록 설정해 보세요.
- 이미지를 최적화하여 사용 중인지 확인하세요.
JS 및 CSS 번들 사이즈:
- 번들 사이즈가 크면 로딩에 많은 시간이 걸릴 수 있습니다. 개발자 도구에서 네트워크 탭을 확인하여 각 파일의 크기와 로딩 시간을 파악하고, 불필요한 모듈이 포함되어 있지 않은지 검토합니다.
- 코드 스플리팅을 통해 초기 로드 시 필요한 부분만 렌더링되고, 나머지는 필요할 때 불러오는 방식으로 변경할 수 있습니다.
- 번들 사이즈가 크면 로딩에 많은 시간이 걸릴 수 있습니다. 개발자 도구에서 네트워크 탭을 확인하여 각 파일의 크기와 로딩 시간을 파악하고, 불필요한 모듈이 포함되어 있지 않은지 검토합니다.
서버 의존성과 프로세스:
- SSR을 사용할 경우, 서버의 리소스 및 처리 속도 또한 페이지 렌더링 시간에 영향을 줍니다. 서버 로깅 및 모니터링을 통해 처리 지연 시간이 있는지 확인해 보세요.
- SSR을 사용할 경우, 서버의 리소스 및 처리 속도 또한 페이지 렌더링 시간에 영향을 줍니다. 서버 로깅 및 모니터링을 통해 처리 지연 시간이 있는지 확인해 보세요.
관련 질문 및 답변
비슷한 주제의 이전 문의와 답변들을 다음에서 확인해 보실 수 있습니다:
위의 문제들을 점검하고 조치하면 로딩 속도 개선에 도움이 될 것으로 기대됩니다. 성능 개선을 위해서는 각각의 요소를 하나씩 점검하여 최적화하는 것이 중요합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.