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

eko09님의 프로필 이미지

작성한 질문수

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

2.14) SSG 2. 정적 경로에 적용하기

수업 2.14 에서 search 페이지를 ssg로 하신 이유가있을까요?

24.08.22 17:50 작성

·

199

·

수정됨

2

이전에 그냥 ssr방식으로 페이지를 설정한게 더 효율적으로 보 이는데 search 페이지나 동적 경로를 사용하는페이지에 ssg로 하신이유가있을까요? 단순 이런 방법도 있다는 설명을 위해서 보여주신게 아니라면

ssg방식으로 바꿔서 html요소만 먼저 가져오고 그후에 클라이언트에서 서버로 요청을 보내서 받는게 어떤 장점이 있는지 잘모르겠습니다~

ssg는 보통 404 페이지 약관같은 요청에 대한 응답을 할필요없는 페이지에 적용하는게 좋지않을까싶은데 일반적인 페이지에서도 ssg를 사용해서 클라이언트에서 서버로 요청을 보내고 받는걸 많이 사용하나요??

답변 1

4

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

2024. 08. 23. 11:48

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

"SSR" vs "SSG(+클라이언트 사이드 데이터 페칭)"의 차이는

"데이터가 로딩될 때 까지 아무것도 화면에 보여주지 않기" vs "일부 데이터라도 먼저 보여주기" 의 차이로 보시면 될 것 같습니다.

Search 페이지를 SSR로 설정하게 되면 검색 API의 결과를 통해 페이지를 생성하기 전 까지 브라우저에게 아무것도 응답하지 않기 때문에 사용자는 이 시간동안 그냥 빈 화면을 보면서 기다려야 합니다.

반면 Search 페이지 자체는 SSG로 설정하고 검색 결과만 따로 클라이언트 사이드에서 API를 직접 호출해 데이터를 불러오도록 설정하면, 브라우저에서는 API 응답이 완료되지 않더라도 우선 Search 페이지의 레이아웃과 로딩바 정도는 보여줄 수 있기 때문에 사용자로 하여금 훨씬 더 좋은 로딩 경험을 제공할 수 있게 됩니다.

이는 마치 식당에 갔을때 물과 밑반찬 부터 먼저 내주는 것과 비슷하다고 생각하시면 될 것 같습니다. 메인 메뉴가 아무리 오래 걸리더라도 물과 밑반찬이 있으면 기다리는 상황이 그나마 괜찮게 느껴지는 것 같은거죠

피카님의 프로필 이미지

2024. 08. 23. 21:15

감사합니다!

물과 밑반찬 비유라니..

절대 까먹지 않겠네요! 👍 👍👍

eko09님의 프로필 이미지

작성한 질문수

질문하기