Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
Tags
- private-access-to-photos
- 비동기
- react animation
- animation
- react native
- promise.all
- hydration mismatch
- axios
- ios
- Swift
- motion.div
- Promise
- Throttle
- javascript
- react
- RN업데이트
- named type
- react-native
- react-native-permissions
- no-permission-handler-detected
- Hash-table
- rn
- await
- debounce
- RN새로운아키텍쳐
- RN아키텍쳐
- async
- react-native-image-picker
- React-Native업데이트
- CS
Archives
- Today
- Total
목록hydration mismatch (1)
하루살이 개발일지
[React] hydration과 hydration mismatch에 대해서
CSR, SSR먼저 Hydration 개념 이해에 필요한 CSR과 SSR 개념을 간단히 정리하면 다음과 같다. 클라이언트 사이드 렌더링 CSR에서 서버는 빈 HTML 페이지와 JavaScript 번들을 반환한다. 브라우저는 JavaScript 번들을 받아 클라이언트 단에서 페이지를 렌더링한다. 즉 모든 로직, 데이터 패칭, 라우팅 등은 서버가 아닌 클라이언트에서 처리된다.이는 서버의 부하를 줄이고 첫 페이지 로드 후 다른 페이지를 로드하는 속도가 빨라지지만, 초기 빈 HTML을 전달해주기 때문에 검색 엔진 최적화(SEO)에 불리하며 초기 로드 시간이 길어지게 된다. 서버 사이드 렌더링 SSR은 서버에서 웹 페이지를 생성해 클라이언트로 전달한다. 이미 렌더 준비가 완료된 HTML을 전달해주기 때문에 H..
웹개발/React
2024. 6. 12. 16:30