안녕하세요!
오늘은 Server Component(이하: SC) 그리고 Client Component(이하: CC)에 대해 정리해보려고 합니다.
감자 기술 블로그에서는 최근 많이 사용되고 있는 기술을 전부 접목 시키려는 의도를 가지고 프로젝트를 시작하게 되면서 Tanstack Query(이하: TQ) 까지 적용을 해둔 상태입니다.
사실 뭣도 모르고 많이 쓴다니까 적용시킨 것이 사실입니다..
그래서 이제라도 왜, 언제, 어떻게, 어느 부분에서 TQ를 적용시켜야 하는 건지 알아보고 정리해보려고 합니다..!
Next.js 는 클라이언트 부담을 줄이고 최대한 서버에 부담을 넘기는 방식을 의지로부터 App Router 방식을 도입했습니다.
Next.js App Router 방식은 pages 방식과는 다르게 기본적으로 SC 로 작동하고 "use client" 선언을 통해 CC 로 사용할 수 있도록 설계되었습니다.
그럼 왜 SC 는 어떤 이점이 있기에 Next.js 에서 도입한걸까요?
서버에 대부분의 콘텐트를 렌더링하게 되면 클라이언트에 전송되는 JS 양을 최소화하게 되므로 SEO 와 초기 로딩 속도를 확보할 수 있다는 장점이 있습니다.
그러면 UX 측면에서 사용자는 "어, 이 웹 사이트는 되게 빠른데..?" 라는 경험을 만들 수 있게 됩니다..!
라고 저도 생각했습니다.. 허허
현재 감기블은 리팩토링 과정에서 오른쪽 하단의 태그 부분을 위와 같은 생각으로 SC 로 리팩토링을 진행했습니다.
그랬더니.. 어머..
태그를 클릭하니.. 로딩 속도가 너무나도 느려졌습니다..
그 이유가 태그를 클릭할 때마다 새로운 페이지를 서버에 요청하고, 전체 페이지를 다시 그려서 받아오는 방식이었기 때문이었습니다..
마치 매번 F5(새로고침) 하는 느낌..?
이때 떠오른 생각 하나가
상호작용하는 부분은 CC 로 구현하라고 했는데..?
그래서 SC 와 CC 그리고 TQ 에 대해 더 알아보았습니다..
결론부터 말하자면
기본은 SC, 사용자로 인한 변동이 생기는 부분은 CC + TQ입니다.
초기 로딩, 사용자 상호작용이 필요 없는 부분은 SC.
사용자의 어떤 행위로 인해 페이지 어느 부분이 변경되어야 한다면 CC+TQ.
SC 로 초기 로딩 속도를 끌어올리고 사용자는 CC+TQ 로 만들어진 부분에서도 CC+TQ 로 인해 답답함을 느끼지 않을 수 있게 됩니다.
React Query 는 Tanstack Query 의 이전 이름입니닷
TQ는 SC가 커버하지 못하는 CC 의 단점을 해결해 줄 수 있습니다.
또, 서버로부터 데이터를 가져오기, 캐싱, 캐시 제어 등 데이터를 기존보다 더욱 쉽고 효율적으로 관리할 수 있는 기능이 탑재된 라이브러리 입니다.
대표적인 기능은 아래와 같습니다.
그리고 아래와 같은 상황에 사용하면 됩니다..!
그래서 결론은.. 감기블도 이런 Next.js App Router 가 추구하는 방향으로 점진적 리팩토링을 진행할 예정입니다.
결국 프론트 개발자는 UX 적인 측면을 가장 고려해야 하는 것 같아요.
추후에 해당 내용을 반영한 후기(?)를 들고 오도록 하겠습니다..!
여러분도 Next.js App Router 방식으로 프로젝트를 진행하시게 된다면.. 기본적으로 SC와 CC 의 개념 그리고 어떻게 잘 써야하는지 개념을 다잡고 시작하시면 프로젝트에 큰 도움이 될 것 같습니다...!!
댓글 1
