πŸ“–
aug-note
  • 1️⃣ frontend
    • HTML / CSS
      • Simentic Tag
      • Flex
      • Grid
      • class vs id
      • Attribute vs Property
      • form
      • Tailwind
        • base, utility, component, layer
        • tailwind.config
    • React
      • Next.js
        • Next.js 15
        • Tanstack Query with Next.js
      • Library
        • react-hook-form
      • React vs Next.js
      • React Hooks
      • Redux
      • Life Cycle
      • Ref
      • Suspense
      • Hydration
      • Virtual DOM
      • Component
      • library / framework
  • 2️⃣ Flutter
    • Widget
    • pubspec.yaml
  • 3️⃣ Language
    • JavaScript
      • TypeScript
        • Generic
        • Interface, Type Alias
        • Utility Type
        • tsconfig.json
        • Schema vs Type
        • Type Guard
        • Tuple
      • JS Variables
      • Event loop
      • Arrow function
      • Ajax
      • async await
      • blocking / non-blocking
      • sync/async
      • Closure
      • Execution Context
      • Lexical Scope
      • this
      • Truthy / Falsy
      • Event
      • package manager
        • npm
        • yarn
    • Dart
      • Variables
      • Factory
  • 4️⃣ Computer Science
    • Network
      • OSI 7 Layer
      • TCP / IP
      • DNS
      • UDP
      • Load Balancing
      • http / https
      • CORS
    • OS
      • Computer Structure
      • Operating System
      • CPU Scheduling
      • Process
      • Memory Structure
      • Interrupt
      • Compile
    • Web
      • API
      • webpack
      • Barbel
      • DOM
      • SEO
      • Web Storage
      • Session / JWT
      • SSR / CSR
      • SSG
      • Web Socket
      • SPA
    • Data Structure
      • Linear Data Structure
      • Non-Linear Data Structure
    • Design Pattern
      • Flux
      • Observer
      • BFF
    • Software Engineering
      • TDD
      • OOP
    • Cloud Computing
      • K8S
  • 5️⃣ BlockChain
    • BlockChain
    • Mining
    • Smart Contract
Powered by GitBook
On this page
  1. 1️⃣ frontend
  2. React

Hydration

PreviousSuspenseNextVirtual DOM

Last updated 1 year ago

Hydration은 Next js같은 SSR을 μ§€μ›ν•˜λŠ” ν”„λ ˆμž„μ›Œν¬λ₯Ό μ‚¬μš©ν•˜λ‹€ 보면 μˆ˜μ‹œλ‘œ μ ‘ν•˜λŠ” κ°œλ…μ΄λ‹€.

μš°λ¦¬κ°€ SSR 방식을 νƒν•˜μ—¬ λ Œλ”λ§μ„ μ§„ν–‰ν•˜κ²Œ 되면, μ„œλ²„μΈ‘μ—μ„œ λ Œλ”λ§μ— ν•„μš”ν•œ λͺ¨λ“  HTML, CSS λ“±μ˜ λ¦¬μ†ŒμŠ€λ₯Ό 응닡받아 pre-rendering을 μ§„ν–‰ν•œλ‹€.

ν•˜μ§€λ§Œ pre-rendering은 단지 μ„œλ²„μ—μ„œ λ°›μ•„μ˜¨ 정적인 λ¦¬μ†ŒμŠ€λ₯Ό ν† λŒ€λ‘œ μ§„ν–‰λ˜κΈ° λ•Œλ¬Έμ—, 이벀트λ₯Ό ν¬ν•¨ν•œ 동적인 νŽ˜μ΄μ§€κ°€ μ•„λ‹ˆλΌ 정적인 νŽ˜μ΄μ§€μΈ μƒνƒœμ΄λ‹€. κ°„λ‹¨νžˆ 말해 HTML만 μžˆλŠ” 깑톡 νŽ˜μ΄μ§€ μƒνƒœμΈ 것이닀.

λ”°λΌμ„œ 동적 νŽ˜μ΄μ§€ 생성을 μœ„ν•΄ JSλ₯Ό pre-rendering μƒνƒœμ— μ μš©μ‹œν‚€λŠ” 과정이 ν•„μš”ν•œλ° 이 과정이 λ°”λ‘œ Hydration이닀.