CSR와 SSR API 요청 시 사용자에게 보여지기까지 렌더링 속도를 알아보기 위해서 작성해보았다. CSR의 정의 클라이언트 쪽에서 렌더링이 일어난다. 사용자로부터 요청을 받으면 서버는 클라이언트에게 HTML과 JS를 보내준다. 클라이언트는 파일을 받아 렌더링을 시작한다. 유저가 웹사이트에 요청을 보낸다. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다. 클라이언트는 HTML과 JS를 다운로드 받는다. (다운받는 동안 유저는 아무것도 볼 수 없다.🥱) 다운받은 JS가 실행되고, 데이터를 위한 API가 호출된다. (이 때 유저들은 를 보게된다.) 서버가 API로부터의 요청에 응답한다. API로부터 받아온 data를 자리에 넣어준다. 즉, 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드 되고, 실행이 끝나기 전까지 사용자는 볼 수 있는게 없다. *CDN: 콘텐츠 전송 네트워크(Content Delivery Network). 지리…

Next.js는 서버 사이드에서 데이터 Prefetching이 가능하다. Prefetch 하게 되는 데이터는 HTML 페이지가 클라이언트에게 전송되기 전에 준비되어 HTML에 포함되어 렌더링된다. React-Query는 Next.js의 서버 사이드에서 데이터를 Prefetch하여 로 넘겨주는 기능을 제공한다. 따라서 한 번 사이트가 로딩된 후에는 로딩 시간이 크게 단축된다는 점, SEO에 좋다는 장점이 있다. 사실 진행하고 있는 토이 프로젝트의 데이터는 데이터가 크지 않기 때문에 로딩 시간에 큰 차이가 없겠지만, Next.js를 이용한 SSR을 React-Query를 이용해서 데이터를 패치해보고 싶어서 알아보게 되었다. 공식 문서에서 보면 React-Query를 이용하여 SSR에서 데이터를 prefetch 하기 위해 두 가지 방법을 지원한다. 이 때 다음 두 가지가 지원되는 Next.js 에서 사용하기를 권장하고 있다. Static Generation (SSG) Server-sid…

NextJS를 사용하다가 헷갈리는 개념이 있어서 정리해보려고 한다. Hydrate는 간단하게 말하자면 서버단에서 렌더링 된 정적 페이지와 번들링 된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트단에서 HTML 코드와 React인 JS코드를 서로 매칭시키는 과정을 말한다. React의 웹페이지 구성 원리 React는 JS파일만을 이용하여 웹화면을 구성하는 원리를 가지고 있다. 그래서 실제 HTML 코드는 안에 내용이 하나도 없는 상태이다. (Client Side Rendering이 SEO에 적합하지 않은 이유이기도 하다.) 단순 뼈대만 있는 HTML document와 JS 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트단에서 JS코드들을 통해 웹화면을 렌더링하며 페이지를 그리게 된다. 위 코드처럼 에는 아무 내용 없는 기본 뼈대만 있고, 나머지는 의 자바스크립트 코드로 존재한다. 자바스크립트 코드에서 모든 화면을 렌더링한다. HTML DOM 요소 중 root 라는 아이디를 가진 엘리…