클라이언트 사이드 렌더링 VS 서버 사이드 렌더링

🤔 CSR(클라이언트 사이드 렌더링)이란?

👉 SPA(Single Page Application)는 클라이언트 사이드 렌더링 방식이다. SPA는 변경이 필요한 부분만 바꿔서 사용자한테 보여주니까 트래픽을 감소시키고 사용자에게 더 나은 경험을 제공했다. 서버는 단지 JSON 파일만 보내주고, html을 그리는 역할은 클라이언트 측에서 자바스크립트가 수행하게 된 것이다. 

 

👉 장점

1️⃣ 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.

2️⃣ 프론트 엔드, 백엔드 분리가 가능하다. 개발이 간단하고 능률적이다. 페이지를 렌더링 하기 위해 서버에 코딩할 필요가 없다. 대개 서버의 이용없이 파일로 부터 개발을 시작할 수 있기 때문에 시작하기가 훨씬 쉽다. 컴포넌트별로 개발이 용이하다

3️⃣ 앱과 웹이 동일한 서버를 이용할 수 있다. 

4️⃣ 서버가 해야할 화면 구성을 클라이언트가 수행하므로 서버 부담이 경감된다.

 

👉 단점

1️⃣ 처음 접속시에 사이트 구성과 관련된 모든 리소스를 한 번에 받기 때문에 초기 구동 속도가 느릴 수 있다. 처음에 실행될 때 빈 페이지가 보이는게 그러한 이유다.

2️⃣ 보안문제 사용자가 서버기반 세션이 아닌 클라이언트 기반 쿠키이다. 쿠키는 도용이 쉽기 때문에 문제가 발생할 수 있다. 

3️⃣ 검색엔진최적화(SEO)가 안 된다. 서버 렌더링 방식이 아니고 자바스크립트 기반 비동기 모델로 화면의 전환이 이루어지므로 크롤링하기가 힘들다. 프레임워크는 seo 대응 기술이 존재하고 있어서 필요하면 선별적인 대응이 가능하다.

 

 

🤔 SSR(서버 사이드 렌더링)이란?

👉 MPA(Multi Page Application)는 페이지를 이동할 때마다 새로운 페이지를 요청한다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 이 과정을 서버 사이드 렌더링이라고 한다. 쉽게 말해, 서버에서 html을 만들어준다.

👉 예를 들어, 브라우저에서 변경사항이 발생하면 서버로 submit 데이터를 전달해서 새로운페이지 렌더링을 요청하고 그 데이터를 표시한다. 이러한 애플리케이션들은 그 필요성 때문에 SPA보다 규모가 더 크다.

 

👉 장점

1️⃣ 느린 인터넷이나 기기에서 빠르다. 서버에서 렌더된 마크업은 모든 자바스크립트가 실행될때까지 기다릴 필요가 없다. 따라서 유저는 렌더링된 페이지를 보다 빨리 볼 수 있다.

2️⃣ SEO 관리에 매우 적절하다. 하나의 애플리케이션은 페이지당 하나의 키워드에 대해 최적화 될 수 있기 때문에 다른 키워드들은 랭크에 올릴 수 있는 더 나은 기회를 제공한다. 크롤러가 된 렌더링된 페이지를 바로 볼 수 있다. 

 

👉 단점

1️⃣ 개발이 매우 복잡하다. 개발자들은 클라이언트와 서버사이드 모두에 대해서 프레임워크를 사용해야 하며, 개발이 더 길어지는 결과를 이끈다.

2️⃣ 페이지 이동시 화면이 깜빡거리고 불필요한 템플릿도 중복해서 로딩된다. 성능 문제가 생긴다.

3️⃣ 모바일 앱 개발시 추가적인 백엔드 작업이 필요하다. 

 

 

📚 용어정리

1️⃣ 크롤링

👉 분석하기 쉽고 활용하기 쉽게 끔 데이터를 수집하는 행위 (크롤링하는 프로그램을 크롤러) + 페이지 안에 있는 데이터를 추출해서 가공하는 작업

 

2️⃣ 🔗검색엔진 최적화

 

👉 검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업을 말한다.  

👉 기본적인 작업 방식은 특정 검색어를 웹 페이지에 적절히 배치하고 다른 웹페이지에서 링크가 많이 연결되도록 하는 것이다.