[Next.js] κ°λ° μ€λ ₯ μμΉμ λμλλ μ νλΈ μΆμ²
μ€λͺ
νμ΅μ μμ΄μ μλ§ λ³΄κ³ λ¬λ¦¬λ κ² λ³΄λ€ λ€λ₯Ό λμλ³Ό λ μ€λ ₯ μμΉμ΄ λ§μ΄ μΌμ΄ λλ€. Next.jsμ νλ μμν¬λ₯Ό 무쑰건 λ°λΌνλ©° μμνμ λλ λμν μ μλ€λ μ μ λν΄μ ν° μ€λ ₯μμΉμ μ»μ§λ§ μ΄λ΄ μμΉμ΄ λλ ꡬκ°μ΄ μΌμ΄λκ² λλ€. κ·Έ μ΄μ λ λμμ λμ§λ§ ν¨μ¨μ μ΄μ§ μλ€λ λ»μ΄λ€. λλ Next.jsλ‘ κ°λ°μ μμ λμ§ 1λ μ΄ λλ μμ μμ λ€μ κ°λ μ μ‘κ² λλ μμμ λ°κ²¬νμ¬ κ³΅μ νλ€.
μμμμ μκ²λ λμ μλ‘μ΄ κ΄μ μ Next.jsλ κΈ°λ³Έμ μΌλ‘ μλ² μ¬μ΄λ λλλ§(SSR)μ΄λ©° λͺ μμ μΌλ‘ ν΄λΌμ΄μΈνΈ μ¬μ΄λ λλλ§(CSR)μ μ§μ ν μ μλ€λ μ μ΄μλ€. λλ 무쑰건 CSRλ‘ κ°λ°μ λ€ λλ € λ£μ΄μ fetchμ κ°μ λ°μ΄ν° μ‘ μμ μ Server Actionμ μ¬μ©νμ§ μμλ κ²μ΄λ€. κ·Έλ¦¬κ³ return valueμ λ―Όκ°μ±μ μκ°νλ©° interfaceλ₯Ό λ§μΆλλΌ μκ°μ λ§μ΄ μΌμ§λ§ μλ²μμλ§ λ°μ΄ν°λ₯Ό μ²λ¦¬νλ©΄ κ·Έλ΄ μΌμ΄ μλ κ² μ΄μλ€.
Next.jsλ₯Ό μμνλ μ¬λλ€μ΄κ² 무쑰건 μΆμ²νλ λ°μ΄λ€. λλ Reactμ μλ°μ€ν¬λ¦½νΈ CSSλ λͺ¨λ₯Έμ±λ‘ μ λ¬Ένμ¬μ μ£Όλ³μ κ°μ λ¨Ήλ€κ° κΈ°μ΄λ₯Ό λμλ³Ό μ μλ μκ°μ κ°μ§λ©΄μ κ°λ°μ νμλλ° μΌμ κΈ°κ°μ΄ λλ©΄ νΌμλ Έ μ€μ΅νλ€ μ΄λ‘ μ 곡λΆνλ ν¨ν΄μ κ°μ§ λ―μ΄ λλ λ°°μμ μμ΄μ μ΄ λ°©λ²μ μ μ©νλ©΄ λΉ λ₯Έ μ€λ ₯μμΉμ κΈ°λν μ μμ κ²μ΄λ€.
Server Actionμμ Data κ°±μ λ²
revalidatePath
Server Componentμμ Client Componentμ λ°μ΄ν°λ₯Ό μ½μ μ λ€μ΄κ°λ λ°μ΄ν°λ User Clientλ‘ μ€μ ν΄μΌ νλ€.
νΉμ§
- Next.js κΈ°μ΄ μ»¨μ μ€λͺ
https://www.youtube.com/watch?v=vwSlYG7hFk0
- 29κ°μ§ μ€μλ₯Ό μλ €μ€
https://www.youtube.com/watch?v=5QP0mvrJkiY&t=2486s