웹 역사 간단한 소개
1세대 (정적인 웹사이트)
2세대 (동적인 웹사이트)
- 유저인터렙션이 증가
- JS등장 !! (기능이 가능한 웹페이지)
3세대(SPA방식, 한 페이지 웹)
웹 렌더링!
우선 CRA에 대해 알아보자!
Create React application 이라고 한다.
아무런 초기 설정 없이 CRA를 통해 React SPA 사이트를 구현할 수 있습니다.
CRA탄생 전엔 웹팩과 바벨로 초기세팅을 진행했다고 합니다.
CSR(클라이언트 사이드 렌더링)
브라우저, 사용자 딴에서 렌더링이 클라이언트 측에서 일어나는 것을 의미합니다.
- 모든 로직, 데이터 가져오기, 템플릿 및 라우팅은 서버가 아닌 클라이언트에서 처리 됩니다.
- 백엔드 호출을 최소화 할 수 있습니다.
- 최초 호출 때만 HTML,JS,CSS를 요청합니다.
- 이후에 화면에 변화가 일어나는 만큼의 데이터만 요청합니다.
(ex. JSON) - 라우팅, HTML이 하나만 있는건 맞지만, js차원에서 새로운 화면을 그려내는 것입니다.
정리,
서버에서 index.html 파일을 클라이언트에 보내주고
Body 안에 아이디가 루트인 디브 태그를 볼 수 있는데
처음에 접속하면 빈 화면만 보이고 어플리케이션에서 필요한 로직들 뿐만 아니라
어플리케이션을 구동하는 프레임워크와 라이브러리도 가능 합니다.
CSR에 문제점은?
- 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있는 점
- SEO(검색엔진)에 단점이 있습니다.
SEO란? 검색엔진을 뜻함.
서버에 등록된 웹사이트를 검색하는 엔진이고,검색엔진들이 판단해서 등록합니다.
이에 대한 단점으로는 CSR은 body 태그 안에 비어져 있기에 검색엔진들이 웹페이지를 분석하지못합니다. 그러기에 검색엔진이 좋지 않습니다!
그래서 SSR이 도입!!
SSR
서버 사이드렌더링
- SEO,UX측면에서 유리합니다.
- CRA에 비해 페이지를 구성하는 속도는 늦지만,
전체적으로 사용자에게 보여주는 콘텐츠 구성완료 시점은 빠릅니다.
한줄 정리,
서버 사이드 렌더링이 도입되면서 웹사이트에 접속하면,
서버에서 필요한 데이터를 가져와서 HTML을 만들고
동적으로 만든 소스코드를 클라이언트에게 보냅니다.
클라이언트 문서를 받아 와서 사용자에게 보여줄 수 있게 됩니다.
장점으로는,
페이지 로딩이 빨라지고, 모든 컨텐츠가 HTML에 담겨져 있기 때문에
조금 더 효율적인 SEO(검색엔진)을 할 수 있습니다.
하지만, 모든 솔루션이 될 수는 없습니다.
그래서 두가지 측면이 필요해서 나온 Next.js
next.js
CSR & SSR 두가지 측면이 필요해서 나온것
- 첫 요청은 SSR(서버사이드 렌더링)로 보내고
그다음에 CSR로 보내집니다. - SSR은 검색 측면에서 유리하여, 첫 페이지가 어떤지 보여줄 수 있음.
서버사이드 렌더링의 원리 & 구조
1️⃣ 브라우저가 FE Server에게 Requset를 요청
2️⃣ 렌더링을 함
3️⃣ 렌더된 상태의 파일이 브라우저로 되돌아감
4️⃣ HTML파일만 오기에 일단 기능이 없다.
5️⃣ JS 파일이 로드가 된 후 기능이 작동 가능함.
React 공식문서에 API 문서내용을 보면,
"이미 서버 렌더링 된 마크업이 있는 노드에서
ReactDOM.hydrat() 를 호출할 경우 React는 이를 보존하고
이벤트 핸들러만 연결함으로써 매우 뛰어난 첫로드 성능을 뜁니다" 라고 명시 되었습니다.
마무리
이미 서버 렌더링이 된 마크업에서는 기능 작동이 되지 않음.
즉, HTML로 된 파일은 기능이 없어 JS파일이 로드가 된 후에 기능 작동합니다.
이를 연결고리 해주는 역할을 ReactDOM.hydrate() 라고 한다고 합니다.
이 과정이 끝나면 CSR로 돌아옵니다.
학습방면에 도움이 많이 되었던 자료 입니다. 🙏
