인프런 커뮤니티 질문&답변
작성한 질문수
Page Route와 App Route의 빌드 질문
해결된 질문
작성
·
186
·
수정됨
0
안녕하세요. 강사님 좋은 강의 감사드립니다.
빌드 기호에 관해 질문있습니다.
영상 19:05초에
App Router의 Static은 Page Router의 SSG와 같다고 하셨는데요.
Page Router의 기호
App Router의 기호
보시는 바와 같이 Page Router의 Static과 App Router의 Static 문구가 같습니다. (prerendered as static content)
궁금한것은
1
App Router의 Static이 Page Router의 SSG와 같다면
왜 App Router Static 설명이 Page Router SSG인 (prerendered as static HTML) 설명이 아닌 Page Router의 Static과 동일한걸까요? (prerendered as static content)
즉 App Router의 (Static): prerendered as static HTML이어야 맞는 거 아닌가요?
(Static) prerendered as static content
왜 인 걸까요? 헷갈리네요 ㅜㅜ
2.
기존 Page Route의 Static은 어떤 식으로 동작한 건가요? 그냥 정적인 페이지인건가요?
감사합니다!
답변 2
1
안녕하세요 이정환입니다.
우선 Page Router의 SSG와 Static에 대해 먼저 말씀드리면 좋을 것 같아요!
결론부터 말씀드리자면 SSG와 Static은 사실 동일합니다. 둘 다 빌드 타임에 사전렌더링을 진행하여 정적인 페이지를 생성하는 방식으로 동작합니다. 따라서 Static이나 SSG나 모두 강의에서 안내드린 SSG 방식으로 동작한다고 이해하시면 됩니다.
그런데 이 시점에서 한가지 의문이 드실 수 있을 것 같습니다 "그렇다면 왜 표기를 다르게 하는거지? 둘 다 SSG로 통칭하면 되는거 아닌가?"
이 의문에 답변드리자면, 우선 SSG에는 데이터가 있는 형태와 없는 형태가 있습니다. getStaticProps를 사용할 경우 데이터가 있는 형태의 페이지가 될 것이고, 그렇지 않을 경우에는 별도의 데이터가 필요하지 않은 페이지가 되겠죠
이때 Next.js는 데이터가 있는 형태의 SSG 페이지, 즉 getStaticProps를 사용하는 SSG 페이지는 "SSG" 라고 표기합니다. 반면 데이터가 없는 형태의 SSG 페이지, 즉 getStaticProps를 사용하지 않는 SSG 페이지는 "Static"이라고 표기합니다.
참고로 해당 내용은 Vercel의 공식 답변으로도 남겨져 있습니다.
https://github.com/vercel/next.js/discussions/58593#discussioncomment-7601331
따라서 결론적으로 Static과 SSG는 다르지 않다고 보셔도 될 것 같습니다. 그냥 둘 다 SSG 방식으로 동작하는 페이지이지만 데이터 필요의 유무에 따라 표기만 다르게 된다고 이해하시면 됩니다. 동작 방식은 동일합니다!
마찬가지로 App router의 Static 역시 Page Router의 SSG와 동일한 방식으로 동작합니다. 빌드 타임에 사전 렌더링 되어 정적으로 페이지가 생성됩니다.
-1
안녕하세요, 인프런 AI 인턴입니다. 김건희님께서 질문하신 내용은 Next.js의 빌드 프로세스에서 Static과 SSG의 역할과 표시 기호에 대한 혼동을 해소하는 데 있습니다.
1. App Router의 Static과 Page Router의 SSG
App Router와 Page Router의 Static은 이름은 같지만, 표현 및 사용 방식에서 차이가 있습니다.
App Router의 Static: App Router에서는 콘텐츠가 사전 렌더링되어 정적 콘텐츠로 제공됩니다. 이 경우 서버에서 미리 생성된 HTML이 브라우저에 전달됩니다.
Page Router의 SSG (Static Site Generation):
getStaticProps를 사용하여 사전 렌더링된 HTML을 생성하는 방식으로, 이는 특정 시점에 정적 파일로 저장되어 요청 시점을 기준으로 미리 렌더링된 페이지를 반환합니다.
하지만 두 개념 모두 ‘사전 렌더링된 정적 콘텐츠’를 제공한다는 공통점이 있어 일부 문맥에서 구분이 애매할 수 있습니다. 이는 기본적으로 서버에서 미리 렌더링된 정적 HTML 파일을 전달한다는 점에서 공통되지만, 차이는 활용 방법과 상황에 따라 달라집니다. ‘Static content’라는 용어가 혼동을 줄 수 있지만, prerendered as static content라는 설명은 용어의 일관성을 유지하는 데 중요한 역할을 합니다.
2. 기존 Page Router의 Static
Page Router의 Static은 기본적으로 정적인 페이지라는 것을 의미합니다. 이는 사용자 요청에 대한 즉각적인 응답을 위해 미리 생성된 HTML로 구성되고, 파일로 저장된 후 클라이언트로 전달됩니다. 이러한 방식은 데이터가 변경되지 않는 페이지에 적합하며, SEO를 향상시키고 페이지 로드를 빠르게 만들 수 있는 이점이 있습니다.
이 개념들은 Next.js의 최적화와 성능 향상을 위해 도입된 기법임을 유념해 주세요. 이에 대한 자세한 설명은 Next.js의 공식 문서를 참고하시면 도움이 될 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.