SSR? CSR? 렌더링 방식의 차이와 이해

 

우리가 웹 또는 앱 개발을 완료한 후, 사용자가 이를 이용할 수 있도록 웹 페이지를 렌더링해야 한다. 이 렌더링 방식에는 차이가 있으며, 대표적으로 CSR(Client Side Rendering) 과 SSR(Server Side Rendering) 방식이 있다. 이 각각은 웹 애플리케이션이 사용자에게 어떻게 콘텐츠를 제공하는지에 대한 방식이다.

 

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

말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.

 

SSR 같은 경우 웹 개발에 사용되는 기술로, 서버에서 웹 페이지의 HTML을 생성하여 클라이언트 측으로 보내 브라우저에 표시한다. HTML은 서버 측에서 미리 렌더링되므로 로드 속도가 빠르고 *SEO에 좋으며 느린 인터넷 연결에 더 효율적이다. 이 프로세스는 또한 전반적인 사용자 경험을 개선하고 페이지 로드에 필요한 시간을 줄이는 데 도움이 된다. SSR을 사용하면 서버가 완전히 렌더링된 HTML을 클라이언트로 보내면 클라이언트가 JavaScript가 실행될 때까지 기다리지 않고 브라우저에 페이지를 표시한다.

 

위의 사진은 SSR의 단계를 설명한다.

 

1. 사용자가 브라우저를 통해 웹 페이지를 요청

2. 그 다음 브라우저는 해당 페이지에 대한 HTML과 CSS 코드가 미리 렌더링되어 있는 서버에 연결

3. HTML과 CSS는 사용자의 브라우저에 표시되지만 페이지는 아직 상호 작용할 수 없다.

4. 그러면, 브라우저는 서버에서 쉽게 사용할 수 있는 페이지의 JS를  다운로드 한다.

5. 이제 사용자는 페이지내의 요소와 상호 작용할 수 있다.

6. 브라우저가 JS를 실행한다.(DOM(문서 객체 모델)이 완전히 렌더링 된다)

7. 이제 페이지가 완전히 로드되어 사용자의 상호작용에 응답할 수 있다.

 

즉, 서버에서 이미 '렌더링 가능한' 상태로 클라이언트에 전달되기 때문에, JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다.

 

서버 사이드 렌더링(SSR)의 장점?

• SSR은 서버가 웹 페이지의 HTML을 생성하여 클라이언트 측으로 보내 브라우저에 표시하므로 로드 시간이 더 빨라진다. 이를 통해 사용자 경험이 더 매끄러워지고 클라이언트 측 렌더링(CSR)에서 일반적으로 나타나는 빈 페이지 깜빡임이 방지된다.
• SSR은 검색 엔진이 웹사이트의 콘텐츠를 쉽게 크롤링하고 색출할 수 있으므로 더 나은 SEO성과를 제공한다. 이는 더 높은 검색 엔진 순위와 더 많은 유기적 트래픽으로 이어질 수 있다.
• SSR은 느린 인터넷연결에서도 효율적으로 로딩할 수 있으며, 성능에 영향을 주지 않고 대규모 애플리케이션을 처리할 수 있다.
• 예를들어서 월마트 페이지의 경우 (Walmart.com) 은 페이지에 SSR을 사용하고, Electrode 프레임워크는 스택을 React 및 Node.js로 변환할 때 SSR 성능에 최적화되었다.

 

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

말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다.

 

CSR은 모든 페이지 리소스가 서버가 아닌 클라이언트 브라우저에서 렌더링되는 기술이다. 이는 브라우저 측에서 코드를 컴파일하고 생성하는 JS프레임워크를 사용하여 수행된다. CSR 은 Angular, VueJS, React SSR 과 같은 JS 프레임워크 및 라이브러리의 도움으로 통합될 수 있다.

 

위의 사진은 CSR의 단계를 설명한다.

 

1. 사용자가 브라우저를 통해 웹 페이지를 요청함

2. 서버/*CDN 은 필수 JS파일에 대한 링크가 포함된 HTML 페이지로 요청에 응답한다

3. 사용자에게는 해당 페이지가 보이지 않으며 로딩 표시가 있는 페이지만 보인다

4. 브라우저는 HTML의 링크를 통해 JS를 다운로드한다

5. 그런 다음 JS가 프레임워크를 통해 실행된다. 사용자는 이 단계에서 플레이스홀더만 볼 수 있다

6. 최종 요청은 최종 렌더링을 위해 서버로 전송된다

7. 이제 사용자는 페이지에서 요소와 상호작용 한다

 

클라이언트 사이드 렌더링(CSR)의 장점?

• 빠른 렌더링 - 페이지가 초기 로드 시간 이후 빠르게 렌더링된다.
• 웹사이트 탐색을 더 빠르게 해준다. 이는 플레이스홀더가 먼저 로드되기 때문에 가능하다.
• 서버에 부담을 덜 준다. JS는 클라이언트의 브라우저에서 실행되므로 서버에 부담이 덜 된다.
• PWA(Progress Web Apps)와 함께 사용하면 놀라울 정도로 잘 작동한다. 이는 코드를 브라우저에서 완전히 렌더링할 수 있기 때문이다.

 

3. 언제 CSR을 쓰고 또 언제 SSR을 쓰는지?

SSR을 보통 사용하는 경우

1. 덜 역동적인 콘텐츠 - 웹 사이트에 정적 페이지가 많은 경우, 서버 측 렌더링을 사용하는 것이 좋다.

2. 간단한 사용자 인터페이스 - 모든 웹사이트가 똑같은 것은 아니다. 웹사이트가 간단한 사용자 인터페이스에 의존하고 로드할 페이지가 더 많지 않다면 서버 사이드 렌더링을 사용할 수 있다.

3. 적은 사용자 - 마찬가지로 웹사이트가 많은 온라인 트래픽을 받지 못한다면 서버 측 렌더링(SSR)을 생각하는 것이 좋다.

 

CSR을 보통 사용하는 경우

1. 동적 콘텐츠가 많은 경우 - 웹 개발자가 SSR 대신 CSR을 선호하는 이유 중 하나는 크고 동적인 콘텐츠 때문이다. 웹사이트의 애플리케이션이 더 나은 사용자 경험을 제공하도록 설계된 경우, 무거운 클라이언트 측 렌더링을 사용하여 사용자 경험을 보장하고 유지한다.

 2. 복잡한 사용자 인터페이스 - 오늘날의 웹사이트는 정적 페이지보다 동적 페이지가 훨씬 더 다양하다. 따라서 일부 웹사이트는 복잡한 사용자 인터페이스를 갖추고 있으며, 심지어 클라이언트 측 렌더링이 사용되는 데 필요한 사용자 경험을 제공하기 위해 여러 페이지가 필요할 수도 있다.

3. 많은 사용자 - 방문자와 사용자가 더 많은 사이트는 사이트를 탐색할 때 지연을 경험할 수 있다. 클라이언트 측 렌더링을 사용하면 빠른 성능과 뛰어난 사용자 경험을 보장할 수 있다.

 

 

 

 

 

*SEO : Search Engine Optimization(검색 엔진 최적화), SEO는 검색 엔진으로부터 웹 사이트나 웹 페이지에 대한 웹 사이트 트래픽의 품질과 양을 개선하는 과정

 

*CDN : Content Delivery Network 은 지리적으로 분산된 서버들을 연결한 네트워크로서 웹 컨텐츠의 복사본을 사용자에 가까운 곳에 두거나 동적 컨텐츠(예 : 라이브 비디오 피드)의 전달을 활성화 하여 웹 성능 및 속도를 향상할 수 있음.