공부 중이라 잘못된 부분이 있을 수 있으니, 지적해 주시면 감사드리겠습니다 🙏
백엔드 2명, 프론트엔드는 나 하나로 팀 프로젝트를 했는데, 팀원 분께서 프론트엔드 관련 질문을 종종 주셨다. 그럴 때마다 두루뭉술하게 대답을 하는 경우가 많았는데, 잘 알지 못해서라는 점이 늘 죄송했다. 어제는 'Next.js'가 뭐예요? 하는 질문에 '어.. 리액트랑 같이 많이 쓰더라고요~ SSR!에 쓰는 거요!🤪'하고 말했는데, 정말 아쉽기 짝이 없는 대답이었다. 좀 더 알아보고 정리해 봤다.
CSR 이란?
-
Client Side Rendering
-
동작 원리
- 서버에서 index.html 을 받아온다
- index.html 에 링크된 js 를 서버에 요청한다 (웹사이트에 필요한 모든 로직이 담겨 있는 js 파일)
- 서버로부터 프레임워크, 라이브러리 소스코드 등 웹사이트에 필요한 모든 파일을 받아온다
- html 파일은 head, body 등 최소한의 정보만 담고 있으므로, 동적 코드를 전부 받아오기 전까지 빈 화면을 표시하게 된다
- 유저가 화면을 보는 시점에서는 모든 코드가 받아진 상태이므로, 모든 상호작용이 가능하다(TTV === TTI)
-
장점 👍
- 화면 깜빡임 없이 자연스러운 액션이 가능하다- 데이터가 변해야 할 때만 서버 통신을 하므로, 화면 전환 시 자연스럽게 이동할 수 있다
-
단점 💩
- 첫 페이지 로딩이 느리다
- 검색 엔진들은 첫 html 파일을 분석하여 사이트를 분석하게 되는데, 초기 html 파일이 비어있기 때문에 분석이 쉽지 않다(Low SEO)
SSR 이란?
-
Server Side Rendering
-
동작 원리
- 서버에서 필요한 데이터와 몇몇 동적 코드를 가져와 html 파일을 생성한다
- 이 html 파일을 브라우저에 랜더링한다
- 브라우저가 페이지를 보여줄 수 있으므로, 유저가 빈 화면을 보지 않아도 된다
- 화면을 띄운 후 나머지 js 를 받아오므로, 상호작용을 할 수 있게 되기까지 시간이 걸린다 (TTV < TTI)
-
장점 👍
- 첫 페이지 로딩이 빠르다
- 모든 콘텐츠가 html 파일에 담겨 있으므로, 검색 엔진 최적화에 좋다(Great SEO) -
단점 💩
- 클릭 시 전체 페이지를 서버에서 받아오는 것이기 때문에, 화면 깜빡임이 존재한다
- 서버 과부하가 걸리기 쉽다
TTV / TTI 란?
TTV : Time To View
TTI : Time To Interact
CSR 의 경우 TTV === TTI 이므로, 유저가 화면을 보는 동시에 모든 상호작용이 가능하다.
하지만 SSR 의 경우 TTV < TTI 이므로, 유저가 화면을 먼저 보더라도, 모든 상호작용을 하지는 못할 수 있다
정리
CSR 의 경우, 초기 화면 로딩 속도를 어떻게 빨라지게 할 지,
SSR 의 경우, TTV 와 TTI 의 차이를 어떻게 극복할 지 고민해야 한다
Next.js 란?
- CSR 과 SSR 의 장점을 적절히 섞어 목적에 맞게 이용할 수 있도록 지원해 주는 라이브러리
- 첫 화면은 SSR 을 통해 보여주고, 이후 페이지 이동 시 CSR 방식으로 브라우저단에서 처리하도록 할 수 있다
- 초기 화면의 느린 로딩 속도 극복, 잦은 서버 통신 극복 가능
느낀 점
Next.js 를 공부해야겠다...*
참고 자료 🙏
참고 영상 - 드림코딩엘리
참고 자료 - Naver D2
참고 - CSR, SSR 에 대해 알아보자
참고 - Next.js 그게 뭔데?
