그 전에 먼저 React 구동방식과 Browser 랜더링 순서에 대해 알아야한다.

📌 React

⭐️ React는 가상 DOM을 사용하여 UI를 구성한다.
⭐️ 가상 DOM은 React에서 사용하는 내부적인 데이터 구조로, 실제 DOM의 가벼운 복사본이다.
가상 DOM과 실제 DOM의 변경점을 비교하여 수정된 부분만 업데이트한다.
⭐️ 상태가 변경되면 해당 컴포넌트와 그 하위 컴포넌트들이 다시 렌더링된다.

📌 Browser

⭐️ HTML 문서를 파싱하고, DOM 트리를 생성한다.
⭐️ CSS 파일을 다운로드하고, CSSOM 트리를 생성한다.
⭐️ DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.
⭐️ 렌더 트리에서 레이아웃을 계산한다.
⭐️ 각 노드를 화면에 그린다.


React는 Browser 4번 이후에 호출된다.
JavaScript가 호출되는 시점에 React의 컴포넌트가 브라우저에 렌더링되어 화면에 표시되는데, 이 말은 곧 JS가 호출되지 않으면 화면을 그릴 수 없다는 이야기가 된다.
결국 React는 서버측에서 랜더링되지않아 검색엔진에 취약하다.
그런 문제를 해결해주는 것이 SSR를 제공해주는 Next.js다 😮


🔎 Next.js가 제공하는 기능들을 알아보자

Next.js는 많은 기능들을 제공한다.

📝 서버 사이드 렌더링(SSR)
페이지를 서버에서 렌더링하여 초기 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 향상시킨다.

📝 미리 렌더링(Pre-rendering)
빌드 시점에서 페이지를 미리 렌더링하여 초기 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 향상시킨다.

📝 정적 사이트 생성(Static site generation)
미리 렌더링하여 정적 파일로 저장할 수 있도록 페이지를 생성할 수 있다. 이를 통해 초기 로딩 속도와 보안을 향상시킨다.

📝 자동 코드 분할(Automatic code splitting)
페이지에서 사용되는 컴포넌트와 모듈을 자동으로 코드 분할하여 필요한 부분만 렌더링한다. 이를 통해 초기 로딩 속도를 향상시키고 효율적으로 메모리를 사용할 수 있다.

📝 CSS 모듈(CSS modules)
컴포넌트별로 CSS 파일을 모듈화하여 클래스명 충돌을 방지하고 코드 유지보수를 용이하게 한다.

이외에도 많은 기능들을 제공하니 공식 문서를 참고하도록 하자 😀


📌 잠깐만, 서버사이드 렌더링이 뭐야?

클라이언트 측에서 처리되지 않고, 서버에서 웹페이지를 완전히 렌더링하고 클라이언트에게 보내는 방식이다. 서버에서 HTML, CSS, JavaScript 등을 포함한 모든 컨텐츠를 생성하고, 이를 클라이언트에게 전송하여 브라우저에서 렌더링한다.

SSR의 장점 중 하나는 위에서 말했다싶이 검색 엔진 최적화(SEO)다. 검색 엔진은 페이지를 인덱싱할 때 자바스크립트 실행을 지원하지 않기 때문에 클라이언트사이드 렌더링(CSR)으로 구현된 페이지의 경우 검색 엔진 최적화가 어렵다. 반면, SSR은 페이지를 완전한 형태로 제공하기 때문에 SEO에 더욱 유리하다.

CSR은 페이지를 로드한 이후 자바스크립트를 다운로드하고 실행해야 하기 때문에 초기 로딩 시간이 오래 걸린다.
반면, SSR은 페이지를 미리 렌더링하여 최초 로딩 속도를 개선할 수 있다.
하지만 SSR은 서버 자원을 많이 사용하고, 구현이 복잡할 수 있으며, 페이지를 업데이트할 때 클라이언트사이드 렌더링에 비해 불편할 수 있다.

그러니 SSR과 CSR 중 어떤 방식을 선택할지는 구현하려는 웹 어플리케이션의 특성에 따라 달라질 수 있기에 잘 생각해서 사용해야 한다.