SSR NextJS 기능

페이지 1

• NextJS 자체 백엔드를 통해 제한된 API에서 클라이언트 처리가 아닌 서버 처리로 더 많은 기능 제작







• NextJS에서는 api route를 구성하여 자체 백엔드를 이용할 수 있습니다. 또 이 백엔드는 클라이언트와 백엔드에 대해 동일한 구조를 공유하기 때문에 요청과 재검증의 동기화가 가능합니다.
• 이번 프로젝트의 조건 한계를 보완하기 위해 저희는 기 존재하는 API의 별도 응용을 클라이언트에 부여하지 않고 NextJS 백엔드에 위임함으로써 관심사를 분리하고 쉽게 모듈을 사용하기 위한 노력을 했습니다.
• 그 응용 사례의 대표적 예시가 ‘싫어요’ 기능 구현이었습니다.

페이지 2

• SSR과 tanstack query prefetch를 통해 주요 화면에 대해 로딩을 노출하지 않고 좋은 사용자 경험 제공

• 저희의 메인 페이지는 보시다시피 노출하는 컨텐츠 양이 적지 않습니다.

• 그래서 다음과 같이 사용자의 FCP(First Contentful Paint)에 대해 좋은 경험을 부여하기 위해 전략적인 SSR과 CSR의 내용을 선택했습니다.

• 최초 사용자의 눈길이 가게 될 내용에 대해 서버사이드 렌더링으로 별도의 로딩 또는 스켈레톤 처리를 하지 않도록 하고, 그 이후에 상세 내용에 대해서 클라이언트 사이드 렌더링으로 전체 내용이 구성될 수 있도록 했습니다.

• 아래와 같이 실제 새로고침 시 구동 예시를 확인할 수 있습니다.



• (개 굿… 라우팅 아니고 새로고침 한거 맞습니다… 보여준 이후) 설명해 드린 바와 같이 첫 페인트 시에 필요한 컨텐츠를 대부분 제공하고 추후 렌더링 되는 요소가 일부 있는 것을 보실 수 있습니다.
 

페이지3

• NEXTJS13 app router를 도입
• 별도의 서드파티 라우터 없이 폴더 계층 구조를 통해 라우팅 구조를 설정할 수 있었습니다.
 

• NextJS 이미지 컴포넌트 등을 통한 이미지 최적화

• 이동 가능성이 있는 링크에 대한 prefetch