SSR 페이지에서 API 응답이 느리다면 어떻게 개선할 수 있을까?

안녕하세요. 이번 글에서는 프로젝트를 진행하면서 성능을 개선했던 경험을 공유하고자 합니다. 저는 현재 현 회사에서 담당한 프로젝트 중 상세 페이지에 대한 전체 부분을 담당했습니다.  설명에 앞서 상세 페이지는 동적인 페이지로 Next.js Page router의 getServerSideProps을 사용하여 SEO에 필요한 데이터를 패칭한 점을 알려드립니다.  이로인해 블로킹 현상을 겪었고, 주 원인이 API 응답 지연으로 파악이 되어 해당 부분에 대해 클라이언트 측에서 개선한 점에 대해 다루었습니다. 요청 캐시는 이미 하고 있으므로, 캐싱에 대해서는 다루지 않고, 주로 페이지 전환시 블로킹되는 현상에 대한 부분에 대한 글입니다. 꼭 원인이 API 응답 지연이 아니더라도, 서버사이드에서 동적패칭을 한다면 ..
Frontend/NextJS 2024. 1. 30. 22:05
[nextJS] getLayout: 페이지간 상태를 공유하고 싶을 때

안녕하세요 오늘은 nextJS에서 제공하는 layout(v.13) getLayout()에 대해 다뤄보겠습니다. 회사 보일러플레이트에서는 현재 기존에 전역레벨에만 사용하던 Redux toolkit을 과감히 버리고 현재는 전역 / 지역마다 상태를 관리할 수 있는 React context API를 사용하고 있습니다.  실제로 사용하는 범위에서 상태와 핸들러를 관리하다보니 코드의 응집도가 높아서 매우 만족하며 사용하고 있습니다. context api의 렌더링 이슈는 use-context-selector가 나온 뒤로 적용시켜 리랜더링의 이슈도 (어느정도는)해결 되었죠.  공통된 로직과 패턴에는 provider를 각 페이지마다 감싸줘 공통된 로직과 패턴이라면 같이 사용할 수 있어 유용하게 사용하고 있는데요.작업을 ..
Frontend/NextJS 2023. 10. 31. 13:01
1