[Next.js] 우측 하단 번개 아이콘?

The Next.js Handbook 내용 스터디
https://www.freecodecamp.org/news/the-next-js-handbook/
번역 : https://coffeeandcakeandnewjeong.tistory.com/5#ch-7

 

Q. 우측 하단 번개 아이콘은 무엇인가요?

페이지의 우측 하단의 번개 모양 아이콘이 보이시나요?

마우스(Hover)를 가져가면 "Prerendered Page"라고 뜹니다 : 

 

1. 이 아이콘은 개발 모드에서만 볼 수 있다.

2. 이 아이콘은 자동 정적 최적화에 적합한 경우 이를 알려주는 표시이다.

3. 자동 정적 최적화란? 

3-1. Next.js는 리액트를 사용할 때 정적 웹 사이트, 즉 SSR(Server Side Rendering)을 쉽게 할 수 있도록 도와주는

리액트 기반의 프레임 워크이다.

3-2. Next.js 는 데이터의 요구사항이 없는 경우 페이지가 정적(미리 렌더링 할 수 있음)인지 자동으로 확인한다.

4. 그러나, 이 indicator(표시기)는 Next.js 버전 10.0.1 에서 제거 되었다.

5. 왜 제거 되었을까?

공식 문서에서는 어떤 경우는 electron applications 에서 작업 할 때와 같이 indicator(표시기)가 유용하지 않을 수 있기 때문에 이를 제거하려면 next.config.js를 통해 구성을 비활성화 시켜 사용하거나 혹은 이미 제거 된 버전의 Next.js로 사용하는 것을 권유하고 있다.

github.com/vercel/next.js/issues/7945

Vercel 소프트웨어 엔지니어가 남긴 댓글 : 

This indicator was removed in Next.js 10 as it has served its purpose to teach people about Next.js' static abilities.

이 표시기는 Next.js 의 정적 능력을 사람들에게 가르치는 목적을 달성했기 때문에 Next.js 10 버전에서 제거 되었습니다.
 

 

 

 

추가적인 내용 공부

- 기본적으로 호출 시간 때 fetch 되어야 할 데이터에 의존하지 않는다는 의미이다.

- 이 페이지는 npm run dev 에 의한 빌드 시간에 정적 HTML 파일로 빌드되고, 미리 렌더링될 수 있다는 의미이기도 하다.

- 이 아이콘을 Page 컴포넌트에 추가하는 getInitialProps() 의 유무의 따라서 결정지을 수 있다.

- 왜냐하면 getInitialProps 는 초기 데이터를 가져올 때 사용하는 메서드임으로 Next.js의 자동 정적 최적화 기능을 비활성화 시킨다.

- 초기 데이터가 있는 경우가 아니라면 Next.js는 페이지를 정적 HTML로 사전에 렌더링하여 자동으로 페이지를 최적화한다.

 

 

---

 

Q. 우측 하단 번개 아이콘 옆에 있는 삼각형 아이콘은?

컴파일 표시기(Compilation Indicator)로 Next.js 가 컴파일을 수행할 때마다 오른쪽 하단에 작은 삼각형이 표시된다.

 

1. 페이지를 저장하면 Next.js는 Hot Code Reloading이 자동으로 코드를 다시 로드하기 전에 어플리케이션을 컴파일한다.

2. 이 아이콘이 없었을 때 핫 코드 교체가 발생하고 Next.js 컴파일러 도구 체인이 작동하고 있음을 알 수 있는 방법은

개발자 콘솔 보는 방법 밖에 없었다고 함.

3. 이 아이콘으로 어플리케이션이 이미 컴파일 되었는 지 즉시 확인할 수 있고, 작업 중인 어플리케이션의 일부를 즉시 테스트할 수 있다.

 

 

핫 리로딩을 공부해야겠군

 

 

 

참고한 글

nextjs.org/docs/api-reference/next.config.js/static-optimization-indicator

github.com/vercel/next.js/issues/7945

velog.io/@beginal/Next.js%EC%9D%98-getInitialProps