리액트 - 웹페이지 렌더링 방식 (CSR, SSR, SSG)

https://www.youtube.com/watch?v=YuqB8D6eCKE&t=290s

 

어느쪽(클라이언트/서버)에서 렌더링을 준비하느냐에 따른 구분

 

 

 

 

CSR 

Client Side Rendering

웹브라우저에서 자바스크립트로 HTML 페이지를 만드는 것 (=렌더링) 

리퀘스트를 보내지 않고 자바스크립트를 통해 마치 다른 HTML 페이지를 받아오는 것처럼 보임 

 

=> SPA : 하나의 HTML 문서 안에서 자바스크립트로 여러 페이지를 보여주는 사이트 

 

개발 모드*에서는 모든 가능한 경로에 대해서 똑같은 HTML을 보내주도록 설정되어있다.

(서버가 빈 뼈대 HTML과 연결된 JS 링크를 전달) 

-> 웹브라우저가 JS 를 다운로드받고, 동적 DOM을 생성

=> 초기 로딩 속도 느리고, 이후 구동속도 빠름 (부분적인 데이터만 요청)

서버 부하 낮다. 사용자 경험 굿 (반응속도 증가)

SEO에 불리하다 (빈 뼈대만 가지고 있으므로)

 

 

홈페이지로 들어오던지 /어쩌구 로 들어오든지 동일한 리스폰스를 갖는다. = 빈뼈대 + JS 링크 

일단 root div에다가 클라이언트 사이드 렌더링을 하는데

리액트 라우터가 주소창에 적힌 경로를 읽어서 경로에 일치하는 컴포넌트를 렌더링하는 방식

 

*서버에 배포할때는 따로 설정을 해줘야한다.

 

 

---

SSR

Server Side Rendering

 

백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML, JS code를 만들어서 리스폰스로 보내주는 방식

서버에서 HTML을 만든다

-> 브라우저는 바로 화면을 띄운다

JS code 다운로드 받고 HTML에 JS 로직 연결=> SEO 유리하다 초기 구동 속도 빠름 사용자 인터랙션 반응이 느림 (TTV !== TTI) 

 

이미 렌더링 된 것이 웹 브라우저에 도착하니까 훨씬 빨리 화면을 띄워줄 수 있고,검색 엔진에서 좋은 점수를 받아서 검색했을 때 사이트가 잘 노출될 수 있다는 장점이 있다

 

요청 시 즉시 만들기때문에, 데이터가 달라져서 미리 만들어두기 어려운 페이지에 적합하다.

 

---

SSG 

Static Site Generation 정적 사이트 생성 (Static Rendering)

미리 HTML 파일을 만들어서 서버를 배포하는 것

 

서버에서 렌더링 하는 것도 좋지만, 데이터가 거의 바뀌지 않는다면 매번 새로 만드는 건 낭비가 아닐까요? 그래서 미리 HTML 파일로 만들고 이걸 서버로 배포하는 방법을 사용하는데, 이런 방식을 '정적 사이트 생성'이라고 합니다. 서버에서는 리퀘스트가 들어오면 HTML 파일을 읽어서 리스폰스로 보내주는 건데요.

 

'정적 사이트 생성'에서 정적이라는 말의 의미는 HTML을 파일로 만든다는 겁니다. 개발자가 새로 배포하지 않는다면 서버에서 보내주는 HTML이 달라지지 않는다는 의미죠. 용어가 생소해 보이지만, 쉽게 생각해서 리액트 코드로 HTML 파일을 만든다고 생각하면 됩니다.

물론 자바스크립트를 쓸 수 있기 때문에 정적으로 생성된 사이트에서도 동적인 데이터를 가져와 페이지를 보여줄 수 있답니다.

 

미리 다 만들어두기때문에, 바뀔일이 거의 없는 페이지에 적합

---

리액트에서는 서버사이드 렌더링을 하는 기능들을 제공하고 있지만, 아주 기본적인 방법만 제공합니다. 때문에 매번 작성해야 하는 코드의 양도 많고 복잡합니다. 그래서 개발자들은 서버사이드 렌더링을 대신 구현해주는 기술들을 만들기 시작했는데요. Next.js는 그렇게 만들어진 기술들 중에서 가장 인기 있는 기술입니다.

 

리액트 라우터랑은 다르게 HTML 파일을 나누듯이 자바스크립트 파일을 나눠 놓으면 곧바로 페이지로 사용할 수 있다는 장점도 있습니다.

---

예전에 프로젝트를 배포하기 전에 npm run build 명령어로 프로젝트를 빌드했던 거 기억나시나요? 빌드라는 건 리액트로 작성된 소스코드들을 브라우저가 알아들을 수 있도록 만드는 걸 말하는데요. Gatsby는 리액트 코드를 미리 렌더링 해서 프로젝트를 빌드할 때 HTML 파일로 만듭니다. 위에서 이런 방식을 정적 사이트 생성이라고 했었죠? Gatsby를 사용하면 리액트로 만든 사이트를 빌드해서 손쉽게 HTML 파일로 만들 수 있습니다.

회사 소개 사이트나 동아리 홈페이지 혹은 포트폴리오 사이트 같이 정적인 사이트를 리액트로 만들고 싶으시다면 Gatsby를 사용하는 걸 강력 추천드릴게요.

---

자바스크립트로 된 리액트 코드는 서버나 클라이언트에서 HTML로 변환됩니다. 하지만 꼭 HTML만 만들어야 할까요? 모바일 앱을 개발할 수도 있지 않을까요? 모바일 화면에서 쓰는 것들을 미리 컴포넌트로 만들어두면 충분히 가능할 거 같습니다.

React Native는 이런 아이디어에서 출발한 기술입니다. 리액트로 작성한 코드를 모바일 앱으로 만들 수 있게 해 주는데요. 리액트 코드로 개발하면 웹과 안드로이드와 iOS 앱에서 사용하는 공통적인 코드를 한 번에 개발할 수 있다는 장점이 있습니다.