그냥 블로그

[Next vs React] CSR SSR SSG, Hydration 본문

Front-End/이론

[Next vs React] CSR SSR SSG, Hydration

코딩하는 공대생 2024. 6. 19. 23:19
반응형

Next.js를 사용하다보니 Hydrate 용어를 많이 접하게 되었고, Next.js의 주요 동작 과정 중 하나라는 말에 한 번 정리해보기로 했습니다. 

++ React와 비교도 한 번 찾아보고, 추가로 찾아볼 내용도 찾아보기.

 

Hydration

Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS 코드를 서로 매칭 시키는 과정 

 

출처: https://aboutmonica.com/blog/server-side-rendering-react-hydration-best-practices

 

React (CSR)

 

리액트는 CSR 방식을 사용하고 있기 때문에, 처음 브라우저가 빈 HTML 파일을 받아 화면에는 아무것도 나타나지 않다가, 사용자 기기에서 렌더링이 완료되면 한 번에 화면을 보여준다.

 

 

CSR  

* React index.html 파일을 보면, html에 아무것도 안적혀 있는걸 볼 수 있음.

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
  • 단순 구조만 있는 HTML 문서와 JS 파일들을 모두 클라이언트에 보낸 뒤 Client-Side에서 JS 로드를 통해 웹 페이지 렌더링.
  • 웹 페이지가 렌더링 된 이후에도 페이지 내에서 동작하는 모든 이벤트는 JS를 통해 발생한다. 
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./src/App";

ReactDOM.render(<App />, document.getElementById("root"));
  • 기본 뼈대만 있는 index.html 대신 src/index.js의 JS 코드에서 모든 화면을 렌더링한 뒤 html DOM 요소 중 root ID를 가진 element를 찾아 하위에 내용 주입. 
  • 미리 모든 페이지에 필요한 js 파이를을 받아두고, 특정 페이지로 이동 시 해당 페이지에 필요한 js 파일을 실행해 새로운 컴포넌트를 렌더링하고 화면을 업데이트 하는데 이를 SPA라고 한다.
=>
사용자가 메인 페이지에 접속하면, 브라우저가 해당 웹 애플리케이션에 필요한 HTML과 정적 자원을 서버에 요청. 브라우저는 HTML을 해석해 DOM을 생성하고 자원들을 다운로드. 이벤트 리스너도 이때, DOM이 생성될 때 부착된다.

 

Next (Pre-Rendering - SSR, SSG)

 

SSR과 SSG는 Pre-Rendering 이라고 불리는데, 추가 데이터 Fetching과 React 컴포넌트의 HTML로의 변환이 렌더링 결과물이 클라이언트에게 전송되기 전에 발생하기 때문이다. 

 

사용자의 기기에서 JS가 모든 일을 처리하는 대신 서버에서 먼저 HTML 파일을 생성하기 때문에, 렌더링 작업이 진행되는 동안 사용자에게 해당 페이지에 필요한 HTML 화면이 보여짐.

 

? 클라이언트가 받은 웹 페이지는 단순한 웹 화면만 보여주는 HTML로 JS 요소들이 없다. 이는 웹 화면을 보여주고 있지만, 특정 JS 모듈 뿐 아니라 단순 클릭과 같은 이벤트 리스너들이 각 웹페이지의 DOM 요소에 하나도 적용되어 있지 않다는 것.

 

  • HTML을 미리 렌더링하고, 그 뒤에 요청이 오면 Chunk 단위로 JS를 보내줘 이벤트가 작동하게 되는것이 Hydration .
  • 이러한 JS 코드들이 이전에 전송된 HTML DOM 요소 위로 리렌더링 되는 과정 속에서 자기 자리를 찾아 매칭된다.
SSG (Static-Site-Generation)

 

Hydration

 

SSR, SSG에서 실행한 HTML 결과물을 받아온 뒤, 브라우저에서 이것을 다시 리액트 트리에 맞게 파싱하는 행위. 

1. 렌더링한 결과물이 어떤 컴포넌트인지 확인

2. 각 컴포넌트에 걸린 이벤트리스너를 실제 

 

deHydration

 

저작자표시

'Front-End > 이론' 카테고리의 다른 글

[Git] branch 명령어  (0) 2024.05.10
컴포넌트... 어떻게 나눠야 할까?  (1) 2024.03.25
Vite란 무엇일까? (이론)  (0) 2024.03.18
TDD(Test Driven Development) - Front End (3)  (0) 2024.03.08
TDD(Test Driven Development) - Front End(2)  (3) 2024.03.08
'Front-End/이론' Related Articles more