나만의 세미나 #01 (클라이언트 사이드 렌더링 & 서버 사이드 렌더링)

[ SPA (Single Page Application) ]

# 싱글 페이지 어플리케이션이란,

• 사용자가 한 페이지에서 머무르면서 필요한 데이터를 서버에서 받아와 부분적으로 업데이트하는 방식입니다.
• 결과적으로 페이지 이동 즉 URL이 변경하는 과정을 생략할 수 있습니다.
• 이렇게 사용자는 하나의 어플리케이션을 사용하듯이 웹 사이트 사용성을 최적화할 수 있습니다.
• PC 성능을 최적화 동시에 데이터 처리를 무리 없이 수행할 수 있으며 React, Vue, Angular와 같은 자바스크립트 라이브러리 또는 프레임워크의 등장으로 CSR(Client Side Rendering)이 대중화되었습니다.

 

[ CSR (Client Side Rendering) ]

# 클라이언트 사이드 렌더링이란,

• 클라이언트 측에서 모든 데이터 처리를 수행하는 작업입니다.
• 서버에서 인덱스라는 HTML 파일을 클라이언트에 보내준다. 이때 보내주는 HTML 파일은 추상적이며 단순히 id 루트를 가진 div 요소와 어플리케이션에서 필요한 자바스크립트 링크만을 가지고 있습니다.
• 그렇기 때문에 자바스크립트 파일이 로딩되기 전 처음 접속 시 빈 화면만이 보여집니다.
• 이후 자바스크립트를 서버에서 받아와 div 요소 안에 컴포넌트들을 그려주는 작업을 바로 클라이언트가 처리하며 이를 클라이언트 사이드 렌더링이라고 합니다.
• 그러나 서버에서 받아오는 이 자바스크립트 파일 안에는 어플리케이션에 필요한 로직과 어플리케이션을 구동하는 프레임워크와 라이브러리의 소스 코드들도 포함되어 있습니다.
• 그렇기 때문에 이 큰 자바스크립트 데이터를 받아오는데 많은 시간이 걸립니다.

# 클라이언트 사이드 렌더링의 취약점

• 첫 로딩이 많이 길다는 점
• SEO 검색 엔진 최적화에 취약하다는 점.
  • 사실상 HTML은 빈 문서로 노출될 수 있는 키워드가 없습니다.
  • 그렇기 때문에 검색 엔진은 HTML 파일을 스캔했을 때 아무것도 찾을 수 없습니다.

이러한 정적인 파일의 단점을 보완할 수 있는 서버 사이드 렌더링이 등장한 것입니다.

 

[ SSR (Server Side Rendering) ]

# 서버 사이드 렌더링이란,

• 클라이언트 사이드 렌더링과 반대로 서버에서 필요한 데이터를 가져와 HTML 파일을 생성해서 클라이언트에게 전달하는 방식입니다.
• 그래서 빌드된 파일들을 확인하면 HTML 파일 내에 많은 요소들이 그려져 있는 결과를 볼 수 있습니다.

 

# 서버 사이드 렌더링을 하면 무엇이 좋으냐.

• 첫 번째 페이지 로딩이 빨라지고, 이미 다 짜여있는 HTML을 그려주기 때문에 사용자는 최소한의 페이지 화면을 볼 수 있습니다.
• 또한 모든 콘텐츠가 HTML에 담겨 있기 때문에 조금 더 효율적인 SEO를 할 수 있습니다.

# 서버 사이드 렌더링으로 모든 것을 해결할 수 있을까?

결과 먼저 말하자면, 아닙니다.

• 첫 번째로 Static site에서 발생했던 깜박임 이슈가 여전히 존재합니다.
  • 사용자 클릭을 하면서 전체적인 웹 사이트를 다시 서버에서 받아오는 것과 동일하기 때문에 UX에 영향을 미칩니다.
• 두 번째로 서버에 과부하가 걸릴 수 있습니다.
  • 사용자가 많을수록 서버에 요청 수가 많아지기 때문에 서버가 처리해야 할 즉, 데이터를 가져와서 HTML를 하나하나 만들어주는 작업 또한 많아져 과부하 걸릴 위험성이 있습니다.
• 세 번째로는 사용자가 웹 페이지의 구성을 확인할 수는 있지만 정적인 요소들만 있을 뿐 동적인 자바스크립트를 다운로드하지 않은 상태이기 때문에 사용자에게 혼동을 일으킬 수 있다는 점입니다.
  • 클라이언트 사이드 렌더링은 첫 로딩에 많은 시간일 걸리는 반면  TTI(Time To Interactable)과 TTV(Time To Viewable)이 동시에 이루어집니다. 
  • 즉 화면이 보임과 동시에 사용자는 동작을 수행할 수 있다는 의미입니다.
  • 그러나 서버 사이드 렌더링은 최소한 정적인 요소들이 담겨있는 HTML을 빠르게 보여주지만 TTI(Time To Interact), 실제 동적인 자바스크립트 파일을 이후에 받아오기 때문에 TTV(Time To View)은 조금 나중에 가능하게 됩니다.
  • 그래서 TTI와 TTV 사이의 공백 기간이 꽤 긴 편입니다.