질문
Next.js에서 동적 경로(dynamic routing)를 구현하는 방법을 설명하고, getStaticPaths와 getServerSideProps를 활용하여 동적 페이지를 생성하는 차이점에 대해 살명해주세요.
질문의도
Next.js의 동적 경로(dynamic routing) 구현에 대한 이해를 평가합니다. getStaticPaths와 getServerSideProps의 차이점과 각각의 성능 및 SEO에 미치는 영향을 잘 이해하고 있으며, 실무에서 어떤 상황에 맞게 선택할 수 있는지를 확인하려는 의도입니다.
Dynamic Routing
Dynamic Routing은 [id], [...id], [[...id]] 와 같은 구성으로 만들 수 있다.
1.
[id]
•
2.
[...id]
•
Slug라고 표현을 하는데, 스프레드를 이용한 주소일 경우 여러개의 값을 받을 수 있다.
•
예시
◦
3.
[[...id]]
•
이부분을 쓸 일이 사실 있을까 싶다. 설명을 해보자면 posts/[[...id]]라는 주소는 posts라는 주소로 온다면 뒤에 없더라도 주소를 받아 처리하겠다는 의미이다.
getStaticPaths, getStaticProps
1.
getStaticProps는 SSG를 사용하기 위해 NextJS에서 제공하는 API이다.
2.
페이지 생성은 빌드 타임에 생성을 목표로 한다.
3.
getStaticPaths
•
이때 getStaticProps를 사용하는 페이지가 동적라우팅 주소로 되어 있다면, 빌드타임에 어떤 페이지를 생성할지 NextJS 빌더는 모를 수 있다. 이때 사용하는 API가 getStaticPaths이다.
•
getStaticPaths는 빌드타임에 "이 주소의 페이지들을 정적생성할거야." 라고 알려주는 이정표라고 생각하면 쉽다.
4.
장점
•
정적 페이지를 미리 생성하기에 유저가 브라우저에서 컨텐츠를 접하는 속도가 빠르다는 장점이 있다.
5.
단점
•
정적 페이지다 보니 동적으로 유저인터페이스를 다루어야하거나, 동적 데이터들을 다루어야할 경우 좋은 선택지가 아닐 수 있다.
getServerSideProps
1.
SSR을 하기 위해 NextJS 에서 제공하는 API 이다.
2.
SSR은 동적 페이지를 다루는데 좋은 렌더링 방식 중 하나이다.
3.
장점
•
SEO 입장에서 화면이 완벽히 그려지기 전에 컨텐츠를 먼저 접할 수 있다는 장점이 있다.
•
동적으로 자주 바뀌는 데이터를 페이지가 렌더링될때마다 새롭게 보여줄 수 있다.
4.
단점
•
유저가 컨텐츠를 접하는데 시간이 느릴 수 있다. CSR보다 느린 경우도 존재한다.
•
캐시, 비용 측면에서 많은 고민을 해야할 수 있다.
결론
1.
SSR이라는 기술과 SSG 라는 기술은 사실 웹기술에서는 예전부터 있던 기술이였다. SEO점수를 포기할 만큼 유저경험(UX)가 더 좋다는 CSR의 기술이 유행을 하면서 잊혀지고 있었는데, SEO라는 약점을 개선한 SSR, SSG, ISR 등의 기술을 기존의 CSR의 유저경험을 똑같이 제공하는 프레임워크들의 등장으로 필수 기술이 됐다.
2.
특히 NextJS에서는 Page Router, App Router 가 존재하며, Page Router의 단점을 극복하기 위해 App Router가 등장했다.
•
Page Router vs App Router
◦
Page Router의 단점은 번들링 파일 전체를 브라우저에게 보내준다. 이렇게 되면 유저가 실제로 동작을 하기 위한 페이지를 보는데에 있어 많은 시간이 소요될 수 있다는 단점 있다.
◦
App Router는 SSG, SSR 개념보다는 Server Component라는 개념과 Full Route Cache라는 개념이 존재한다. App Router에서는 Page Router에서 처럼 getServerSideProps, getStaticProps 등을 사용할 순 없지만, 비슷한 기능들이 존재한다. 빌드타임에 path를 지정해 미리 페이지 생성 등 캐시 데이터에 대해 핸들링 할 수 있는 API들이 존재한다.
•
Page Router 와 App Router 의 선택지는 기존 React 유저에게는 App router라는 개념보다는 Page Router의 개념이 러닝커브가 적어 쉽게 접근할 수 있다고 생각하고, App Router라는 선택지는 확실히 ServerComponent와 여러가지의 NextJS만의 철학등을 알아가야하는 러닝커브가 존재한다고 생각한다.