[렌더링 방식의 분석] 가브리엘(윤주현) 미션 제출합니다. #84
Conversation
There was a problem hiding this comment.
피드백
제 생각에는 페이지를 사용하는 구조(데이터가 자주 바뀌는 페이지)에서는 SSG를 적극 도입하는 경우 관련 정보들을 미리 렌더링할 수 있다고 생각합니다.
NEXT.js 13의 app router에서는 특정 함수를 통해 SSR, SSG, ISR로 렌더링 방식을 나누기보다 캐싱 전략으로 렌더링 방식을 나누고 있기 때문에 서버 컴포넌트와 클라이언트 컴포넌트에 대해서만 설명하고 SSR, SSG, ISR이라는 키워드가 따로 나오지 않는 것 같아요.
각설하고, SSG는 캐싱 전략 중 force-cache로 강제 캐시를 취하고 있기 때문에 빌드 타임의 데이터 정보가 항상 같을 것인데 데이터가 자주 바뀌는 페이지에 어떤 부분이 어울린다는 의미인가요?
특히 게시판 같은 사이트에서는 빌드 시점에서 이미 페이지로 진입할 수 있는 api로부터 id를 미리 얻어내고, 해당 정보를 바탕으로 다음 상세 페이지들을 pre-rendering 했을 때 많은 이점을 봤을 것 같아요. generateStaticParams를 활용했다면 SSG의 강점을 최대한 살려서 사용자 경험 또한 아주 많이 개선되었을 것이라고 생각합니다.
generateStaticParams 같은 경우 page router의 getStaticPaths와 비슷한데요. 올려주신 링크에도 잘 나와있듯이 dynamic routes 중 static하게 빌드할 페이지를 의미하는 것입니다.
dynamic routes란 app/blog/[slug]/page.js와 같은 폴더구조가 있을 때, [slug]로 표시된 라우트를 직접 라우트마다 폴더를 만들어주는 것이 아닌 동적으로 만들어주는 것입니다. react router를 사용하실때 /blog/:id와 같은 라우트 경로를 사용하셨을텐데요. 해당 기능과 비슷하다고 생각하시면 될 것 같아요.
설명해주신대로 다음 상세 페이지들을 pre-rendering 했을 때 많은 이점이 있을 것 같지만 게시판 자체는 글이 새로 등록될 때마다 바뀌어야 하므로 SSR 또는 자주 글을 업데이트 하지 않아도 되는 경우 ISR이 될 것 같네요.
블로그처럼 글을 직접 올리는 경우에는 SSG로 모든 글을 generateStaticParams를 활용하여 정적으로 생성할 것 같구요.
빌드 된 파일이 특정한 시점에만 업데이트 되는 ISR 형태로 구현해봤을 것 같아요.
👍👍
요구 사항
분석은 저장소의 md파일을 추가하여 작성해주세요.
마크다운 파일로 작성하여 요청 보내주세요 😊
여담
step1 머지된 것을 rebase하지 않고 step1 작업하시던 것에서 브랜치를 파서 시작하셨네요?!
이전 커밋들이 다 남아있어서 커밋이 중복으로 올라갈 것 같아요~
README 수정하시면서 rebase하여 force push 해주셔도 괜찮을 것 같습니다.
|
ISR을 설명하려고 했었는데 SSG라고 적었네요ㅠㅠ ISR 방식으로 서비스를 구현한다면 게시글을 등록할 때 마다 revalidation 하게 해서 빌드된 파일을 업데이트 시킬 것 같아요. 말씀해주신 방법대로 기존 커밋 이력을 제거하고 새로운 파일로 옮겼습니다! 저도 문서를 읽다보니 공식문서에서 더이상 SSR, SSG, ISR로 렌더링 방식을 나누지 않는다는 것을 확인했었는데, 이것 때문에 굉장히 혼란스러�웠던 것 같아요. 이 이유가 캐싱 전략 떄문이라는 사실은 처음 알았네요...!! 좋은 리뷰 감사합니다. |
There was a problem hiding this comment.
변경 사항 모두 확인하였습니다 👍👍
저도 문서를 읽다보니 공식문서에서 더이상 SSR, SSG, ISR로 렌더링 방식을 나누지 않는다는 것을 확인했었는데, 이것 때문에 굉장히 혼란스러웠던 것 같아요. 이 이유가 캐싱 전략 떄문이라는 사실은 처음 알았네요...!!
렌더링을 바라보는 관점이 이전에는 빌드나 렌더링 시점을 더욱 중점으로 바라봤다면 지금은 데이터를 더욱 중점으로 바라보고 나누는 것 같네요.
지금은 서버 렌더링 전략이 크게 static rendering과 dynamic rendering으로 나뉘고 있구요. streaming도 있네요 🤔
이전 버전과의 용어를 조금 정리하고 싶다면 next 12와 간단하게 비교한 10분짜리 유튜브 영상을 보시면 조금 더 도움이 되지 않을까해요!
마지막 미션까지 고생 많으셨습니다. 가브리엘 👍👍
** 기존 문서를 이전 및 PR메세지를 수정했습니다.**
렌더링 방식의 분석