대표적인 렌더링의 종류

클라이언트사이드 렌더링(Client-side Rendering)

— 웹 브라우저에서 자바스크립트로 HTML을 만드는 것

리액트로 할 수 있는 가장 기본적인 방식의 렌더링

리액트로 작성한 코드는 자바스크립트로 변환 가능 ( = 트랜스파일링 )

클라이언트사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을 만드는 걸 뜻함

 

서버사이드 렌더링(Server-side Rendering)

— 서버에서 HTML을 만들고 리스폰스로 보내주는 것

백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식 ( = 서버에서 HTML을 만든다 )

리액트에서도 서버사이드 렌더링을 할 수 있는 기능들을 제공한다. 이렇게 하면 이미 렌더링 된 것이 웹 브라우저에 도착하니까 훨씬 빨리 화면을 띄워줄 수 있고, 검색 엔진에서 좋은 점수를 받아서 검색했을 때 사이트가 잘 노출될 수 있음

 

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

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

서버에서 렌더링 하는 것도 좋지만, 데이터가 거의 바뀌지 않는다면 매번 새로 만드는 건 낭비임!

그래서 미리 HTML 파일로 만들고 이걸 서버를 배포하는 방법을 사용하는데, 이런 방식을 '정적 사이트 생성'이라고 한다. 서버에서는 리퀘스트가 들어오면 HTML 파일을 읽어서 리스폰스로 보내주는 것.

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

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