서버사이드 패칭을 안하는 것 고려 필요성

서버사이드 패칭 === getServersideProps 안에서 일어나는 모든일

서버사이드 패칭 이슈 (주의: 서버사이드 렌더링을 하지 말자는게 아니라 서버사이드 패칭을 안하는 것임)

• 완전히 데이터가 채워진 첫 화면 but 서버사이드 패칭으로 인해 첫 화면을 보여주는데 까지 시간이 걸림
  • 조삼모사, 클라이언트로딩이 서버사이드 로딩(네이티브 로딩바)으로 변경됬을 뿐 전체 속도면에서 얻는 것은 별로 없어 보임
  • 실제 FMP(first meaningful paint) 측면에서는 서버사이드 패칭 안하는게 훨씬 더 빠를 수 있음
• static optimization 이 안됨
• api호출 로직이 getServerSideProps와 Query Hook에 양분되서(산탄총 수술) 응집도 하락
• SSR safe가 필요한 영역 때문에 서버사이드에 로딩바만 보여줘야할 상황에는 서버사이드 렌더링에 이점이 거의 없어 보임 → 물론 이 부분은 개선 가능
• 실험키, 토큰 등 개발자가 신경 써야할 영역 증가 → 서버사이드 패칭 안했을 때 아무 이슈가 없던 영역이 Next쓰면서 고려해야할 게 많아짐
• 팀, QA팀 QA시에 찰스 사용이 불가능함 (진규님이 열심히 써주셨지만 web QA 할시에는 활용할 수 가 없는 상황)
• api 레이턴시 발생 From

• 보안적인 이슈가 있을 수 있는데(내부망 api가 퍼블릭으로 갔다가 다시 내부망으로 들어가기 때문), 요 부분은 아직 제대로 검토된 적 없긴 함

서버사이드 패칭을 안하면 얻을 수 있는 것

• 서버 에러에 대한 핸들링 및 분석 안해도 됨
• static optimization 으로 보다 빠른 첫번째 화면 보여줄 수 있음 https://nextjs.org/docs/advanced-features/automatic-static-optimization#how-it-works
• 팀, QA팀 QA시에 찰스 사용 가능하기 때문에 서버에서 각 케이스별로 목데이터를 생성하고, 각 계정마다 넣어주거나 할 필요가 없음
  • 찰스는 클라이언트 api call을 proxy하기 때문에 severside 렌더링을 사용할 수 없음
• 실험키, 401, ios, android 구분 등에 대한 문제에서 자유로워 짐

서버사이드 패칭을 안할 때 고려해야 할 것