웹페이지는 정적 웹페이지와 동적 웹페이지로 구분 가능.
동적 웹페이지는 SSR 또는 CSR방식을 이용.
CSR과 SSR에 대해 비교해보자...!
SSR (서버 사이드 렌더링)
렌더링 위치:
SSR은 서버에서 이미 그려진 html을 받아와 페이지 전체를 렌더링.
죽, 서버에서 html을 생성하고 클라이언트한테 보냄.
장점:
1) 빠른 초기 로딩 속도: 이미 완성된 html을 브라우저에 보내기 떄문에, 페이지 그리는 시간이 단축됨.
2) 검색엔진의 최적화(SEO): 모든 콘텐츠가 검색엔진에서 크롤링 가능. 초기 렌더링이 서버에서 이루어짐으로.
3) 보안강화: 클라이언트에 필요한 데이터만 전달하므로, 중요한 데이터 노출 가능성이 적어짐.
단점:
1) 서버 부하: 많은 사용자가 동시 접속시, 서버 부하 증가할 수 있음. 특히 복잡한 페이지의 SSR은 서버 자원을 많이 사용.
2) 클라이언트 인터렉션 지연: 페이지 로드 후, 클라이언트에 추가적인 인터렉션 있을 시에, 서버에 재요청이 필요할 수 있어 느려질 수 있음.
3) 개발 복잡도: 특히 클라이언트와 서버 간의 데이터 동기화에 신경써야 함.
CSR (클라이언트 사이드 렌더링)
렌더링 위치:
CSR은 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식.
초기 HTML은 서버에서 받지만, 추가 콘텐츠는 클라이언트에서 JavaScript를 사용하여 렌더링함.
장점:
1) 빠른 페이지 전환: 초기 페이지 로딩 시에는 느릴 수 있지만, 이후 페이지 전환 시 페이지는 더 빠르게 업데이트 됨.
2) 대화형 경험: 웹 애플리케이션을 동적이고 대화형으로 만들어줌. 페이지가 로드된 후에도 데이터를 비동적으로 가져와서 업데이트할 수 있음.
3) 서버 부하의 감소: 서버측에서 초기 렌더링을 수행하지 않으므로 서버 부하를 줄임. 정적 파일 및 콘텐츠는 CDN(Content Delivery Network)로 제공할 수 있어 성능을 향상시킬 수 있음.
4) 개발자의 독립성: 클라이언트 측 렌더링은 클라이언트 및 서버코드를 분리할 수 있으므로, 프론트엔드 및 백엔드 개발자간의 독립성을 제공.
->동적 및 대화형 웹 어플리케이션에 적합함.
단점:
1) 초기 로딩 지연:초기 페이지 로딩 시에는 느려서, 사용자가 빈 화면이나 로딩표시기 보게 됨.
2) SEO의 어려움: 동적으로 렌더링 되기 때문에, 검색 엔진이 인덱싱하기 어려움. 그래서 검색 엔진 최적화의 어려움.
3) 보안 문제: 클라이언트로 전송되는 데이터가 민감할 경우, 문제가 될 수 있음.
4) 초기 데이터 전송: CSR은 초기 데이터 전송 시에 모든 데이터를 클라이언트로 가져와야 함으로 네트워크 대역폭을 소모할 수 있음.
마치며
SSR과 CSR, 무엇이 더 좋은가?
웹 개발 프로젝트에서 SSR과 CSR 중 어떤 렌더링 방식을 선택할 지는 프로젝트 요구 사항, 사용자 경험 및 검색 엔진 최적화와 같은 고려 사항에 따라 다를 수 있다. 종종 SSR과 CSR을 혼합하여 사용하는 "하이브리드" 방식도 채택된다.
JInja2는 SSR과 관련된 도구...!
jinja2는 서버 측에서 템플릿을 렌더링하고, 결과 HTML을 클라이언트로 전송하는 데 사용된다. 즉, SSR 방식에 해당.
서버 사이드 렌더링(SSR)은 웹 페이지의 초기 HTML을 서버에서 생성하고 클라이언트로 보내는 방식을 의미하는데,
이것은 검색 엔진 최적화(SEO)와 초기 로딩 속도를 개선하며, 클라이언트는 초기 HTML을 받고 나중에 JavaScript를 사용하여 페이지를 업데이트한다.
Jinja2은 파이썬 웹 애플리케이션 프레임워크(예: Flask)와 함께 사용되어 서버 사이드 렌더링을 구현할 때 주로 사용된다. 템플릿 엔진은 서버에서 렌더링되고 최종 HTML이 클라이언트로 전송되므로 이것은 SSR에 해당합니다.
반면에 클라이언트 사이드 렌더링(CSR)은 초기 HTML은 서버에서 받지만 나머지 콘텐츠는 클라이언트 측에서 JavaScript를 사용하여 렌더링하는 방식.
요약하면, Jinja2은 서버 사이드 렌더링(SSR)과 관련이 있으며, 클라이언트 사이드 렌더링(CSR)과는 직접적인 관련이 없다!
'크래프톤 정글 > TIL' 카테고리의 다른 글
| [1주차] 재귀함수의 장단점 (+stack overflow/ 재귀 한계) (0) | 2023.10.20 |
|---|---|
| [1주차] 파이썬 sort, sorted (0) | 2023.10.16 |
| [1주차] 알고리즘을 위한 파이썬 기본 문법 (0) | 2023.10.16 |
| [1주차] 배열과 리스트의 차이 (0) | 2023.10.14 |
| [0주차] JWT 란? (0) | 2023.10.14 |
