4-3장의 스타일 이전까지 읽고 적는 포스팅입니다.
이 개인 블로그도, Next.js의 13버전으로 만들게 되었었는데요, 책내용에서는 page라우터 관련해서 설명이 적혀있어서 page라우터에 대해 공부할 수 있어서 좋은 기회였습니다.
이 4-3장의 개념을 접하기 전에 저는 이전에 이 블로그를 만들면서, 그냥 라우팅을 하면 배포했을 때 많은 에러를 마주했었는데, 대부분 문제가 SSG, SSR로 라우팅으로 할 것인지에 대한 문제였습니다.
문제 해결점은 아래에 있습니다.
generateStaticParams로 SSG 배포하기
📌 page라우터와 app라우터의 라우팅 차이
제가 간과하고 있었던 점은 13버전에서 앱 라우터로 변경되면서, 페이지나 컴포넌트마다 서버 컴포넌트인지, 클라이언트 컴포넌트인지 디렉티브를 넣는 차이가 있다는 점이었습니다. 앱 라우터에서는 'use client'문구를 최상단에 기입하지 않는 이상 서버에서 라우팅되는 것이 디폴트인데요, 페이지 라우터에서 SSR로 배포하는 getServerSideProps같은 경우가 use client를 쓰지 않는 경우와 비슷하다고(?) 이해했습니다.
이외에도 페이지 라우터에서 getStaticPaths와 getStaticProps를 사용해서 SSG로 배포하던 것을 앱 라우터에 와서는 generateStaticParams로 변경되었다는 것을 알게 되었습니다.
그리고 SSG 배포 같은 경우에는 앱 라우터 부분에 있어서 훨씬 간편하다고 느낀 것 같습니다.
추가적으로 페이지 라우터를 제대로 이해하지 못하고 있던 바가 있었는데요, 저는 먼저 앱 라우터를 먼저 사용해보고 페이지라우터는 사용해본적이 없었어서, api폴더에 대한 존재의 이유를 제대로 알고 있지 못했어요.
왜냐면 앱라우터에서는 그냥 서버컴포넌트에 async를 붙여주고, 컴포넌트 내에서 데이터를 받아오는 작업을하고, 데이터를 html에 스르륵 뿌려주면 되는 방식으로 알고 있었거든요. 그런데, 페이지 라우터에서는 따로 api폴더 내에서 데이터를 받아오고 그다음에 컴포넌트에 주입하는 식이여서 이런것도 다르다고 확실히 체감할 수 있었습니다.
그리고 페이지 라우터는 자바스크립트 코드가 없다면 알아서 SSR로 배포해도 된다고 인식하고 배포된다는 것 같은데, 제가 제대로 이해한 바가 맞는지 모르것네요 허허 🤣
기본적으로 이번 장은 CSR, SSR, SSG, ISR에 대한 지식이 기반으로 있어야 이해가 되는 장이라고 생각했습니다.
CSR, SSR, ISR, SSG 알아보기
이전에 정리해둬서 너무 다행이라는 생각이 들었습니다..
또 이번장은 저번에 실험했던 Next.js 렌더링 방식에 대해서도 이해하고 있으면 훨씬 편하게 이해할 수 있는 장이라고 생각합니다.
Next.js의 프리렌더링, SSR, SSG
