[CS] SSR, CSR, SSG, JAM Stack

이유은·2023년 12월 11일

[CS]

목록 보기
11/11
post-thumbnail

SSR

SSR 새로운 게 아냐 ! 오랫동안 써오던거

Server Side Rendering

이걸 이해하려면

반대인 CSR 을 이해해야해!!
Cleint Side Rendering을 생각해봐
리액트, 뷰 등이 기본적으로 csr을 하는 것들

🧁 정적 웹사이트 - 편의점에서 미리 포장돼서 진열된 거 사가는 것
고정된 html, css,자바스크립트, 이미지등을 서버가 줘가지고, 변하지 않는 웹사이트를 보내는 것 / 소개 페이지 처럼

🍡 동적 웹사이트 - 게시판이나 통계 페이지처럼 데이터베이스등 계속 바뀌는 내용에 따라 사용자가 방문할 때 마다 서버가 그때그때 html 내용들을 렌더링, 요리해서 가져다주는 jsp, php 로 만드는 것들

리액트같은 spa 라이브러리나 프레임워크들은 정적웹사이트처럼 서버한테선 똑같은 걸 받아가는데, 거기 있는 자바스크립트로다가 서버로부터 데이터를 요청해서, 그 받아온 정보들을 가지고 사용자의 컴퓨터에 깔린 브라우저가 셀프로다가 페이지 요리를 해내는 , 말하자면 손님이 불판만 받아와가지고 고기라는 데이터를 계속 요청해서 직접 구워먹는 고깃집 같은거 !!

그런 웹사이트들은 기존의 동적 웹사이트처럼 링크를 클릭할 때마다 다른 페이지로 이동을 하는 것이 아니라, 같은 페이지에서 자바스크립트를 사용해서 html요소들을 계속 동적으로 바꿔주는 것이기 때문에 한페이지에서 모든게 다 되는

Single Page Application

spa라고 부른다고 했음!

이 웹사이트의 주요 컨텐츠들은 서버쪽이 아닌 클라이언트단, 즉 사용자의 컴퓨터에 깔린 브라우저에서 데이터에 따라 html 요소들이 렌더링 되기 때문에
Client Side Rendering - CSR 이라고 불리기도 함.

클사렌이 싱글 페이지에서만 되는 건 아니니까 csr과 spa가 동의어는 아님!

그렇다면 이 서버 사이드 렌더링 이라는 건,
리액트 같은 것들이 생기기 전에 쓰이던 오래된 방식을 말함
스프링이랑 jsp 뭐 이런것들로 만들던거!

그럼 지금 ssr을 쓴다는 건 과거로 회귀를 하는 거?? 그럼 왜 써?

예전 방식으로 완전히 돌아가는 게 아니라 CSR과 SSR의 장단점을 절충한 방식들을 쓰는 것!

CSR 덕분에 웹 개발도 수월해지고 사용자들로서도 클릭때마다 링크이동 없이 깔끔한 유저경험을 갖게 된 이점들도 있지만, 꼭 장점들만 있던 건 아님 .

이런 csr, spa로 어느정도 규모가 있는 사이트들을 만들면 화면 로딩되는 속도가 다소 느리다고 느껴질 때가 있음 !

사이트에 뭐가 많아질수록 로딩 - 느려질지도,,,...

csr 불판에 고기 구워먹어야되기때문에 -> 처음에 바로 못먹는 것 처럼 첫 페이지 로딩이 있음!!

ssr은 서버에서 이미 다 html 요리 다해서 나오는데 말이야 !

리액트 장점 포기하고 jsp로 돌아가야 하는 거 ?

양쪽의 장점들을 가져오기 위해 하이브리드 프레임워크들이 나온 것

ssr - 서버 쪽에서 렌더링이 일어남
csr - 클라이언트 쪽에서 렌더링이 일어남

자세한건 다시 공부하자 넘 어렵다

profile
우당탕코딩

0개의 댓글