🥨CSR과 SSR
-어느쪽에서 렌더링을 하는지에 따라 다름
🥨SSR과 SSG
-서버에서 요청 시에 즉시 만드느냐 미리 다 만들어 놓느냐
🥨SSR
-요청할 때 즉시 만드니까 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합
🥨SSG
-미리 다 만들어두니까 바뀔 일이 거의 없는 페이지에 적합
1. CSR(Client Side Rendering)
: 사용자 요청에 따라 필요한 부분만 응답 받아서 렌더링함.
✅장점
- 초기 로딩 이후에 페이지 일부를 변경할 때 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠르다
- 서버가 빈 뼈대만 있는 HTML을 넘겨주는 역할만 수행하면 됨 ==> 서버측에 부하가 적음
- 클라이언트 측에서 연산, 라우팅 등을 모두 직접 처리하기 때문에 반응 속도가 빠르고 UX도 우수함
❌단점
- 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다.(초기 로딩 속도 느림)
- 썩 좋지 않은 SEO
: html의 body는 대부분 텅텅 비어져있음. 웹크롤러는 html을 읽어서 검색 가능한 색인(페이지,목록)을 만들어냄. 근데 웹크롤러봇 입장에서 본 html은 텅텅 비어있음. 검색엔진이 색인할만한 컨텐츠가 존재하지 않음. - 검색엔진에 불리하다는 치명적인 단점
2. SSR(Server Side Rendering)
: 서버로부터 완전하게 만들어진 HTML 파일을 받아와서 페이지 전체를 렌더링
✅장점
- CSR을 사용했을 때보다 첫 번째 페이지로딩이 빨라짐(서버에서 필요한 데이터를 모두 가져와서 html 파일을 만들기 때문에)
- 모든 컨텐츠가 html에 담겨져 있기 때문에 조금 더 효율적인 SEO(Search Engine Optimization)를 할 수 있다.
❌단점
- 깜빡임 이슈 존재
: 사용자가 클릭-> 전체적인 웹사이트를 다시 서버에서 받아옴==> 썩 좋지 않은 UX - 서버 과부하
: 특히 사용자가 많은 제품일수록 사용자가 클릭을 할 때마다 서버에서 요청해서 서버에서 필요한 데이터를 가지고 html을 만들어야하므로 - TTV와 TTI 간극이 발생(가장 치명적인 단점)
: 동적으로 데이터를 처리하는 js를 다운받는동안 사용자가 여기저기 클릭했는데도 아무런 반응이 없는 경우 발생..
Hello world