[Next.js] (2) - 사전 렌더링

👉  사전 렌더링 (Next.js 의 기본 동작 방식)

• 브라우저 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식
• CIient Side Rendering의 단점을 효율적으로 해결하는 기술

👉  CIient Side Rendering(CSR)

• React.js 앱의 기본적인 렌더링 방식
• 클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식
  • 장점: 초기접속 이후의 페이지 이동이 매우 빠르고 쾌적
  • 단점: FCP(초기접속 속도)가 느려짐

👉  Next.js에서는 CIient Side Rendering의 문제를 어떻게 해결할까? - 사전 렌더링

• 서버에서 직접 JS를 실행 -> 렌더링이 완료된 HTML을 응답
• JS 실행 (렌더링)
  • JS코드를 HTML코드로 변환하는 과정
• 화면 렌더링
  • HTML코드를 브라우저가 화면에 그려내는 작업

• 인터렉션 (상호작용) 아직은 불가 - HTML 코드만 받은 상태!
• TTI - Time To Interactive

• 페이지 이동시에 클라이언트 사이드 렌더링 방식으로 처리하는데, 가능한 이유는
  화면 렌더링 후 Hydration을 위해 JS Bundle 파일(사실상 React App)을 전달해줬기 때문 

👉  Next.js 사전렌더링

 

 

Hydration (수화) - JS실행 (HTML과 연결)

• 매말라있던 HTML에 JS 라는 물을 뿌려주는 것과 비슷

 

출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard

한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런