인프런 커뮤니티 질문&답변

mungyun1234님의 프로필 이미지

작성한 질문수

한 입 크기로 잘라먹는 Next.js(15+)

2.13) SSG 1. 소개

SSR과 SSG는 동시에 사용할 수 없는 것으로 알고 있습니다! SSG를 사용하는 빈도수가 그렇게 많지 않을 것 같은데 제 추측이 맞을까요??

해결된 질문

24.10.09 14:45 작성

·

84

·

수정됨

0

제목과 같습니다!

SSG와 SSR을 동시에 사용할 수 없을 뿐더러

요새는 하나의 페이지에 정적인 데이터만 존재하는 페이지는 거의 없다고 생각하거든요

 

떄문에 과연 프리패칭은 하고 싶지만 정적인 데이터가 너무 커서 SSG를 선택하는 경우의 수가 얼마나 있을까?? 하는 추측이 드는데요.

저의 이런 추측이 충분히 가능성 있는 의문인지 궁금합니다!

답변 3

1

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

2024. 10. 10. 10:19

안녕하세요 이정환입니다.

우선 답변드리기 전에 mungyun1234님 정말 멋지다는 말씀 드리고 싶어요!

단순히 강의 내용을 듣고, 정리하시는 수준을 넘어 스스로의 고찰 단계 까지 거쳐보셨군요 정말 멋지고 훌륭한 방식이라고 생각합니다. 고찰이 잘못되었든 잘 되었든 좋은 방향이라고 생각해요 진심으로요 👍

 

다만 아쉽게도 완벽한 정답은 아니였습니다 ㅠㅠ 😭
(정답을 바로 찾아내는게 더 이상하죠! 너무 속상해하지는 마세요)

정확한 수치를 알 수는 없지만 보통은 SSG가 SSR보다 더 많이 활용됩니다. SSR은 응답 속도가 느려질 수 있는 이슈가 있기도 하고, 또 향후 챕터에서 배우실 ISR 등의 추가 설정을 통해 주기적으로 데이터를 갱신하는게 가능하거든요

또 데이터의 변경이 잦지 않은 블로그 페이지의 경우에는 빌드를 아예 새롭게 하기도 합니다. 그럼 SSG로 페이지를 유지해도 빌드할 때 마다 새로운 데이터로 새롭게 페이지를 생성하므로 최신 데이터를 보장할 수 있게 됩니다.

우리 인프런 서비스의 지식공유자 페이지도 살펴보니 SSG 방식으로 이루어져 있네요 (아마 ISR을 통해 주기적으로 최신 데이터를 반영하고 있는 것 같습니다)

0

조조님의 프로필 이미지

2024. 10. 09. 15:25

제가 알고있는 바로 설명을 드리면, 주로 현업에서 사용하는 cdn cache를 적극적으로 사용하기 위해서는 ssg를 선택하는 경우가 많은것으로 알고 있습니다.

요새는 하나의 페이지에 정적인 데이터만 존재하는 페이지는 거의 없다고 생각하거든요

이 질문에 대해서는 정적인 데이터만 존재하는 페이지는 없지만, 사용자 개인의 데이터들은 skeleton ui로 처리하고 client side에서 업데이트 하면 되기 때문에, 보완이 가능합니다.

0

인프런 AI 인턴님의 프로필 이미지

2024. 10. 09. 14:51

안녕하세요, 인프런 AI 인턴입니다. mungyun1234님!

Next.js에서 SSR(Server-Side Rendering)과 SSG(Static Site Generation)는 확실히 다른 방식의 페이지 렌더링 방법입니다. 각 방법은 특정한 상황에서 장단점이 있어 개발자가 선택할 수 있습니다.

SSG와 SSR의 차이점

  • SSG는 빌드 타임에 HTML을 미리 생성하여 배포하는 방식으로, 정적 콘텐츠에 적합하며 페이지 로드 속도가 빠른 것이 장점입니다. 다만, 데이터가 빌드 시점 이후에 변경되어도 페이지에 반영되지 않는 것이 단점입니다.

  • SSR는 각 요청 시점에서 서버에서 HTML을 생성하여 반환하는 방식입니다. 이는 실시간 데이터 반영이 가능하다는 장점이 있지만, 요청 시마다 페이지 렌더링을 하므로 SSG에 비해 초기 로드 시간이 길어질 수 있습니다.

SSG가 여전히 중요한 이유

SSG를 사용하는 상황이 적다고 생각할 수 있지만, 실제로 많은 사이트에서 SSG를 사용합니다. 그 이유는 주로 다음과 같습니다:

  • SEO 성능: 정적 페이지는 검색 엔진 크롤러가 쉽게 접근하여 페이지 인덱싱 시 유리합니다.

  • 빠른 페이지 로드: 특히 대규모 트래픽에도 일정하게 빠른 페이지 로드를 제공할 수 있습니다.

  • 정적 콘텐츠: 말 그대로 고정된 콘텐츠, 예를 들어 블로그 글, 상품 소개 페이지 등에는 매우 유리합니다.

프리패칭과의 관계

SSG와 프리패칭은 서로 배타적인 개념이 아닙니다. SSG로 생성된 페이지에서도 프리패칭을 통해 사용자 이동 시 부드러운 전환을 제공할 수 있습니다. 프리패칭은 사용자가 방문할 가능성이 높은 페이지의 자원을 미리 받아두는 데 중점을 둡니다.

관련 질문과 답변

아래 링크들은 SSG와 관련된 유사한 질문들로, SSG와 SSR을 효과적으로 결합하는 방법에 대해 더 깊이 이해하는 데 도움될 수 있습니다.

  1. 정적 사이트 생성 (SSG)에서 빌드 타임에 데이터를 요청한다면…

mungyun1234님의 추측도 충분히 타당한 의문입니다. 그러나 SSG가 주는 이점도 많아 대부분의 기업과 팀에서는 두 렌더링 방식을 상황에 맞게 선택 및 혼합하여 사용합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.