[Next.js(177)] 내부에서 일어나고 있는 일

이유정·2024년 3월 27일
0

Next.js (pages router)

목록 보기
7/51
post-custom-banner

애플리케이션을 빌드할 때 Next.js가 정확히 무엇을 하는지 알아보자.

build

이 build 명령어가 페이지를 사전 렌더링한다.

빌드할 때
1) 오류가 없어야 빌드가 성공적으로 나옴

2) 정적 페이지 2개를 생성했음을 알 수 있음

흰 점이 정적 측면 생성을 의미함.
즉, getStaticProps를 사용하기 때문에 개발 또는 빌드 프로세스 중에 사전 생성된 페이지인 것.


서버사이드 전용 페이지를 나타냄

빈점은 정적 즉 모든 페이지가 사전 생성되지만 데이터가 필요하지 않으므로 getStaticProps나 유사한 것을 쓰지 않는 페이지/

사전 생성된 두 페이지가 시작 페이지므로, index.js 랑 404 페이지가 있다.
404 페이지는 빈점 부분에 있는데 이는 아무런 데이티 없이 사전 생성 되었다는 뜻이다.
index.js 페이지는 getStaticProps를 사용했기 때문에 흰점

사전 렌더링 된 html 파일 확인하기



server 폴더 => pages 폴더
사전 생성된 html 파일을 확인할 수 있음.


index.html 열어보면 Product 데이터를 확인할 수 있음.
브라우저에서 이 페이지를 방문하면 보일 사전 생성된 페이지다.

  • 즉, 초기 요청으로, 검색 엔진 크롤러나 페이지의 방문자에게 다시 보내지는 사전 생성된 페이지다.

start

  • npm start는 Node.js 서버로 프로덕션 준비 페이지를 시작한다.
  • 일반적으로 페이지 프로덕션을 위해 원격 컴퓨터로 이를 수행하기도 하지만 개발자 컴퓨터로 local 수행할 수도 있다.

페이지 소스에는 Next.js가 삽입한 스크립트 태그가 있고,


필요한 데이터를 포함한다.

=> 사전 렌더링된 html 코드가 React 애플리케이션과 연결되는 hydration 과정에 필요하다.
=> prefetching 한 데이터는 그 React 애플리케이션으로 전달돼서 React 애플리케이션이 전달받은 데이터를 동적 데이터 혹은, 어떤 종류의 데이터로 렌더링 해야할지 알 수 있다. 따라서, 수신한 데이터로 계속 작업하고 React.js 를 통해 해당 데이터를 업데이트하면 React는 어떤 종류의 데이터가 수신되었는지 안다.

  • 모두 자동으로 작업된다.
profile
강의 기록 블로그
post-custom-banner

0개의 댓글