[TIL] Next.js 렌더링 방식

next.js 렌더링

next.js는 react에서 사용했던 CSR(Client-Side-Rendering)과 다르게 SSR이나, SSG 즉 서버측에 요청해서 화면을 그려주기 때문에 화면에 뿌려주기까지에 시간이 TTV(Time to view)가 빠른편이며 HTML파일을 받아서 화면에 그려주기 때문에 SEO에 친화적이다.

Client Side Rendering (CSR) - react방식

웹 서비스에서 렌더링을 해줄 때 클라이언트에 요청해서 화면에 렌더링 해주는 걸 말한다. 브라우저에게까지 전달되는 과정이 길기 때문에 사용자가 화면에 페이지가 보이기까지 시간이 오래걸리는 편이다.

Server Side Rendering (SSR)

html에서 그려주는 렌더링이 서버에서 실행되는 방식을 말한다. 자바스크립트가 실행되기 전에 화면을 보여주기 때문에 이벤트를 동작할 순 없지만 즉 TTI(Time to interactive)가 느리다. 화면에 렌더링 되는 속도가 빠르고 HTML 파일을 전달받기 때문에 SEO에 최적화 되어 있다.

Static-Site Generation (SSG)

정적 페이지를 의미하며, 이미 요청받은 페이지를 캐싱했다가 빌드되면 보여주는 방식이다. 업데이트가 잦은 페이지를 다루게 될 경우 빌드해놨던걸 다시 내려받아야 하기 때문에 렌더링까지가 좀 오래 걸릴 수 있어, 업데이트가 자주 이루어지는 페이지에는 적합하지 않다.