브라우저 렌더링 방식에는 크게 SSR과 CSR이 있다. 두 방식의 과정과 장단점 그리고 SSG를 간단히 알아보자!
SSR (Server Side Rendering)
💡 SSR은 서버에서 완성된 HTML 파일을 클라이언트에게 전달하는 방식이다.
TTV != TTI (페이지를 볼 수 있는 시점) != (페이지와 상호작용할 수 있는 시점)
SSR 과정
- 사이트 접속 시 클라이언트가 서버에게 데이터 요청.
- 서버에서 바로 렌더링 가능한 HTML파일을 완성해 클라이언트에게 전달.
- 사이트가 화면에 바로 표시. (JS파일 다운 전으로 화면만 보일 뿐 조작 불가)
- JS파일이 다운되고 사이트 조작이 가능하다. (JS파일 다운 전 조작한 내용을 기억하고 동작)
장단점
장점
- 사용자에게 보다 빨리 첫 페이지를 보여줄 수 있다.
- HTML파일로 받기 때문에 효율적 SEO가 가능하다.
단점
- JS파일 다운 전 사이트 조작이 불가능하다.
- 페이지 이동, 조작 시 서버에서 페이지를 다시 받아와서 깜빡임 현상이 발생한다. (나쁜 UX😡)
- 조작 시 페이지를 다시 받아와서 서버 부하를 줄 수 있다.
CSR (Client Side Rendering)
💡 CSR은 클라이언트가 서버에게 HTML, JS 파일을 받아 렌더링 하는 방식이다.
TTV == TTI
CSR 과정
- 사이트 접속 시 클라이언트가 서버에 요청을 보낸다.
- CDN이 JS, CSS링크만 있는 빈 HTML파일를 클라이언트에게 보낸다. (HTML파일에 내용이 없어서 빈 화면 표시)
- 클라이언트는 JS링크를 통해 JS 파일을 다운받는다. (JS안에는 로직, 라이브러리, 프레임워크 소스코드)
- JS가 실행되며 동적으로 HTML을 생성해 화면에 표시한다.
- 이 후 필요에 따라 서버에 데이터를 받아 부분 업데이트를 한다.
장단점
장점
- 초기 로딩 이후 구동 속도가 빠르다.
- 서버는 빈 HTML만 넘기면 되기에 서버 부하를 줄일 수 있다.
- 사이트 조작 시 서버에 필요한 데이터만 요청해서 빠르고 깜빡임이 없다.
단점
- 브라우저가 JS 파일을 다운받아 DOM을 생성하기에 초기 로딩이 느리다.
- HTML 파일이 비어있어서 검색엔진이 파악하기 힘들어 SEO에 취약하다.
SSG (Static Site Generation)
💡 SSG는 빌드시 HTML 파일을 미리 생성하는 하는 방식이다.
Next.js에서 권장하는 방식
빌드시 HTML 파일을 미리 생성해서 클라이언트 요청시 즉시 페이지를 제공한다. 즉, 페이지 요청시 재생성하지 않고 만들어진 페이지를 제공한다.
장점
- 생성된 HTML 문서를 재활용 해서 CSR보다 응답속도가 빠르다.
- 이미 생성된 HTML 파일을 받기 때문에 효율적 SEO가 가능하다.
단점
- 모든 URL의 개별 HTML 파일을 생성해야 한다. URL을 미리 예측할 수 없으면 적용이 어렵다.
추천
- 정적 생성된 정보를 각 요청에 동일한 정보로 반환하는 경우 (마케팅 페이지, 블로그 게시물, 제품의 목록)
