정말 오랜만에 올리는 포스팅 . . . .
그간 이런저런 일들이 있었는데, 일단 멋사 활동을 계속 병행하다보니 노션에 너무 익숙해져서, 그동안 내 개인 노션에만 기록하고 블로그는 까맣게 잊어버렸던 것 같다🥹
앞으로 블로그 포스팅도 다시 신경써야지 ..
여름방학에 멋사 10기의 공식적인 활동이 마무리되고, 남은 기간동안 교내 프론트엔드 트랙 부원들과 Next.js 스터디를 진행하고 있다.
다음 포스팅에서 관련 글을 정리하겠지만, 일단 간단하게만 설명하자면 기존에 클라이언트 사이드 렌더링만 지원하던 React와 달리 Next.js는 클라이언트 사이드 렌더링, 서버 사이드 렌더링을 적절히 병행하여 사용할 수 있다.
이러한 Next.js를 잘 활용하기 위해서는 기본적으로 SSR과 CSR의 차이점을 잘 이해하고 있어야 한다고 생각하기 때문에, 해당 글을 블로그에 정리하기로 결심했다.
웹 브라우저가 화면을 렌더링하는 방식은 크게 서버 사이드 렌더링 방식과 클라이언트 사이드 렌더링 방식으로 나눌 수 있다.
각각 어떤 식으로 웹 페이지를 렌더링하는지 먼저 알아보고, 둘의 차이점을 기록하고자 한다.
SSR (Server Side Rendering)
말 그대로 서버가 페이지를 렌더링하는 데 필요한 HTML 파일을 만들어내는 것을 의미한다.
즉, 서버 사이드 렌더링은 클라이언트가 서버에게 특정 페이지를 렌더링하는데 필요한 HTML 파일을 요청하고, 서버가 요청에 알맞는 완성된 HTML 파일을 응답하는 과정을 통해 화면을 렌더링하는 과정이다.
여기서 브라우저는 서버로부터 전달받은 HTML 파일을 렌더링하기만 하면 된다. (여기서 말하는 페이지 렌더링은, 브라우저가 HTML 파일을 해석하고, 이를 우리가 눈으로 볼 수 있는 예쁜 화면으로 바꿔주는 것이라고 생각하면 된다)
CSR (Client Side Rendering)
얘도 말 그대로 클라이언트가 페이지를 렌더링하는데 필요한 HTML 파일을 가져오는 것을 의미한다.
이렇게만 들으면 서버 없이 클라이언트가 어떻게 HTML 파일을 가져와. . . ? 라고 생각할 수 있는데, 더 자세히 적어보자면
클라이언트 사이드 렌더링에서는 웹 페이지 구성에 필요한 소스들을 미리 받아오고, 페이지 이동이 발생할 때마다 서버에 HTML 파일 요청 없이 클라이언트 내부적으로 페이지 이동이 일어나는 것이다.
클라이언트 사이드 렌더링에서는 서버에게 HTML 파일 그 자체를 요청하지 않고, 페이지를 구성하는데 필요한 데이터만 요청한다. 그리고 클라이언트가 전달 받은 데이터를 가공하여, 자바스크립트로 페이지를 구성한다.
SSR과 CSR은 어떤 차이점이 있나?
우선, 서버 사이드 렌더링은 페이지가 이동할 때마다, 그때그때 서버에게 HTML 파일을 요청한다.
반면에 클라이언트 사이드 렌더링은 페이지가 이동할 때마다 서버에게 HTML 파일을 요청하지 않는다.
더 자세히 적어보자면, 클라이언트 사이드 렌더링은 웹 페이지가 맨 처음 로딩 될 때, 해당 웹 페이지에 필요한 모든 소스를 담고있는 빈 HTML 파일을 받아온다. (정확하게는 HTML의 body는 비어있고, 웹 사이트를 구성하는데 필요한 javascript 파일만 담겨있다. 리액트에서는 이를 JSX 로 작성한다.)
그 이후에는 별도의 HTML 파일 요청 없이, 클라이언트에서만 페이지 이동이 일어나게 된다. 즉, 맨 처음 페이지에 접속한 이후에는 서버에게 HTML 파일을 요청하지 않고, 클라이언트가 알아서 페이지 이동을 한다.
서버 사이드 렌더링과 클라이언트 사이드 렌더링의 성능 차이를 가장 잘 이해할 수 있는 예로는, 특정 화면에서 다른 화면으로 넘어갈 때 둘의 화면 구성에 큰 차이가 없는 경우이다.
간단한 예제로, ‘내 프로필’ 화면을 생각해보자. 이 화면의 상단에는 회원의 닉네임과 프로필 사진이 있고, 그 아래에 ‘친구 목록’ 버튼이 있다.
이 ‘친구 목록’ 버튼을 클릭하면 ‘친구 목록’ 화면이 나타나고, 이 화면에서는 ‘내 프로필’ 화면과 유사하게 상단에는 회원의 닉네임과 프로필 사진이 그대로 있으며, 화면 하단에는 회원의 친구 목록이 나타난다.
이 경우에 SSR과 CSR 방식에서 각각 어떻게 동작하는지 살펴보자
SSR로 동작할 때
먼저 SSR 방식에서는, ‘친구 목록’ 화면을 렌더링할 수 있는 HTML 파일을 서버에게 요청한다.
즉, 앞 화면(= ’내 프로필’ 화면)에서 그대로 사용되었던 회원의 닉네임과 프로필 사진을 포함한 모든 정보들을 새롭게 다시 구성한 페이지를 통째로 다시 렌더링한다.
이때, 버튼을 누를 때마다 HTML 파일이 새로 바뀌기 때문에 브라우저 화면이 깜빡거리는 현상이 발생한다. 그리고 페이지가 이동할 때마다 서버에 요청을 보내고 응답 받아야하기 때문에, 페이지 이동 속도가 CSR에 비해 느리다.
CSR로 동작할 때
그리고 CSR 방식에서는, ‘친구 목록’ 화면에 필요한 데이터를 서버측에 요청한다. 그리고 여기서 응답받은 친구 목록 데이터를 원래 있던 ‘내 프로필’ 화면 하단에 추가한다.
즉, 상단에 있던 회원의 닉네임과 프로필 사진은 그대로 두고, 화면의 하단만 다시 렌더링하는 것이다.
이 경우에는 버튼을 누를 때마다 서버에는 데이터만 요청하고, 화면의 하단부만 리렌더링하게 된다. 따라서 SSR에 비해 페이지 이동 속도가 빠르다.
마무리
이렇게 SSR과 CSR의 특징과 둘의 차이점까지 알아보았다.
위의 예시만 보면, CSR 방식에서는 SSR 방식과 달리, 굳이 불필요하게 중복되는 부분을 다시 렌더링하지 않고 필요한 부분만 렌더링하면 되니까 CSR 방식이 훨씬 좋아보인다.
하지만 NextJS에서 두 방식을 병행하는 이유가 뭐겠는가. . . 분명 CSR이 좋아보여서 React로 CSR을 남발해서 사용했는데, 프로젝트가 커지다보니 이 방식에 단점이 보이니까, 그걸 보완하기 위해서 NextJS가 등장한 것이다.
두 방식의 장단점과 NextJS에서는 어떤식으로 동작하는지까지 여기서 다루게 되면 글이 너무 길어지니까, 관련 내용은 다음에 NextJS 관련 포스팅을 하게 된다면 그때 더 자세히 정리해야겠다.
노션에 있는 글을 그대로 옮겨 오기에는 . . 아무래도 정리가 필요해서, 노션 글이 정리되는대로 여기 올려보도록 . . !
