khg0712

// packages/next/server/render.tsx
// pre-render하는 renderToHTML 함수
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/server/render.tsx#L351

export async function renderToHTML(
  req: IncomingMessage,
  res: ServerResponse,
  pathname: string,
  query: NextParsedUrlQuery,
  renderOpts: RenderOpts

khg0712

// Next.js v12.3.4 버전 기준 SSR 코드
// packages/next/server/render.tsx
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/server/render.tsx#L1114
const renderDocument = async () => {
  // ...

  //
  const createBodyResult = (
    initialStream: ReactReadableStream,
    suffix?: string

khg0712

// Next.js v13.0.0 ~ v13.3.0에서의 SSR 코드
// 레퍼런스하는 코드는 v13.3.0 기준
// packages/next/src/server/render.ts
// https://github.com/vercel/next.js/blob/v13.3.0/packages/next/src/server/render.tsx#L119

// streaming SSR 지원을 위해 renderToReadableStream을 사용해서 SSR 처리
// v12.3.4처럼 renderDocument에서 document render를 진행하고,
// renderDocument에서 renderToString 호출
async function renderToString(element: React.ReactElement) {
  const renderStream = await ReactDOMServer.renderToReadableStream(element)

khg0712

// packages/next/client/next.js
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/next.js#L12
// Next.js client side initialize 코드
initialize({})
  .then(() => hydrate())
  .catch(console.error)

khg0712

// 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> }) {}

khg0712

// packages/next/client/router.ts

// useRouter 코드
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/router.ts#L132

export function useRouter(): NextRouter {
  return React.useContext(RouterContext)
}

khg0712

// packages/next/client/with-router.tsx

// withRouter 코드
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/with-router.tsx#L19
import { useRouter } from './router'

export default function withRouter<
  P extends WithRouterProps,
  C extends BaseContext = NextPageContext
>(

khg0712

// packages/next/client/index.ts

// Router 싱글톤을 저장하는 전역 객체
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/index.tsx#L67
export let router: Router

// hydrate 함수에서 Router 싱글톤이 초기화(createRouter)되는 코드 호출
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/index.tsx#L863
export async function hydrate(opts?: { beforeRender?: () => Promise<void> }) {
  // ...

khg0712

// packages/next/client/router.ts

// Router 싱글톤을 저장하는 객체
// https://github.com/vercel/next.js/blob/v12.3.4/packages/next/client/router.ts#L20
const singletonRouter: SingletonRouterBase = {
  router: null, // holds the actual router instance
  readyCallbacks: [],
  ready(cb: () => void) {
    if (this.router) return cb()
    if (typeof window !== 'undefined') {

khg0712

// packages/next/client/router.ts

// import Router from 'next/router' 했을 때 접근하는 값.
// Export the singletonRouter and this is the public API.
export default singletonRouter as SingletonRouter