blog/2021/09/07/lets-properly-understand-and-use-the-ssg-of-nextjs/

[utterances-bot]

next.js의 SSG 제대로 이해하고 사용하기 | Parkgang Dev Log

Intro next.js를 추천할 때 가장 자랑하는 부분이 SSR를 지원한다! 인데 내가 아는 SSR은 Server Side에서 각 페이지 별로 html을 생성해서 Response (혹은 파일 서빙) 을 해주는 것인데 next.js를 공부하고 사용해보면서 이부분에서 아직 찝찝한 부분이 있어서 next.js도 그렇게

https://parkgang.github.io/next.js/lets-properly-understand-and-use-the-ssg-of-next.js/

[jeus0630]

저도 NextJS공부중에 정적 페이지를 내려받고 SSR 인데 어떻게 스무스하게 넘어가지... 도대체.. 라고 생각했는데 가려웠던 부분이 50%정도 해결 되었습니다..!
아직도 궁금한 부분이 '요청 첫 페이지만 SSG/SSG, 나머지는 CSR'이라 하셨는데요.
CSR을 하려면 JS로 렌더링을 하는게 일반적인데 나머지 파일들은 그럼 JS 가공없이 어떻게 CSR로 렌더링이 되는것인가요?ㅠㅠ

[parkgang]

@jeus0630 안녕하세요! 우선 읽어주셔서 감사 인사를 전합니다. 😀

CSR을 하려면 JS로 렌더링을 하는게 일반적인데 나머지 파일들은 그럼 JS 가공없이 어떻게 CSR로 렌더링이 되는것인가요?

에 대한 답변은 당연히 JS 파일을 다운로드 받습니다. CSR을 위해서는 DOM 조작이 필요하므로 당연히 JS 파일이 필요합니다.

요청 첫 페이지만 SSR/SSG 이라는 것은 nextjs에서 제공하는 getServerSideProps, getStaticProps 으로 미리 props를 받아서 사전 렌더링(Pre-rendering) 진행해 놓는 것 입니다. 사전 렌더링된 HTML에는 당연히 JS 파일을 로드하는 script가 포함되어있습니다.

아래의 사진은 npx create-next-app@latest 으로 생성된 기본 보일러 플레이트에 브라우저에서 JS 사용 중단 후 렌더링 된 화면 인데 사전 렌더링 돼서 화면이 보이는 것을 확인할 수 있으며 이외 JS 파일을 다운로드하는 마크업도 확인하실 수 있습니다.

[jeus0630]

@parkgang

답변 너무 감사합니다.

첫 페이지 이후 CSR을 하며 당연하게 JS파일을 받아오고 실행한다 라는 것 까지 이해 했습니다.

실제로 네트워크 탭을 확인해 보았을시에 첫페이지 이후에 따로 HTML을 내려받지 않더라구요.

여기서 궁금점이 React, Vue 처럼 CSR을 하게 되면 페이지소스보기 시에 렌더링 된 화면과 다르게 빈소스가 출력되잖아요? JS가 돔조작을 통해서 렌더링을 하게 되니깐요.

하지만 NextJS를 사용시에 페이지소스보기 시에 렌더링 된 페이지와 일치하는 소스코드가 보여지는게 이해가 되지 않습니다. 당연히 첫 페이지는 SSR/SSG이니 렌더링 된 페이지와 일치하는 소스코드가 보여지는건 맞는데 그 이후에 CSR으로 라우팅된 페이지 또한 어떻게 페이지 소스보기시에 소스코드가 다 들어가 있는것인가요?

새롭게 서버에서 받아오지 않고 JS로 렌더링을 하는데요...ㅠㅠ

[jeus0630]

@parkgang

제가 페이지 소스코드 보기에 대해서 잘못이해하고 있었습니다 ㅎㅎㅎ
검색을 통해서 해당 부분은 해결 되었어요.
다시한번 감사합니다!

[sbin0819]

정말 좋은 글이군요
감사합니다 ㅎㅎ

[devyouth94]

좋은 내용 감사합니다!! 덕분에 이해가 확 됐어요.