클라이언트사이드 렌더링 (CSR)
웹 브라우저에서 js자바스크립트로 HTML 페이지를 만드는 것
클라이언트사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을 만든다
싱글페이지 애플리케이션 (SPA)
하나의 HTML 문서안에서 js자바스크립트로 여러 페이지를 보여주는 사이트
서버사이드 렌더링(Server-side Rendering)
서버에서 HTML을 만들고 리스폰스로 보내주는 것
백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식을 '서버사이드 렌더링'이라고 한다. 서버에서 HTML을 만든다는 뜻
정적 사이트 생성(Static Site Generation)
미리 HTML 파일을 만들어서 서버를 배포하는 것
서버에서 렌더링 하는 것도 좋지만, 데이터가 거의 바뀌지 않는다면 매번 새로 만드는 건 낭비다, 그래서 미리 HTML 파일로 만들고 이걸 서버로 배포하는 방법을 사용하는데, 이런 방식을 '정적 사이트 생성'이라고 한다. 서버에서는 리퀘스트가 들어오면 HTML 파일을 읽어서 리스폰스로 보내준다.
'정적 사이트 생성'에서 정적이라는 말의 의미는 HTML을 파일로 만든다는 뜻. 개발자가 새로 배포하지 않는다면 서버에서 보내주는 HTML이 달라지지 않는다는 의미. 쉽게 생각해 리액트 코드로 HTML 파일을 만든다고 생각하면 된다
물론 자바스크립트를 쓸 수 있기 때문에 정적으로 생성된 사이트에서도 동적인 데이터를 가져와 페이지를 보여줄 수 있다
렌더링을 활용한 리액트 기술 세 가지
Next.js : 리액트 서버사이드 렌더링을 편하게
Gatsby : 리액트로 정적 사이트 만들기
React Native : 모바일 앱의 화면도 리액트로
난될놈이야