[SSR, CSR] 서버사이드 렌더링, 클라이언트 사이드 렌더링

정적웹페이지, 동적웹페이지, 클라이언트 사이드 렌더링, 서버사이드 렌더링에 대해 찾아보고 이해한대로 정리해보았다.

 

1. 정적웹페이지, 동적웹페이지

 

정적웹페이지는 서버에 있는 html+css를 그대로 보여주는 것.
동적웹페이지는 상황에 따라 서버에 저장되어있는 html에 데이터 추가/가공을 해서 보여주는 것.
정적 웹페이지는 추가적인 통신 &계산이 필요없어서 속도가 빠르고 서버에 부담이 적음.
그러나 변경될 때마다 html 자체를 수정해야해서 번거로움.
동적웹페이지는 상황에따라 다른 모습을 보여줄 수 있는 장점.
그러나 검색 엔진 최적화가 어렵다.

 

 

2. 클라이언트 사이트 렌더링 (CSR), 서버사이드 렌더링(SSR)

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

클라이언트 사이트 렌더링:
이미 있는 html에 바뀔부분만 js로 그때 그때 바꿔준다.

장단점:

처음에 모든 js 파일을 다운받아오느라 처음엔 느리다.

그러나 그 다음에는바뀔 부분 처리할 때만 서버에 요청하므로 페이지 전환이 빠르다.
Html이 비어있어서 데이터를 수집하기 어렵다는 문제점이 있다. (seo 문제됨)

*seo : search engine optimazation 내 데이터가 잘 수집되어서 검색에 걸리냐 안 걸리냐의 문제

 

 

2-2. 서버사이드 렌더링 (Server Side Rendering)

서버사이드 렌더링:

서버측에서 바뀔부분을 처리한다음 바뀐 html를 통째로 새로고침해서 보여준다.

장단점:

처음에는 빠르나, 이후 바뀔 부분이 생기면 바뀐부분을 처리한다음 Html을 다시 새로고침해서 보여주기 때문에 느릴 수도 있고 새로고침 때문에 ux측면에서 불편할 수도 있다. 

그러나 seo 면에서는 좋다. html의 정보가 처음부터 포함되어 있기 때문에 데이터를 수집할 수 있다는 장점이 있다. 

(Seo 문제안됨)