오늘은 휴일
휴일이지만, 언제나 코딩은 즐겁다 호호 😙
CSR, SSR, SSG 고민...
지난 회의에서 내가 개발하기로 한 부분은 목록 페이지와 그에 해당하는 정보들의 상세 페이지이다. 기본적으로 Next.js를 통해서 개발을 진행하기로 했지만, 현재 고민인 것은 "각 페이지를 어떤 방식으로 구현하는 것 좋을까?" 이다.
Next.js 는 기본적으로 SSR 을 통해서 페이지를 Pre-render 하고 있다. 그래서 페이지의 초기 로딩속도가 빠르고, SEO에서 장점이 있고 또한 Next.js 자체적으로 코드 스플리팅을 지원하고 있어서 Next.js 자체에 대한 스스로의 평가는 좋다고 생각한다.
Next.js의 코드스플리팅
Next.js는 Pages 폴더에 있는 Page를 처음에는 index 페이지만 불러오고 그 이후에는 각 페이지에 필요한 Component만 불러오는 방식으로 작동한다.
다만, 내가 만들페이지는 로그인 후에 개인정보들이 보여질 페이지이기 때문에 SEO가 필요없고, 또한 이 앱을 이용하는 사용자는 서비스의 특성 상, 정보 리스트와 상세 정보 화면을 수시로 왔다 갔다 할 것 이다. (그것도 아주 많이)
이런 것을 고려했을 때, 매번 새로운 HTML 파일을 응답받는 SSR 방식으로 이 페이지들을 구성한다면 아마 흰 화면이 수없이 깜빡깜빡 할 것이다.
그래서 조금 더 고민을 해봐야겠지만, 정보 리스트와 상세 정보 페이지는 CSR로 구현하는 것이 UX 측면에서 조금 더 좋지 않을까 생각이 든다. Next.js가 기본적으로 SSR을 통해 Pre-render를 지원하지만 next/link나 next/router를 이용해서 CSR도 사용 할 수 있도록 되어 있다.
사실 내가 구현할 부분에서 Pre-render가 필요한 부분이 있을까? 라는 고민을 하는게 더 빠를수도 있을 것 같다는 생각이 든다. 그리고 만약에 Pre-render가 필요하다면 그것을 SSG로 구현할지, SSR로 구현할지도 고민을 해봐야겠지.
Next.js 팀에서는 SSR보다 SSG를 권장하고 있다고 하더라. 근데 우리 서비스는 정보의 업데이트가 아주아주 빈번하고 하기 때문에 SSG는 어울리지 않을 것 같다라는 생각이 든다. 아마 SSR을 통해 구현을 하게 될텐데, 이때는 TTI 에 대한 이슈도 고민을 해봐야 한다. CSR에 익숙해져서 해보지 않았던 고민이었다. TTI는 Time To Interaction 이라고 해서, SSR을 통해 UI가 모두 화면에 표시되었다고 하더라고 JS 파일이 도착하지 않았을 때 사용자의 event가 먹통이 될 수도 있다고 한다. (예를 들어, 버튼을 클릭했을 때 아무 반응이 없다던가..)
왜 이 기술을 사용해야할까?
항상 새로운 기술을 사용하고자 할 때는, 그것이 새로워서, 좋아보여서 라기보다 그것이 정말 내가 만들 서비스에 적합한지, 장점이 되는지, 그리고 그것이 효율적인지를 꼭 확인해보는게 좋은 것 같다.
단순히 개발하는 것 자체보다도, 이것을 확인하는 과정에서 내가 모르던 것들을 더 공부할 수 있고, 공부를 할때도 방향성을 잡아주는 기준이 되는 것 같기 때문이다.
근데 SSR에서 Server는 뭘까?
나는 서버를 띄운적이 없다. 근데 서버에서 api를 요청해서 html파일을 만든다음에 클라이언트로 보내준다. 아니 대체 server side에서 말하는 server란 뭘까?
