React의 클라이언트 측 렌더링과 서버 측 렌더링

1. React의 클라이언트 측 렌더링
2. React의 서버 측 렌더링
3. React의 클라이언트 측 렌더링과 서버 측 렌더링

전통적으로 웹 페이지는 서버에서 렌더링되었지만 React와 같은 JavaScript 기반 프레임워크의 등장으로 클라이언트 측 렌더링이 탄력을 받았습니다. 오늘날 웹 애플리케이션은 서버나 브라우저(클라이언트 측)에서 렌더링하거나 둘을 조합하여 사용할 수 있습니다.

React의 클라이언트 측 렌더링

React 프레임워크는 주로 클라이언트 측에서 렌더링되는 애플리케이션을 빌드하는 데 사용됩니다. 온라인에서 볼 수 있는 대부분의 자습서는 단일 페이지 애플리케이션을 구축하는 과정을 설명합니다.

React docs의 튜토리얼은 이 패턴을 따르며, React 애플리케이션 구축을 빠르게 시작할 수 있게 해주는 간단한 패키지인 create-react-app도 마찬가지입니다.

클라이언트 측에서 렌더링되는 React 애플리케이션은 서버에서 분리됩니다. 서버는 본질적으로 빈 페이지인 초기 HTML만 렌더링합니다.

그런 다음 React는 클라이언트 측에서 대화형 요소를 렌더링하여 콘텐츠, 시각적 요소 및 페이지를 구성하는 모든 항목으로 페이지를 채웁니다. 예를 들어 Netflix는 React를 많이 사용하여 클라이언트 측에서 대화형 요소를 렌더링합니다.

React의 서버 측 렌더링

React를 사용하여 서버에서 전체 페이지(텍스트, 비주얼 및 콘텐츠 포함)를 렌더링할 수 있습니다. 사용자가 웹사이트를 방문하면 서버는 모든 콘텐츠로 채워진 전체 HTML 페이지를 로드합니다.

이 접근 방식을 사용하면 Google 봇과 같은 웹 크롤러가 모든 콘텐츠로 페이지의 색인을 생성할 수 있습니다.

그러나 페이지가 서버 측에서 완전히 렌더링되면 상호 작용 기능을 포함할 수 없습니다. 예를 들어 Facebook 홈페이지가 서버에서만 렌더링되는 경우 사용자는 페이지를 새로 고치지 않고는 새 알림을 볼 수 없습니다.

React의 클라이언트 측 렌더링과 서버 측 렌더링

Facebook 및 Netflix와 같은 대부분의 웹 사이트는 두 세계의 장점을 모두 얻기 위해 두 가지를 조합하여 사용합니다. 예를 들어, 웹 사이트가 Google에 의해 인덱싱되고 검색 엔진 트래픽을 얻으려면 서버 측에서 모든 텍스트 콘텐츠를 렌더링해야 합니다.

클라이언트 측 애플리케이션은 방문자에게 좋게 보일 수 있지만 봇은 빈 HTML 페이지만 볼 수 있습니다.

CSR(클라이언트 측 렌더링)과 SSR(서버 측 렌더링)의 조합을 사용할 때 서버는 필요한 최소한의 콘텐츠로 HTML 파일을 렌더링합니다. 스크립트가 로드되면 클라이언트 측 렌더링 방식을 사용하여 대화형 기능을 표시할 수 있습니다.