Next.js 01 - SSR 과 CSR

TypeScript 를 어느 정도 잘 사용할 수 있겠다는 생각이 들어서, 이제는 다음 스텝인 Next.js 공부를 시작했다.

Next.js 프레임워크의 가장 큰 특징 중 하나인 SSR 에 대해 헷갈려서 정리해 보기로...!

종류	설명
SSR (Server Side Rendering)	서버에서 렌더링
CSR (Client Side Rendering)	클라이언트에서 렌더링

 

1. SSR (서버 사이드 렌더링)

서버에서 HTML을 만들어서 클라이언트로 전송한다.

 

작성한 코드를 서버에서 HTML로 변환한 뒤, 브라우저에 렌더링하는 동안 JavaScript를 로드하여 인터랙티브한 웹을 완성한다.

이는 기존 React의 전통적인 방식인 CSR 를 짚고 나면, 더 잘 이해할 수 있다.

2. CSR (클라이언트 사이드 렌더링)

서버에서 HTML을 거의 비어 있는 상태로 보내면, JavaScript가 실행되면서 클라이언트에서 데이터를 가져와 렌더링한다.

 

React 에서 많이 쓰는 useEffect 를 생각하면 이해가 쉽다.

사용자가 초기에 특정 페이지에 접근했을 때는 빈 HTML 화면이 뜨고, 이후 렌더링 되는 형식이다.

 

그래서

기존에 React 렌더링에 초기 로딩 속도가 느리거나 검색 엔진이 크롤링하지 못하는 문제를 Next.js 라는 프레임워크로 해결할 수 있다.

단순히 CSR 렌더링 방식을 전부 SSR 로 온전히 바꾸는 것은 아니고, SSR 과 CSR 를 혼재하여 사용할 수 있다.

 

장점 및 단점, 주로 사용되는 상황

종류	장점	단점	주로 사용되는 상황
SSR	· 초기 로딩 속도가 빠름	· 페이지 이동 시마다 서버에서 새 HTML 을 생성하여 비교적 서버 부하가 큼	· 블로그, 뉴스 사이트
	· 검색 엔진이 HTML을 바로 크롤링할 수 있음	· 동적인 인터랙션이 많은 경우, 클라이언트에서 추가 처리가 필요함	· 초기 로딩 속도가 중요한 서비스
	· 초기 페이지에 대한 UX 가 좋음
CSR	· 최초 한 번만 데이터를 가져오면 이후 페이지 전환이 빠름	· 초기 로딩 속도가 느림	· 대시보드
	· 서버 부하가 비교적 적고, API를 활용한 동적 콘텐츠 로딩이 쉬움	· 검색 엔진이 바로 크롤링하지 못함	· 웹앱 (SPA)
		· JavaScript 실행으로 브라우저 성능에 영향을 받음	· 내부 시스템

 

 

 

참고 블로그

https://proglish.tistory.com/216