μž‘μ„±: 2024-11-27 06:30:34
    μˆ˜μ •: 2024-11-27 06:30:34

    Render

    μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ Œλ”λ§ν•˜λŠ” λ°©λ²•μ—λŠ” ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λ Œλ”λ§(CSR), μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§(SSR), 정적 μ‚¬μ΄νŠΈ 생성(SSG) λ“± μ„Έ 가지 μ£Όμš” 방식이 μžˆμŠ΅λ‹ˆλ‹€. 각 방식은 μž₯단점과 μ ν•©ν•œ μ‚¬μš© 사둀가 λ‹€λ¦…λ‹ˆλ‹€.

    1. ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λ Œλ”λ§ (CSR)

    κ°œμš”

    • ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λ Œλ”λ§μ€ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λ Œλ”λ§μ΄ 주둜 ν΄λΌμ΄μ–ΈνŠΈ(λΈŒλΌμš°μ €)μ—μ„œ μ΄λ£¨μ–΄μ§€λŠ” λ°©μ‹μž…λ‹ˆλ‹€. 초기 HTML νŽ˜μ΄μ§€κ°€ λ‘œλ“œλœ ν›„, JavaScriptκ°€ μ‹€ν–‰λ˜μ–΄ λ™μ μœΌλ‘œ μ½˜ν…μΈ λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.

    μž₯점

    • λΉ λ₯Έ μ‚¬μš©μž κ²½ν—˜: ν•œ 번 λ‘œλ“œλœ ν›„, νŽ˜μ΄μ§€ μ „ν™˜μ΄ λΉ λ₯΄λ©° μ‚¬μš©μž κ²½ν—˜μ΄ ν–₯μƒλ©λ‹ˆλ‹€.
    • μΈν„°λž™ν‹°λΈŒν•œ UI: μ‚¬μš©μžμ™€μ˜ μƒν˜Έμž‘μš©μ„ μ‰½κ²Œ μ²˜λ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
    • μ„œλ²„ λΆ€λ‹΄ κ°μ†Œ: μ„œλ²„λŠ” κΈ°λ³Έ HTML을 μ œκ³΅ν•˜κΈ°λ§Œ ν•˜λ©΄ λ˜λ―€λ‘œ, μ„œλ²„μ˜ 뢀담이 μ€„μ–΄λ“­λ‹ˆλ‹€.

    단점

    • 초기 λ‘œλ“œ μ‹œκ°„: JavaScriptκ°€ λ‹€μš΄λ‘œλ“œλ˜κ³  싀행될 λ•ŒκΉŒμ§€ μ½˜ν…μΈ κ°€ ν‘œμ‹œλ˜μ§€ μ•Šμ•„ 초기 λ‘œλ“œ μ‹œκ°„μ΄ κΈΈμ–΄μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.
    • SEO 문제: 검색 엔진이 JavaScript둜 μƒμ„±λœ μ½˜ν…μΈ λ₯Ό μΈμ‹ν•˜λŠ” 데 μ œν•œμ΄ μžˆμ„ 수 μžˆμ–΄ SEO에 λΆˆλ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    μ‚¬μš© 사둀: 단일 νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜(SPA)μ΄λ‚˜ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€κ°€ λ³΅μž‘ν•œ μ›Ή μ•±.

    2. μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§ (SSR)

    κ°œμš”

    • μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§μ€ μ›Ή νŽ˜μ΄μ§€κ°€ μ„œλ²„μ—μ„œ λ Œλ”λ§λœ ν›„, μ™„μ „ν•œ HTML이 ν΄λΌμ΄μ–ΈνŠΈμ— μ „μ†‘λ˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€. ν΄λΌμ΄μ–ΈνŠΈλŠ” 초기 νŽ˜μ΄μ§€λ₯Ό μ„œλ²„λ‘œλΆ€ν„° λ°›μ•„μ˜€κ³ , μ΄ν›„μ˜ μš”μ²­μ— λŒ€ν•΄μ„œλŠ” JavaScriptκ°€ μ²˜λ¦¬ν•©λ‹ˆλ‹€.

    μž₯점

    • λΉ λ₯Έ 초기 λ‘œλ“œ: ν΄λΌμ΄μ–ΈνŠΈλŠ” μ„œλ²„μ—μ„œ μƒμ„±λœ μ™„μ „ν•œ HTML을 μ¦‰μ‹œ 받을 수 μžˆμ–΄ 초기 λ‘œλ”© μ‹œκ°„μ΄ μ§§μŠ΅λ‹ˆλ‹€.
    • SEO μ΅œμ ν™”: μ„œλ²„μ—μ„œ μ½˜ν…μΈ κ°€ λ Œλ”λ§λ˜λ―€λ‘œ 검색 엔진이 μ‰½κ²Œ 크둀링할 수 μžˆμ–΄ SEO에 μœ λ¦¬ν•©λ‹ˆλ‹€.

    단점

    • μ„œλ²„ λΆ€ν•˜ 증가: λͺ¨λ“  νŽ˜μ΄μ§€ μš”μ²­ μ‹œ μ„œλ²„μ—μ„œ λ Œλ”λ§ν•΄μ•Ό ν•˜λ―€λ‘œ μ„œλ²„ λΆ€ν•˜κ°€ 증가할 수 μžˆμŠ΅λ‹ˆλ‹€.
    • λ„€νŠΈμ›Œν¬ 지연: 맀번 μ„œλ²„μ™€ 톡신해야 ν•˜λ―€λ‘œ λ„€νŠΈμ›Œν¬ 지연이 λ°œμƒν•  수 μžˆμŠ΅λ‹ˆλ‹€.

    μ‚¬μš© 사둀: μ½˜ν…μΈ  μ€‘μ‹¬μ˜ μ›Ήμ‚¬μ΄νŠΈ, λΈ”λ‘œκ·Έ, μ „μžμƒκ±°λž˜ μ‚¬μ΄νŠΈ λ“±.

    3. 정적 μ‚¬μ΄νŠΈ 생성 (SSG)

    κ°œμš”

    • 정적 μ‚¬μ΄νŠΈ 생성은 μ›Ή νŽ˜μ΄μ§€κ°€ λΉŒλ“œ νƒ€μž„μ— 미리 λ Œλ”λ§λ˜μ–΄ 정적 HTML 파일둜 μƒμ„±λ˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€. 이후 μ‚¬μš©μžλŠ” 이 정적 νŒŒμΌμ„ μ„œλ²„μ—μ„œ λ°›μ•„λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

    μž₯점

    • λΉ λ₯Έ μ„±λŠ₯: 정적 νŒŒμΌμ€ μ„œλ²„μ—μ„œ μ¦‰μ‹œ 제곡될 수 μžˆμ–΄ 맀우 λΉ λ₯Έ λ‘œλ”© 속도λ₯Ό μžλž‘ν•©λ‹ˆλ‹€.
    • λ³΄μ•ˆ: μ„œλ²„μ—μ„œ μ‹€ν–‰λ˜λŠ” μ½”λ“œλ₯Ό 쀄여 λ³΄μ•ˆ μœ„ν˜‘μ„ κ°μ†Œμ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€.
    • SEO μ΅œμ ν™”: 정적 HTML 파일둜 인해 SEO μ΅œμ ν™”κ°€ μš©μ΄ν•©λ‹ˆλ‹€.

    단점

    • μ½˜ν…μΈ  μ—…λ°μ΄νŠΈ 어렀움: μ½˜ν…μΈ κ°€ 변경될 경우, μ‚¬μ΄νŠΈλ₯Ό λ‹€μ‹œ λΉŒλ“œν•΄μ•Ό ν•˜λ―€λ‘œ μ‹€μ‹œκ°„ μ—…λ°μ΄νŠΈκ°€ μ–΄λ ΅μŠ΅λ‹ˆλ‹€.
    • 동적 κΈ°λŠ₯ μ œν•œ: λ³΅μž‘ν•œ μ‚¬μš©μž μΈν„°λž™μ…˜μ΄λ‚˜ 동적 μ½˜ν…μΈ  μ²˜λ¦¬μ— μ œν•œμ΄ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€.

    μ‚¬μš© 사둀: λΈ”λ‘œκ·Έ, 포트폴리였 μ‚¬μ΄νŠΈ, λ¬Έμ„œν™” μ›Ήμ‚¬μ΄νŠΈ λ“±.

    κ²°λ‘ 

    각 λ Œλ”λ§ 방식은 νŠΉμ • μš”κ΅¬ 사항과 μ‚¬μš© 사둀에 맞게 선택해야 ν•©λ‹ˆλ‹€. CSR은 μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€κ°€ λ³΅μž‘ν•œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— μ ν•©ν•˜λ©°, SSR은 SEO와 초기 λ‘œλ“œ 속도가 μ€‘μš”ν•œ μ½˜ν…μΈ  μ€‘μ‹¬μ˜ μ‚¬μ΄νŠΈμ— μ ν•©ν•©λ‹ˆλ‹€. SSGλŠ” λΉ λ₯Έ μ„±λŠ₯κ³Ό λ³΄μ•ˆμ„ μ œκ³΅ν•˜λ©°, μ½˜ν…μΈ κ°€ μƒλŒ€μ μœΌλ‘œ 변동이 적은 μ›Ήμ‚¬μ΄νŠΈμ— 잘 μ–΄μšΈλ¦½λ‹ˆλ‹€. ν•„μš”μ— 따라 이듀 방식을 μ‘°ν•©ν•˜μ—¬ μ‚¬μš©ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.