프로젝트가 SSR인지 CSR인지 확인해보기

 

	SSR(Server Side Rendering)	CSR(Client Side Rendering)
설명	전통적인 웹 방식을 의미하며 페이지가 새로고침 될 때마다 서버로부터 리소스(관련된 HTML, CSS, JS 파일 및 데이터)를 전달받아 화면에 렌더링 하는 방식. 요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식 => 이미 다 만들어진 DOM을 받음.	최초 로드시 필요한 파일들을 전부 받고, 사용자의 인터렉션에 따라서 클라이언트단에서 받아와 랜더링을 해주는 방식 => 기본 틀만 받고, 브라우저에서 동작으로 DOM을 그림
장점	초기 화면의 렌더링 속도가 빠르며, SEO에 최적화되어 있음.	렌더링 속도가 빠름
단점	매 랜더링마다 서버를 거침으로 속도가 느림.	초반에 뼈대만 다운받기 때문에, SEO에 취약, 초기 화면의 렌더링 속도가 느림.

* SEO(Search Engine Optimization) : 검색 엔진 최적화

 

SSR vs CSR

https://solo5star.dev/posts/44/

React SSR (서버 사이드 렌더링) 얕게 시작해보기 (React.hydrateRoot)

 

이 블로그의 동영상이 이해하는 데에 큰 도움이 되었다. 

 

 

1. 네트워크 탭 확인

 

Network 에서 localhost를 선택후, Response를 보면 body태그에 아무런 내용이 없다 => CSR

 

 

 

Element에서는 위와 다르게 body 태그 하위에 여러 내용들을 볼 수 있는데, 이 내용들은 bundle.js를 통해 만들어졌다고 한다. 

 

1. 사용자가 사이트에 접속하면 HTML , CSS , JS (bundle.js) 파일을 내려받는다.
2. HTML 에는 뼈대만 있는 상태이고 클라이언트는 bundle.js 를 해석해서 렌더링한다.

 

- 출처

https://velog.io/@cheal3/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-SSR-%EA%B3%BC-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-CSR-%EC%97%90-%EB%8C%80%ED%95%B4

서버사이드 렌더링 (SSR) 과 클라이언트 사이드 렌더링 (CSR) 에 대해

 

2. Disable JavaScript

 

JavaScript를 disable하면, 화면에 enable해야 run할 수 있다고 뜬다. => CSR

 

 

 

React는 원래 CSR(Client-Side Rendering) 방식으로 동작하지만, Next.js와 같은 프레임워크를 사용하면 서버에서 초기 HTML을 렌더링해 브라우저로 전달할 수 있습니다.

 

이래서 요즘 Next.js 를 많이 쓰나보다.