✅ 프리렌더링이란

웹 브라우저가 페이지를 로딩하기 이전에 이루어지는 렌더링을 말합니다. 클라이언트 사이드 렌더링을 생각해보면 처음 웹사이트를 접속할때 텅빈 화면이 잠깐 나옵니다. 왜냐하면 텅 빈 HTML 코드를 보내 주기 때문인데요. 이후 필요한 자바스크립트 파일을 모두 로딩하면 렌더링이 진행되고 제대로된 화면이 보여집니다.

여기서 프리렌더링은 두가지 방식으로 나뉩니다. 정적 생성과 서버사이드 렌더링인데요.

✅ 정적 생성 (Static Generation)

빌드를 하는 시점에 렌더링을 하는방식입니다. 소스 코드를 빌드하면서 파일로 미리 만들어 두었다 접속할때 만들어둔 파일을 보내주는 방식입니다. 이미 렌더링된 파일을 받는거니까 빈 화면이 아니라 렌더링된 화면을 곧바로 보여줄 수 있습니다. 그리고 자바스크립트를 받아오고 리액트를 실행해서 받아온 파일들과 연결해서 리액트가 화면을 조작합니다.

이렇게 이미 렌더링된 HTM과 리액트의 데이터를 연결하는 작업을 Hydration 이라고 부릅니다.

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

마찬가지로 렌더링된 HTML을 보내 주는데 정적 생성이란 다른 점은 브라우저가 get 리퀘스트를 보낼때마다 서버가 매번 렌더링을 해서 보내준다는 겁니다.

❗정리

프리렌더링

웹 브라우저가 페이지를 로딩하기 이전에 이루어지는 렌더링

정적 생성

빌드할 때 렌더링해 놓고 서버에 보내주는 방식

서버사이드 렌더링

웹 브라우저가 요청을 보낼때 마다 서버가 매번 렌더링해서 보내 주는 방식

프리렌더링의 장점

초기 로딩이 빨라짐. 처음부터 HTML이 렌더링된 상태로 서버에 제공되기 때문에 자바스크립트가 로딩되서 리액트가 실행되기 이전에도 에쁜 화면이 보여짐

검색 엔진 최적화(SEO)가 됨. 텅빈 HTML이 아니라 렌더링된 HTML을 받기에 검색 엔진이 정보를 습득해갈 수 있다.

✅ hydration

서버 측 렌더링이나 정적 사이트 생성과 같은 방법을 사용하여 생성된 HTML마크업을 클라이언트에서 다시 만들어내는 과정을 말합니다. 즉 사용자가 페이지를 요청할때 서버측에서 미리 렌더링된 HTML 페이지를 클라이언트로 보내고 클라이언트는 이걸 받아 자바스크립트로 앱과 일치하도록 만드는 것을 의미합니다.

특히 hydration은 검색 엔진 최적화에 중요합니다. 왜냐하면 초기 렌더링이 서버측에서 이루어지므로 검색 엔진이 컨텐츠 크롤링을 위해 방문했을때 적합한 내용을 볼 수 있고 사용자는 초기 로딩 속도가 빠르기 때문에 더 나은 환경을 제공해 줄 수 있습니다.

주의할점으론 React에서 hydration은 자동으로 처리되지만, 서버에서 생성된 HTML과 클라이언트에서 생성된 앱 간의 데이터 페칭 결과물은 일관되게 유지되어야 합니다. 또한