SSR

Next.js14를 기준으로 App router와 Pages router를 각각 CSR/SSR/SSG/ISR을 구현해 봤다.왜 굳이 둘 다 한 거죠...?라고 한다면 처음에는 App router로 구현하여 동작과정을 확인하려고 했다. 하지만 내 예상과 다르게 동작해 둘 다 구현했다.실제로 둘 다 구현해 보니... 차이점이 있었다!구현에 사용한 예시는 API에서 시간을 받아와 화면에 보여주는 페이지이다. CSR (Client Side Rendering)사용자가 페이지에 진입할 때, 서버로부터 빈 HTML을 받아오고 이후 브라우저에서 JS를 통해 필요한 데이터를 API로 받아와 화면을 그린다. 즉, 초기 로딩 시에는 빈 화면이 나타나고 JS가 실행되고 데이터가 로드된 후에 콘텐츠가 나타난다.예시 코드impo..

Next.js 프로젝트를 하면서 SSR을 잘 활용하지 못한 거 같아서 마음 한구석이 찝찝했다...😃그래서 이번 기회에 SSR을 활용하여 리팩토링 해봤다. Next.js에서 제공하는 data fetch과 캐싱 등을 이용할 수 있지만 무한스크롤, 로딩 처리 등 더 다양한 기능이 있어 react query가 더 유용할 거 같아 react query를 선택했다.(+ Next.js 14 App router와 react query v5를 사용하고 있습니다!) 클라이언트 렌더링과 서버 렌더링서버 렌더링은 사용자가 페이지를 로드하는 즉시 볼 수 있는 내용을 제공하기 위해 초기 HTML을 서버에서 생성하는 것을 말한다. 이는 페이지 요청 시마다 발생(SSR)할 수 있고 빌드 시 미리 발생(SSG)할 수 도 있다. 일반..