React SSR 에서 hydrate 란 무엇인가?

React CSR: 수차 모델

当初 React CSR 을 이해할 때 비유를 만들었습니다. 단방향 데이터 플로우를 폭포 모델에 비유했습니다:

폭포 모델:props(수도관) 와 state(수원) 로 컴포넌트를 조직하고, 컴포넌트 간 데이터 플로우 는 폭포와 유사. 데이터 플로우 는 항상 조상에서 자손으로 (뿌리에서 잎으로), 역류하지 않음

(React 를 깊게 이해하다 에서 인용)

단일 컴포넌트의 미시적 시각에서, props 를 수도관 (데이터 채널) 으로 이해하고, 외부에서 전달되는 데이터 (물) 를 받습니다. 각 state 는一处 수원 (우물에서 물이 솟아오르는, 즉 데이터가 생성되는 곳) 으로 상상하고, props 파이프 로 연결된 이 컴포넌트 트리를 세우면, 위에서 아래로의 수류 (폭포) 가 형성됩니다:

위 그림의 폭포 벽 전체에 무수한 우물이 있고, state 값이 props 파이프 를 따라 흐르는 것을 상상하십시오

더 거시적인 시각에서 보면, 컴포넌트 트리는 일련의 대나무 관으로 연결된 수차와 같고, 데이터 는 수원 (state, props, context 및 외부 데이터 소스) 이며, 물 은 위에서 아래로 컴포넌트 트리 전체를 흘러 잎 컴포넌트에 도달 하고, 아름다운 뷰를 렌더링 합니다

먼저 한 장의 그림으로 대나무 관 수송수를 느끼십시오:

다음으로 수원 및 수차 전체의 작동을 느끼십시오:

왼쪽의 작은 통은 외부 데이터 소스로, 언제든 한 표를 떠서 어떤 컴포넌트 (대나무 관) 에 부어, 그 내부의 state(저수) 를 변화시키고, 변화한 수류 가 서브 트리 전체를 흘러 잎 컴포넌트에 도달 하고, 변화한 후의 뷰를 렌더링 합니다. 이것이 인터랙션 조작 에 의한 데이터 변화 시의 컴포넌트 업데이트 프로세스 입니다

React SSR: 삼체인 모델

CSR 모드에서는, 물을 데이터로 이해하지만, SSR 에도 동일하게 적용できます. 다만 프로세스 가 조금 복잡할 뿐입니다:

1. 서버 사이드 렌더링:서버 사이드 에서 데이터를 주입 하고, 컴포넌트 트리를 구축
2. HTML 로 시리얼라이즈:탈수 하여 말린 인간으로
3. 클라이언트 사이드 렌더링:클라이언트 에 도달 후, 물에 담그고, 수류 를 활성화 하고, 살아있는 인간 으로 돌아옴

삼체인 의 생존 모드 에 비유 하면, 난기원 이 도래 하면 먼저 탈수 하여 말린 인간 이 되고 (SSR 중의 서버 사이드 렌더링 부분), 항기원 이 도래 한 후 물에 담가 부활 합니다 (SSR 중의 클라이언트 hydrate 부분)

물을 마시다 (render)

먼저 탈수 할 물 이 필요 하므로, 먼저 데이터 를 (물 을) 취득 하고, 서버 사이드 에서 컴포넌트 의 초회 렌더링 (mount) 프로세스 를 완료 합니다:

즉외부 데이터 에 기반 하여 초기 컴포넌트 트리 를 구축하고, 프로세스 중 은 render 및 그 이전 의 몇 개의 라이프사이클 만을 실행 합니다. 이는 목숨 을 지키는 기술 의 전흔 을 가능한 한 단축 하고, 가능한 한 빨리 탈수 하기 위함 입니다

탈수 (dehydrate)

다음 으로 컴포넌트 트리 를 탈수 하여, 악렬 한 환경 에서도 더욱 심플 한 형태 로「생존」할 수 있도록 합니다. 예를 들어 JavaScript 가 무효화 된 클라이언트 환경 등

컴포넌트 트리 보다 심플 한 형태 는 HTML 프래그먼트 로, 생명 의 물기 (동적 데이터) 를 탈 기, 풍건 표본 과 같은 정적 스냅샷 이 됩니다:

메모리 내의 컴포넌트 트리 가 정적 인 HTML 프래그먼트 로 시리얼라이즈 되고, 인간 의 모습 (초기 뷰) 은 아직 알 수 있지만, 더 이상 그것 과 인터랙션 할 수 없습니다. 그러나 이 휴대 가능한 형태 는 수송 에 특히 적합 하여, 네트워크 를 통해 지구 상의 어디 엔가의 클라이언트 에 전송 할 수 있습니다

주수 (hydrate)

클라이언트 에 도달 후, 환경 이 적합 하면 (JavaScript 가 무효화 되어 있지 않으면), 즉시「침지」(hydrate) 를 시작 하고, 컴포넌트 가 소생 합니다

클라이언트 의「침지」프로세스 는 실제로 는 컴포넌트 트리 를 재작성 하고, 신생 의 물 (state, props, context 등) 을 그 중 에 주입 하고, 생생 한 컴포넌트 트리 를 서버 사이드 렌더링 된 마른 껍질 에 채워, 부활 시킵니다:

주수 부활 은実は 삼체인 의 침지 소생 보다 더욱 강력 합니다. 지체 적인 손상을 수복 할 수 있습니다 (결락 한 HTML 구조 는 재작성 됩니다). 다만, 입 왜곡 눈 사시 등의 작은 문제는 수정 하지 않습니다 (속성 이 많았 거나 적었 거나, 속성 값 이 일치 하지 않는 등의 문제 는 무시 합니다. 상세 는 React SSR 원리 편 참조)

P.S.침지 에도 일정 의 시간 이 걸리므로, SSR 모드에서는, 클라이언트 는 일정 시간 정상 적으로 인터랙션 할 수 없고, 주수 완료 후 에 완전히 부활 합니다 (단방향 데이터 플로우 와 인터랙션 행위 가 정상 적으로 회복)

참고 자료

• [三体 I: 지구 왕사](/articles/三体 i: 지구 왕사/)

• [三体 II: 암흑 삼림](/articles/三体 ii: 암흑 삼림/)