yoon-jj의 블로그
CSR과 SSR 본문
0. 시작하기전..
SSR이라는 단어를 듣게된것은 회사에서 SEO 프로젝트 회의에 참가했을때입니다.
ppt를 봐도 무슨말인지 모르는채로 나왔기 때문에.. 관련 내용을 공부하고 글을 정리해봅니다.
1. Static Web Page 정적 웹페이지 vs Dynamic Web Page 동적 웹페이지
정적 웹 페이지는 서버에 미리 저장된 파일(HTML..)을 받아와서 보여주는 방식이다.
다른 링크를 클릭하면 페이지 전체가 깜빡하며 페이지 전체가 업데이트된다.
동적은 정적과는 다르게 서버에서 페이지를 만들어서 보여주는 방식이다.
예를 들어서 로그인 후 보여지는 마이페이지가 있다.
로그인 하면 볼 수 있는 마이페이지.. 모두에게 똑같은 페이지겠지만 안에 들어있는 정보들은 사람마다 다르게 보일것이다.
정적 웹페이지의 경우 요청한 파일을 응답하기만 하면 되기 때문에 빠르다는 장점이 있지만, 저장된 것만 보여줄 수 있다는 단점이 있다.
동적 웹페이지의 경우 파일을 전달하기 전에 처리하는 작업이 있어 정적에 비해서는 상대적으로 느리다는 단점이 있을 수 있지만, 다양한 서비스를 제공할 수 있다는 장점이 있다.
추가로 Web 서버와 WAS의 차이는 여기에서 확인 가능
2. SSR (Server Side Rendering)
SSR은 전통적인 웹 방식인 정적 웹페이지에서 영감을 받아 도입된 방식이다.
클라이언트가 요청을 하면 서버에서는 필요한 것들을 이용해 HTML 파일을 만들고, HTML 파일과 동적으로 제어할 수 있는 스크립트를 클라이언트에 보낸다.
장점
1. CSR을 사용했을 때보다 페이지 로딩이 빠르기 때문에 사용자가 빠르게 화면을 볼 수 있다.
2. SEO에 효율적이다.
3. 정적인 사이트에 좋다.
단점
1. 페이지를 요청할때마다 필요한 부분만 바꿔서 보여주는 것이 아닌 새로운 페이지를 보여주기 때문에 화면이 깜빡이는 현상이 있다.
2. 서버에 계속 요청해야하기 때문에 서버 부하가 커진다.
3. 동적으로 데이터를 처리하는 파일을 받아오는 것이 느리면 사용자가 아무리 클릭을 해도 반응을 하지 않는 경우가 생기기도 한다.
SSR의 경우 장점도 있지만, 서버에 요청을 할때마다 새로운 화면을 만들어 보내주어야하기 때문에 서버에 부담이가고, 불필요한 트래픽이 발생하기 때문에 최근에는 CSR방식도 많이 사용한다고 한다.
3. CSR (Client Side Rendering)
CSR은 클라이언트가 렌더링을 하는 방식이다.
서버가 보내는 HTML에 모든 내용이 저장되는것이 아니라 처음에는 빈 HTML을 받고, 클라이어언트에서 자바스크립트르 이용하여 필요한 내용들을 만들어서 사용자에게 보여준다.
이후 필요한 내용들을 요청하면 서버에서는 필요한 데이터를 JSON으로 보내주고, 클라이언트가 알아서 재구성을 한다.
장점
1. 필요한 부분만 요청해서 받아오기 때문에 SSR보다 상대적으로 빠르다.
2. 요청시에 필요한 부분만 데이터를 받아오기 때문에 서버에 부담이 적다.
단점
1. 처음에 모든 파일을 받아와야하기 때문에 SSR보다 초기 속도가 느리다.
2. SEO에 취약하다.
마무리
오늘 알아본 SSR과 CSR 외에도 SPA에 대해서도 같이 적으려고 했으나 찾아보다보니 MPA에 대한 내용도 같이 적으면 좋을거같다는 생각이 들었습니다.
그래서 글을 나눠 다음 글에는 SPA와 MPA에 대한 글로 찾아오겠습니다.^0^
참고
The Benefits of Server Side Rendering Over Client Side Rendering
'개발 > 기타' 카테고리의 다른 글
| 방통대 3학년 1학기 (0) | 2023.06.21 |
|---|---|
| SQLD + 보수교육 (0) | 2022.01.30 |
| Github를 둘러보다보면 보이는 약어들.. (1) | 2022.01.30 |
