Next.js: μ„œλΉ„μŠ€ μ›Œμ»€λ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ³  ν”„λ¦¬νŽ˜μΉ˜λ₯Ό κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

에 λ§Œλ“  2016λ…„ 12μ›” 26일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: vercel/next.js

μš°μ„ , μ΄λ ‡κ²Œ λ†€λΌμš΄ 도ꡬλ₯Ό λ§Œλ“€μ–΄ μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€! Next.jsλŠ” "두 μ„Έκ³„μ˜ μž₯점을 λͺ¨λ‘ μ œκ³΅ν•˜λŠ”"(단일 νŽ˜μ΄μ§€ μ•± 및 μ„œλ²„ μΈ‘ λ Œλ”λ§) μ›Ή μ•± ꡬ좕을 μœ„ν•œ "꿈의 ν”„λ ˆμž„μ›Œν¬"처럼 λ³΄μž…λ‹ˆλ‹€.

λ‚˜μ—κ²Œ Next.jsκ°€ 약속을 μ΄ν–‰ν•˜λŠ” 데 도움이 λ˜λŠ” κ°€μž₯ μ€‘μš”ν•œ 뢀뢄은 νƒœκ·ΈλŠ” νŽ˜μ΄μ§€μ—μ„œ κ°€λ¦¬ν‚΅λ‹ˆλ‹€.

μ„€λͺ…μ„œμ— λ”°λ₯΄λ©΄ 이 κΈ°λŠ₯은 Chrome 및 Firefox만 μ§€μ›ν•˜λŠ” API인 Service Workerλ₯Ό μ‚¬μš©ν•˜μ—¬ κ΅¬ν˜„λ©λ‹ˆλ‹€. 이것은 μ›Ή μ‚¬μš©μžμ˜ λ§Žμ€ 뢀뢄이 이 ν›Œλ₯­ν•œ κΈ°λŠ₯을 ν™œμš©ν•˜μ§€ λͺ»ν•œλ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. λ‚΄κ°€ λ­”κ°€λ₯Ό λ†“μΉ˜κ³  μžˆλŠ”μ§€ λͺ¨λ₯΄κ² μ–΄μš”.

Service Workerλ₯Ό μ‚¬μš©ν•˜λŠ” λŒ€μ‹  λͺ¨λ“  μ΅œμ‹  λΈŒλΌμš°μ €λ₯Ό μ§€μ›ν•˜λŠ” λ‹€λ₯Έ μ’…λ₯˜μ˜ κΈ°μˆ μ„ μ‚¬μš©ν•˜μ—¬ ν”„λ¦¬νŽ˜μΉ˜λ₯Ό κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ§€λ‚œ λͺ‡ λ…„ λ™μ•ˆ μš°λ¦¬μ—κ²Œ 도움이 된 원칙은 λͺ¨λ“  λΈŒλΌμš°μ €μ— λŒ€ν•΄ _지원_을 μ œκ³΅ν•˜μ§€λ§Œ μ΅œμ‹  λΈŒλΌμš°μ €μ— λŒ€ν•΄μ„œλŠ” _μ΅œμ ν™”_λ₯Ό μ œκ³΅ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

ν”„λ¦¬νŽ˜μΉ­μ€ μ΅œμ ν™”μž…λ‹ˆλ‹€. 더 이상 μ‚¬μš©λ˜μ§€ μ•Šμ„ μ΅œμ ν™”μ— 점점 더 λ§Žμ€ μ½”λ“œλ₯Ό νˆ¬μžν•˜λŠ” 것은(λͺ¨λ“  μ΅œμ‹  μ‚¬μš©μž μ—μ΄μ „νŠΈκ°€ ServiceWorker ν•˜κ±°λ‚˜ 지원할 κ³„νšμ΄κΈ° λ•Œλ¬Έμ—) 쒋은 초점 μ˜μ—­μ²˜λŸΌ 보이지 μ•ŠμŠ΅λ‹ˆλ‹€.

μ›ν•˜λŠ” 경우 next/prefetch 와 λ™μΌν•œ APIλ₯Ό λ…ΈμΆœν•˜λŠ” μ‚¬μš©μž μ˜μ—­ ν”„λ¦¬νŽ˜μΉ­ λͺ¨λ“ˆμ„ 자유둭게 μƒμ„±ν•˜μ‹­μ‹œμ˜€. κΉ”λ”ν•œ 점은 next/prefetch μ‚¬μš©ν•˜μ§€ μ•ŠμœΌλ©΄ λΉŒλ“œμ— ν¬ν•¨λ˜μ§€ μ•ŠλŠ”λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. 뭉침이 μ—†μ–΄μš” :)

λͺ¨λ“  3 λŒ“κΈ€

이것은 μ›Ή μ‚¬μš©μžμ˜ λ§Žμ€ 뢀뢄이 이 ν›Œλ₯­ν•œ κΈ°λŠ₯을 ν™œμš©ν•  수 μ—†λ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€.

이것은 사싀이 μ•„λ‹™λ‹ˆλ‹€. μ°Έμ‘°: http://caniuse.com/#feat =serviceworkers
λΈŒλΌμš°μ €λŠ” 이 λ°©ν–₯으둜 κ°€κ³  있고 곧 따라 μž‘μ„ κ²ƒμž…λ‹ˆλ‹€.

μ–΄μ¨Œλ“ , 우리의 ν˜„μž¬ μ΄ˆμ μ€ 2.0을 μΆœμ‹œν•˜λŠ” 것이며 ν˜„μž¬ ν”„λ¦¬νŽ˜μΉ­ μ†”λ£¨μ…˜μ€ 이에 λŒ€ν•΄ κ½€ κΉ”λ”ν•©λ‹ˆλ‹€.
λˆ„κ΅°κ°€κ°€ 이 μ œμ•ˆμ— λŒ€ν•΄ 일할 수 μžˆλ‹€λ©΄ μš°λ¦¬κ°€ κ±°μ ˆν•  μ΄μœ κ°€ μ—†λ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.
(그리고 μ‚¬μš©μž μ˜μ—­μ—μ„œλ„ μ™„μ „νžˆ κ°€λŠ₯ν•©λ‹ˆλ‹€)

μ €λŠ” 여기에 AppCacheλ₯Ό μ‚¬μš©ν•˜μ—¬ 지원을 ν™•λŒ€ν•˜κΈ° μœ„ν•œ λͺ‡ 가지 아이디어λ₯Ό μ–ΈκΈ‰ν–ˆμŠ΅λ‹ˆλ‹€. https://github.com/zeit/next.js/issues/24#issuecomment -258804529

μ§€λ‚œ λͺ‡ λ…„ λ™μ•ˆ μš°λ¦¬μ—κ²Œ 도움이 된 원칙은 λͺ¨λ“  λΈŒλΌμš°μ €μ— λŒ€ν•΄ _지원_을 μ œκ³΅ν•˜μ§€λ§Œ μ΅œμ‹  λΈŒλΌμš°μ €μ— λŒ€ν•΄μ„œλŠ” _μ΅œμ ν™”_λ₯Ό μ œκ³΅ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

ν”„λ¦¬νŽ˜μΉ­μ€ μ΅œμ ν™”μž…λ‹ˆλ‹€. 더 이상 μ‚¬μš©λ˜μ§€ μ•Šμ„ μ΅œμ ν™”μ— 점점 더 λ§Žμ€ μ½”λ“œλ₯Ό νˆ¬μžν•˜λŠ” 것은(λͺ¨λ“  μ΅œμ‹  μ‚¬μš©μž μ—μ΄μ „νŠΈκ°€ ServiceWorker ν•˜κ±°λ‚˜ 지원할 κ³„νšμ΄κΈ° λ•Œλ¬Έμ—) 쒋은 초점 μ˜μ—­μ²˜λŸΌ 보이지 μ•ŠμŠ΅λ‹ˆλ‹€.

μ›ν•˜λŠ” 경우 next/prefetch 와 λ™μΌν•œ APIλ₯Ό λ…ΈμΆœν•˜λŠ” μ‚¬μš©μž μ˜μ—­ ν”„λ¦¬νŽ˜μΉ­ λͺ¨λ“ˆμ„ 자유둭게 μƒμ„±ν•˜μ‹­μ‹œμ˜€. κΉ”λ”ν•œ 점은 next/prefetch μ‚¬μš©ν•˜μ§€ μ•ŠμœΌλ©΄ λΉŒλ“œμ— ν¬ν•¨λ˜μ§€ μ•ŠλŠ”λ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. 뭉침이 μ—†μ–΄μš” :)

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰