[React] React 18 버전에서의 SSR 작업 흐름

※ 기존의 CSR , SSR 방식 차이

   SSR 작업 흐름

     1. 정적인 HTML 파일을 서버로부터 가져옴
     2. 추후 동적 데이터가 필요할때마다 다시 서버쪽에 요청해서 전체 화면을 full load (화면 깜빡임)
     3. 이후 ajax라는 비동기 서버 통신 기술이 생기면서 전체 화면을 다시 full load 하지 않고 필요한 데이터만 실시간으로 다시 호출 가능
     4. 비동기 데이터를 이용해 자바스크립트로 일일이 동적 DOM을 생성하고 관리해야되는 번거로움이 생김

  CSR 작업 흐름

     1. 빈 HTML파일을 서버로부터 가져옴
     2. 자바스크립트 파일로드 (React)
     3. 리액트 컴포넌트 로드 (Data fetching)
     4. 컴포넌트 해석 후 랜더링 시작
     5. 최종화면에 동적 DOM 생성 (이전 단계까지는 빈 화면 렌더링)

※ React 18 버전에서의 SSR 작업 흐름

   1. 서버쪽에서 미리 static 프리랜더링 된 html파일 로드
   2. 미리 렌더링 된 정적인 화면을 바로 생성 (정적 화면 생성)
   3. 자바스크립트 파일 로드
   4. 동적데이터를 다루는 리액트 컴포넌트 해석
   5. 기존 정적인 화면에 동적으로 연동될 부분만 대체 (hydration) Suspense 활용