NEXT.JS : SSR vs CSR

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

목표

1. 이전 포스트에서 usePathname의 에러를 왜 use client가 해결하는지 이해
2. client component가 무엇인지 알아보기

SSR vs CSR

rendering
react component(JavaScript function)를 브라우저가 이해하는 html로 변환하는 작업

CSR : Client side rendering
모든 렌더링이 클라이언트 측에서 발생.
클라이언트는 자바스크립트를 로드하고, 자바스크립트가 UI를 빌드함.
자바스크립트가 로드되기 전에는 UI가 없기 때문에 브라우저에 아무것도 없는 순간이 발생함.
※예시) 페이지 로드시 화면 깜빡임
Google을 비롯한 검색엔진들은 페이지에서 자바스크립트를 실행시키지 않기 때문에 검색엔진 기준으로 CSR은 빈페이지로 보여짐. 따라서 SEO에 부적합함.

SSR : server side rendering
NextJS로 웹 사이트를 빌드할 때, 기본적으로 SSR을 사용함.
여기서 말하는 server는 브라우저나 front가 아닌 backend server를 말함.
자바스크립트가 비활성화 되어있어도 최초의 UI빌드는 user에게 보여짐.
최초의 UI빌드는 자바스크립트에 의존하지 않음.

❗client component, server component, use client를 사용한 component 모두 SSR이 작동함

use client는 client server가 아니다
명칭이 use client이기 때문에 client단에서 render된다고 생각되지만 server측에서 render된다. 개발자도구에서 자바스크립트를 끈 상태에서 콘솔을 찍어보면 확인이 가능하고 한다.
server쪽 console에 출력된다고 하는데 그게 어디에 있는지 모르겠다...내가 할 수 있는건가?

요약

Next.js의 SCR은 컴포넌트와 페이지 모두 server(back-end server)에서 render된다.