React
, Vue
, Angular
κ° μλ€.Javascript
λ΄μ νΉμ ν¨μλ₯Ό νμ <div id="root" />
μ λ΄μ©μ κ΅μ²΄νλ€.React
μ κ²½μ° CRA
μ ν΅ν΄ webpack
, babel
κ°μ 볡μ‘ν μΈν
μ κ±°μΉμ§ μμλ λλ€.SPA
μ λ°λλλ κ°λ
μΌλ‘, νμ΄μ§ μμ²΄κ° μ¬λ¬κ°λ‘ μ§νλλ μΉ μ ν리μΌμ΄μ
μ λ§νλ€.HTML
, Javascript
, CSS
νμ₯μ νμΌμ μ°¨λ‘λλ‘ λ€μ΄λ‘λνλ©° μ΅μ΄ λΆλ¬μ¨ νμ΄μ§μ λ΄μ©μ λΉμ΄μλ€.(html, body νκ·Έλ§ μ‘΄μ¬)Javascript
νμΌμ΄ λ€μ΄λ‘λλ λ€μ, ν΄λΉ νμΌμ΄ DOM
μ HTML
μμ 그리기 μμνλ€.SEO
μ κ΄λ ¨μ΄ μ μ μ΄λλ―Ό νμ΄μ§λ₯Ό κ°λ°ν λ μ£Όλ‘ μ¬μ©νλ€.CSR
μ λΉν΄ νμ΄μ§ μλλ λ¦μ΄μ§ μμμ§λ§ μ 체μ μΌλ‘ μ¬μ©μμκ² λ³΄μ¬μ£Όλ μ½ν
μΈ κ΅¬μ±μ΄ μλ£λλ μμ μ λΉ¨λΌμ Έ UX
μΈ‘λ©΄μμ μ 리νλ€. CSR
μ λ¨μ μΈ '첫 νμ΄μ§ κΉ‘ν΅ μν'λ₯Ό 극볡ν μ μλ€.CSR
μ λΉν΄ μλ² λΆνκ° μ»€μ§κ±°λ 첫 λ‘λ©μ΄ λ§€μ° λ리λ€.SEO
κ° μ€μν 컀머μ€λ₯Ό κ°λ°ν λ μ£Όλ‘ μ¬μ©νλ€.μΉμ κ²μ νμ λ, λ΄κ° λ§λ μ¬μ΄νΈκ° μ 걸리λλ‘ νλ κ²μ΄λ©° κ²μ μμ§ μ΅μ ν
λΌκ³ νλ€.
μ½κ² λ§ν΄, λ΄κ° λ§λ μ¬μ΄νΈκ° μ’ λ μμμ λν¬λ₯Ό λ°μ μ μλ€κ³ μ΄ννλ κ²μ΄λ€.
CSR
μ κ²½μ° μ΅μ΄μλ νμ΄μ§μ λ΄μ©μ΄ μκΈ° λλ¬Έμ κ²μ λ
ΈμΆμ΄ μ΄λ ΅λ€.
SSR
μ κ²½μ° νμ΄μ§λ₯Ό μλ²μμ ꡬμ±ν ν 보μ¬μ£Όλ λ°©μμ΄κΈ° λλ¬Έμ, λ°λ‘ μ‘°μ¬ ν κ²μ λ
ΈμΆμ΄ λλ€.
κ²°λ‘ μ μΌλ‘ μλΉμ€μ λͺ©μ μ λ°λΌ CSR, SSRμ μ ν©νκ² μ¬μ©νλ κ²μ΄ κ°μ₯ μ’λ€.