| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
Tags
- styled-component
- 아키텍처
- 리액트
- JavaScript
- link
- next hydration
- Critical Rendering Path
- MSW
- async
- 기본
- 개발자
- 리액트네이티브
- mockoon
- SWC
- Cache
- vanilla-extract
- 최적화
- Babel
- 컴포넌트
- next.js
- 기초
- 리액트쿼리
- 쓰레드
- sprinkles
- react-query
- Concurrent Mode
- 비동기
- amplify
- Basic
- 목킹
- react server component
- 자바스크립트
- mock service worker
- 동기
- react-native
- thread
- CSS-in-JS
- 캐쉬
- React
- front-end mocking
Archives
- Today
- Total
목록mismatch (1)
Don’t worry about failures
Hydrate에 대해
정의 React 애플리케이션에서 SSR을 통해 HTML을 가져와서 React컴포넌트로 변환하고, 클라이언트 측에서 상호작용이 가능한 앱으로 만드는 과정을 말한다. 조금 더 풀어서 생각해보면, SSR은 서버에서 HTML을 생성해서 client에게 전달한다. 이 HTML은 JS가 없는 건조(dry)한 상태이다. 이러한 건조한 상태에서 Hydrate(수화)의 단어 의미 대로 JS를 통해 각 이벤트들을 연결해줌으로써 촉촉한 상태를 만들어 준다는 의미이다. 그럼 만약에 React 애플리케이션에서 SSR을 통해 렌더링을 진행하고자 했지만 Hydrate를 하지 않으면 어떻게 될까? 서버에서 만든 HTML을 무시하고 리액트가 새롭게 만든다. 즉, 서버측에서 생성된 HTML이 아닌 Javascript를 통해 UI를 생성..
React
2024. 3. 22. 07:39