nextjs-router-source-example-5.tsx

// packages/next/client/index.tsx
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/index.tsx


// 최초 hydration을 위해서 사용
// 내부에서 render 함수 호출
// 함수 내부는 생략
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/index.tsx#L756
export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {}


// --------------------------------------------------


// 최초에 hydrate함수에 의해 호출되지만,
// 이후엔 router 변경 시 페이지를 rerender하기 위해 다시 호출됨
// 내부에서 doRender 함수 호출
// 함수 내부는 생략
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/index.tsx#L731
async function render(renderingProps: RenderRouteInfo): Promise<void> {}


// --------------------------------------------------


// route 정보에 따라서 _app과 페이지 컴포넌트 render
// 내부에서 renderReactElement 함수 호출
// 함수 내부는 생략
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/index.tsx#L550
function doRender(input: RenderRouteInfo): Promise<any> {}


// --------------------------------------------------


// doRender에서 통합해서 전달해준 컴포넌트를 실제로 render
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/index.tsx#L485
function renderReactElement(
  domEl: HTMLElement,
  fn: (cb: () => void) => JSX.Element
): void {
  // ...

  // 최초 render인 경우엔 hydrate하고,
  // 이후부턴 render로 처리.
  if (shouldHydrate) {
    ReactDOM.hydrate(reactEl, domEl)
    shouldHydrate = false
  } else {
    ReactDOM.render(reactEl, domEl)
  }
}