Concurrent Mode는 React의 새로운 기능으로, 사용자 경험을 향상시키기 위해 자바스크립트 애플리케이션의 성능을 최적화하는 데 사용됩니다. 기존의 동기식 렌더링 방식에서 비동기식 렌더링 방식으로 변경되었으며, 특히 서버 사이드 렌더링에서 많은 이점을 제공합니다.

서버 사이드 렌더링의 이점

서버 사이드 렌더링은 초기 로딩 속도를 향상시키고 SEO를 향상시키는 데 도움을 줍니다. 이는 클라이언트 측에서 자바스크립트를 실행하기 전에 서버에서 페이지의 HTML을 미리 렌더링하여 사용자에게 보여주는 것을 의미합니다. 이는 검색 엔진이 내용을 분석하고 인덱스를 생성하기 쉽게 만들어주어 검색 엔진 최적화에 도움을 줍니다.

Concurrent Mode의 동작 방식

Concurrent Mode는 사용자의 화면 반응성을 향상시키기 위해 렌더링 작업을 여러 단계로 나누어 처리합니다. 이 단계는 우선순위에 따라 분류되며, 각 단계가 현재 화면에 표시되는 컴포넌트의 우선순위와 맞춰져서 처리됩니다.

Concurrent Mode의 장점은 작업을 중단하고 재개하는 능력을 가지고 있다는 것입니다. 이를 통해 비우는 시간을 최소화하고 사용자가 더 빠르게 화면에 반응을 볼 수 있게 됩니다.

Concurrent Mode를 사용한 서버 사이드 렌더링의 예시 코드

아래는 Concurrent Mode를 사용하여 서버 사이드 렌더링을 구현하는 예시 코드입니다.

import ReactDOMServer from 'react-dom/server';
import { startTransition, useTransition } from 'react';

function renderAppToString() {
  startTransition(() => {
    isPending = true;
  });

  const content = ReactDOMServer.renderToString(<App />);

  const didYield = useTransition(() => {
    isPending = false;
  });

  if (!didYield) {
    return content;
  } else {
    return ReactDOMServer.renderToString(<App />);
  }
}

결론

Concurrent Mode를 활용한 서버 사이드 렌더링은 성능을 향상시키고 사용자 경험을 개선하는 데 도움이 됩니다. 애플리케이션의 초기 로딩 속도를 개선하고 검색 엔진 최적화를 위한 SEO 작업을 수행하기 위해 Concurrent Mode를 적용해 보세요.

#ConcurrentMode #서버사이드렌더링