React Hydrate λ° μλ² μ¬μ΄λ λ λλ§(SSR)μ ν΅ν΄ μ±λ₯, SEO λ° μ¬μ©μ κ²½ν κ°μ λ°©λ²μ μμ보μΈμ. React μ ν리μΌμ΄μ μ΅μ νλ₯Ό μν λͺ¨λ² μ¬λ‘ λ° κ³ κΈ κΈ°μ μ νμ΅ν©λλ€.
React Hydrate: μλ² μ¬μ΄λ λ λλ§ λ° ν΄λΌμ΄μΈνΈ μ¬μ΄λ ν μ΄ν¬μ€λ² μ¬μΈ΅ λΆμ
νλ μΉ κ°λ° μΈκ³μμ μ±λ₯κ³Ό μ¬μ©μ κ²½νμ λ§€μ° μ€μν©λλ€. μ¬μ©μ μΈν°νμ΄μ€ ꡬμΆμ μν λ리 μ¬μ©λλ JavaScript λΌμ΄λΈλ¬λ¦¬μΈ Reactλ μ΄λ¬ν μΈ‘λ©΄μ ν₯μμν€κΈ° μν μ¬λ¬ μ λ΅μ μ 곡ν©λλ€. κ·Έμ€ νλλ ν΄λΌμ΄μΈνΈ μΈ‘ νμ΄λλ μ΄μ κ³Ό κ²°ν©λ μλ² μ¬μ΄λ λ λλ§(SSR)μ λλ€. μ΄ κΈ°μ¬λ React hydrateμ λν ν¬κ΄μ μΈ νꡬλ₯Ό μ 곡νμ¬ μ리, μ΄μ , ꡬν λ° λͺ¨λ² μ¬λ‘λ₯Ό μ€λͺ ν©λλ€.
μλ² μ¬μ΄λ λ λλ§(SSR)μ΄λ 무μμ λκΉ?
μλ² μ¬μ΄λ λ λλ§(SSR)μ μΉ μ ν리μΌμ΄μ μ μ΄κΈ° HTMLμ΄ λΈλΌμ°μ κ° μλ μλ²μμ μμ±λλ κΈ°μ μ λλ€. μ ν΅μ μΌλ‘ Reactλ‘ κ΅¬μΆλ λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ (SPA)μ ν΄λΌμ΄μΈνΈ μΈ‘μμ λ λλ§λ©λλ€. μ¬μ©μκ° μ ν리μΌμ΄μ μ μ²μ λ°©λ¬Ένλ©΄ λΈλΌμ°μ λ JavaScript λ²λ€κ³Ό ν¨κ» μ΅μνμ HTML νμΌμ λ€μ΄λ‘λν©λλ€. κ·Έλ° λ€μ λΈλΌμ°μ λ JavaScriptλ₯Ό μ€ννμ¬ μ ν리μΌμ΄μ μ μ½ν μΈ λ₯Ό λ λλ§ν©λλ€. μ΄ νλ‘μΈμ€λ νΉν λλ¦° λ€νΈμν¬λ μ₯μΉμμ μΈμ§λ μ§μ°μ μ΄λν μ μμ΅λλ€. μ¬μ©μλ JavaScriptκ° μμ ν λ‘λλκ³ μ€νλ λκΉμ§ λΉ νλ©΄μ λ³΄κ² λ©λλ€. μ΄λ₯Ό μ’ μ’ "μ£½μμ ν°μ νλ©΄"μ΄λΌκ³ ν©λλ€.
SSRμ μλ²μμ μ ν리μΌμ΄μ μ μ΄κΈ° μνλ₯Ό 미리 λ λλ§νμ¬ μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν©λλ€. μλ²λ μμ ν λ λλ§λ HTML νμ΄μ§λ₯Ό λΈλΌμ°μ λ‘ λ³΄λ΄ μ¬μ©μκ° κ±°μ μ¦μ μ½ν μΈ λ₯Ό λ³Ό μ μλλ‘ ν©λλ€. λΈλΌμ°μ κ° HTMLμ λ°μΌλ©΄ JavaScript λ²λ€λ λ€μ΄λ‘λν©λλ€. JavaScriptκ° λ‘λλλ©΄ React μ ν리μΌμ΄μ μ "νμ΄λλ μ΄νΈ"λ©λλ€. μ¦, μλ²μμ μμ±λ μ μ HTMLμ μ΄μ΄λ°μ λννμΌλ‘ λ§λλλ€.
μλ² μ¬μ΄λ λ λλ§μ μ¬μ©νλ μ΄μ λ 무μμ λκΉ?
SSRμ λ€μκ³Ό κ°μ λͺ κ°μ§ μ£Όμ μ΄μ μ μ 곡ν©λλ€.
- ν₯μλ μΈμ§ μ±λ₯: μ¬μ©μλ μ½ν μΈ λ₯Ό λ 빨리 λ³Ό μ μμΌλ―λ‘ λ λμ μ΄κΈ° μ¬μ©μ κ²½νμ μ»μ μ μμ΅λλ€. μ΄λ λλ¦° λ€νΈμν¬λ μ₯μΉμ μ¬μ©μμκ² νΉν μ€μν©λλ€.
- λ λμ SEO(κ²μ μμ§ μ΅μ ν): κ²μ μμ§ ν¬λ‘€λ¬λ HTMLμ μ½κ² μ¬μ©ν μ μκΈ° λλ¬Έμ SSR νμ΄μ§μ μ½ν μΈ λ₯Ό μ½κ² μΈλ±μ±ν μ μμ΅λλ€. SPAλ ν¬λ‘€λ¬κ° JavaScriptλ₯Ό μ€ννμ¬ μ½ν μΈ λ₯Ό λ λλ§νλ λ° μμ‘΄νκΈ° λλ¬Έμ ν¬λ‘€λ¬μκ² μ΄λ €μΈ μ μμ΅λλ€. μΌλΆ ν¬λ‘€λ¬λ ν¨κ³Όμ μΌλ‘ μ€ννμ§ λͺ»ν μ μμ΅λλ€. μ΄λ μμ° κ²μ μμμ λ§€μ° μ€μν©λλ€.
- ν₯μλ μμ 곡μ : μμ λ―Έλμ΄ νλ«νΌμ μ¬μ©μκ° SSR νμ΄μ§μ λν λ§ν¬λ₯Ό 곡μ ν λ μ ννκ² λ―Έλ¦¬λ³΄κΈ°λ₯Ό μμ±ν μ μμ΅λλ€. νμν λ©νλ°μ΄ν°μ μ½ν μΈ κ° HTMLμμ μ½κ² μ¬μ©ν μ μκΈ° λλ¬Έμ λλ€.
- μ κ·Όμ±: SSRμ μ€ν¬λ¦° 리λ λ° κΈ°ν μ§μ κΈ°μ μμ μ½κ² μ¬μ©ν μ μλ μ½ν μΈ λ₯Ό μ 곡νμ¬ μ κ·Όμ±μ ν₯μμν¬ μ μμ΅λλ€.
React Hydrateλ 무μμ λκΉ?
React hydrateλ React μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νκ³ μλ²μμ λ λλ§λ HTMLμ ν΄λΌμ΄μΈνΈ μΈ‘μμ λννμΌλ‘ λ§λλ νλ‘μΈμ€μ λλ€. μλ²μμ λ³΄λΈ μ μ HTMLμ "λ€μ μ λλ©μ΄μ ν"νλ€κ³ μκ°νμμμ€. κΈ°λ³Έμ μΌλ‘ ν΄λΌμ΄μΈνΈμμ React μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό λ€μ λ§λ€κ³ μλ²μμ λ λλ§λ HTMLκ³Ό μΌμΉνλμ§ νμΈν©λλ€. νμ΄λλ μ΄μ ν Reactλ μ λ°μ΄νΈ λ° μνΈ μμ©μ ν¨μ¨μ μΌλ‘ μ²λ¦¬νμ¬ μνν μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€.
ReactDOM.hydrate()
λ©μλ(λλ React 18μ hydrateRoot()
)λ React μ»΄ν¬λνΈλ₯Ό λ§μ΄νΈνκ³ μλ²μμ λ λλ§λ κΈ°μ‘΄ DOM μμμ μ°κ²°νλ λ° μ¬μ©λ©λλ€. ReactDOM.render()
μ λ¬λ¦¬ ReactDOM.hydrate()
λ DOMμ μλ²μμ λ λλ§λ μ½ν
μΈ κ° μ΄λ―Έ ν¬ν¨λμ΄ μμ κ²μΌλ‘ μμνκ³ μ΄λ₯Ό 보쑴νλ €κ³ μλν©λλ€.
React Hydrate μλ λ°©μ
- μλ² μ¬μ΄λ λ λλ§: μλ²λ React μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό HTML λ¬Έμμ΄λ‘ λ λλ§ν©λλ€.
- HTMLμ ν΄λΌμ΄μΈνΈλ‘ 보λ΄κΈ°: μλ²λ μμ±λ HTMLμ ν΄λΌμ΄μΈνΈμ λΈλΌμ°μ λ‘ λ³΄λ λλ€.
- μ΄κΈ° νμ: λΈλΌμ°μ λ μ¬μ©μμκ² HTML μ½ν μΈ λ₯Ό νμν©λλ€.
- JavaScript λ€μ΄λ‘λ λ° μ€ν: λΈλΌμ°μ λ React μ ν리μΌμ΄μ μ΄ ν¬ν¨λ JavaScript λ²λ€μ λ€μ΄λ‘λνκ³ μ€νν©λλ€.
- νμ΄λλ μ΄μ : Reactλ ν΄λΌμ΄μΈνΈ μΈ‘μμ μ»΄ν¬λνΈ νΈλ¦¬λ₯Ό λ€μ λ§λ€κ³ μλ²μμ λ λλ§λ HTMLκ³Ό μΌμΉμν΅λλ€. κ·Έλ° λ€μ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νκ³ μ ν리μΌμ΄μ μ λννμΌλ‘ λ§λλλ€.
React Hydrate ꡬν
λ€μμ React hydrateλ₯Ό ꡬννλ λ°©λ²μ 보μ¬μ£Όλ κ°λ¨ν μμ λλ€.
μλ² μ¬μ΄λ(Expressκ° μλ Node.js)
```javascript const express = require('express'); const ReactDOMServer = require('react-dom/server'); const React = require('react'); // μν React μ»΄ν¬λνΈ function App() { return (μλ νμΈμ, μλ² μ¬μ΄λ λ λλ§!
μ΄ μ½ν μΈ λ μλ²μμ λ λλ§λ©λλ€.
ν΄λΌμ΄μΈνΈ μΈ‘(λΈλΌμ°μ )
```javascript import React from 'react'; import { hydrateRoot } from 'react-dom/client'; import App from './App'; // μ»΄ν¬λνΈκ° App.jsμ μλ€κ³ κ°μ ν©λλ€. const container = document.getElementById('root'); const root = hydrateRoot(container,μ€λͺ :
- μλ² μ¬μ΄λ: μλ²λ
ReactDOMServer.renderToString()
μ μ¬μ©νμ¬App
μ»΄ν¬λνΈλ₯Ό HTML λ¬Έμμ΄λ‘ λ λλ§ν©λλ€. κ·Έλ° λ€μ μλ²μμ λ λλ§λ μ½ν μΈ μ ν΄λΌμ΄μΈνΈ μΈ‘ JavaScript λ²λ€μ λ‘λνκΈ° μν μ€ν¬λ¦½νΈ νκ·Έλ₯Ό ν¬ν¨νμ¬ μ 체 HTML λ¬Έμλ₯Ό ꡬμ±ν©λλ€. - ν΄λΌμ΄μΈνΈ μΈ‘: ν΄λΌμ΄μΈνΈ μΈ‘ μ½λλ
react-dom/client
μμhydrateRoot
λ₯Ό κ°μ Έμ΅λλ€. μλ²μμ λ λλ§ν IDκ° "root"μΈ DOM μμλ₯Ό κ²μνκ³hydrateRoot
λ₯Ό νΈμΆνμ¬ React μ»΄ν¬λνΈλ₯Ό ν΄λΉ μμμ μ°κ²°ν©λλ€. React 17 μ΄νλ₯Ό μ¬μ©νλ κ²½μ° `ReactDOM.hydrate`λ₯Ό λμ μ¬μ©νμμμ€.
μΌλ°μ μΈ ν¨μ λ° ν΄κ²°μ±
React hydrateλ₯Ό μ¬μ©ν SSRμ μλΉν μ΄μ μ μ 곡νμ§λ§ νΉμ κ³Όμ λ μ μν©λλ€.
- νμ΄λλ μ΄μ λΆμΌμΉ: μΌλ°μ μΈ λ¬Έμ λ μλ²μμ λ λλ§λ HTMLκ³Ό νμ΄λλ μ΄μ μ€μ ν΄λΌμ΄μΈνΈμμ μμ±λ HTML κ°μ λΆμΌμΉμ λλ€. μ΄λ λ λλ§μ μ¬μ©λ λ°μ΄ν°μ μ°¨μ΄κ° μκ±°λ μλ²μ ν΄λΌμ΄μΈνΈ νκ²½ κ°μ μ»΄ν¬λνΈ λ Όλ¦¬κ° λ€λ₯Έ κ²½μ°μ λ°μν μ μμ΅λλ€. Reactλ μ΄λ¬ν λΆμΌμΉλ‘λΆν° 볡ꡬλ₯Ό μλνμ§λ§ μ±λ₯ μ νμ μκΈ°μΉ μμ λμμ μ΄λν μ μμ΅λλ€.
- ν΄κ²°μ± : μλ²μ ν΄λΌμ΄μΈνΈ λͺ¨λμμ λ λλ§μ λμΌν λ°μ΄ν°μ λ Όλ¦¬κ° μ¬μ©λλλ‘ ν©λλ€. λ°μ΄ν°μ λν λ¨μΌ μμ€λ₯Ό μ¬μ©νκ³ λμΌν μ½λκ° μλ²μ ν΄λΌμ΄μΈνΈ λͺ¨λμμ μ€νλ μ μμμ μλ―Ένλ λν(μ λλ²μ€) JavaScript ν¨ν΄μ μ¬μ©νλ κ²μ κ³ λ €νμμμ€.
- ν΄λΌμ΄μΈνΈ μ μ© μ½λ: μΌλΆ μ½λλ ν΄λΌμ΄μΈνΈμμλ§ μ€νλλλ‘ μλλμμ μ μμ΅λλ€(μ:
window
λλdocument
μ κ°μ λΈλΌμ°μ APIμ μνΈ μμ©). μλ²μμ μ΄λ¬ν μ½λλ₯Ό μ€ννλ©΄ μ€λ₯κ° λ°μν©λλ€. - ν΄κ²°μ± : ν΄λΌμ΄μΈνΈ μ μ© μ½λκ° λΈλΌμ°μ νκ²½μμλ§ μ€νλλλ‘ μ‘°κ±΄λΆ κ²μ¬λ₯Ό μ¬μ©ν©λλ€. μλ₯Ό λ€μ΄: ```javascript if (typeof window !== 'undefined') { // window κ°μ²΄λ₯Ό μ¬μ©νλ μ½λ } ```
- νμ¬ λΌμ΄λΈλ¬λ¦¬: μΌλΆ νμ¬ λΌμ΄λΈλ¬λ¦¬λ μλ² μ¬μ΄λ λ λλ§κ³Ό νΈνλμ§ μμ μ μμ΅λλ€.
- ν΄κ²°μ± : SSRμ©μΌλ‘ μ€κ³λ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ ννκ±°λ μ‘°κ±΄λΆ λ‘λ©μ μ¬μ©νμ¬ ν΄λΌμ΄μΈνΈ μΈ‘μμλ§ λΌμ΄λΈλ¬λ¦¬λ₯Ό λ‘λν©λλ€. λμ κ°μ Έμ€κΈ°λ₯Ό μ¬μ©νμ¬ ν΄λΌμ΄μΈνΈ μΈ‘ μ’ μμ± λ‘λλ₯Ό μ§μ°μν¬ μλ μμ΅λλ€.
- μ±λ₯ μ€λ²ν€λ: SSRμ 볡μ‘μ±μ μΆκ°νκ³ μλ² λ‘λλ₯Ό μ¦κ°μν¬ μ μμ΅λλ€.
- ν΄κ²°μ± : μΊμ± μ λ΅μ ꡬννμ¬ μλ²μ λ‘λλ₯Ό μ€μ λλ€. CDN(μ½ν μΈ μ μ‘ λ€νΈμν¬)μ μ¬μ©νμ¬ μ μ μμ°μ λ°°ν¬νκ³ μλ²λ¦¬μ€ ν¨μ νλ«νΌμ μ¬μ©νμ¬ SSR μμ²μ μ²λ¦¬νλ κ²μ κ³ λ €νμμμ€.
React Hydrate λͺ¨λ² μ¬λ‘
React hydrateλ₯Ό μ¬μ©νμ¬ μννκ³ ν¨μ¨μ μΈ SSR ꡬνμ 보μ₯νλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄μμμ€.
- μΌκ΄λ λ°μ΄ν°: μλ²μμ λ λλ§νλ λ° μ¬μ©λλ λ°μ΄ν°κ° ν΄λΌμ΄μΈνΈμμ μ¬μ©λλ λ°μ΄ν°μ λμΌνμ§ νμΈν©λλ€. μ΄λ κ² νλ©΄ νμ΄λλ μ΄μ λΆμΌμΉλ₯Ό λ°©μ§νκ³ μΌκ΄λ μ¬μ©μ κ²½νμ 보μ₯ν©λλ€. λν κΈ°λ₯μ κ°μΆ Redux λλ Zustandμ κ°μ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νλ κ²μ κ³ λ €νμμμ€.
- λν μ½λ: μλ²μ ν΄λΌμ΄μΈνΈ λͺ¨λμμ μ€νν μ μλ μ½λλ₯Ό μμ±ν©λλ€. μ‘°κ±΄λΆ κ²μ¬ μμ΄ λΈλΌμ°μ λ³ APIλ₯Ό μ§μ μ¬μ©νμ§ λ§μμμ€.
- μ½λ λΆν : μ½λ λΆν μ μ¬μ©νμ¬ JavaScript λ²λ€μ ν¬κΈ°λ₯Ό μ€μ λλ€. μ΄λ κ² νλ©΄ μ΄κΈ° λ‘λ μκ°μ΄ ν₯μλκ³ νμ΄λλ μ΄μ μ€μ μ€νν΄μΌ νλ JavaScriptμ μμ΄ μ€μ΄λλλ€.
- μ§μ° λ‘λ©: μ¦μ νμνμ§ μμ μ»΄ν¬λνΈμ λν΄ μ§μ° λ‘λ©μ ꡬνν©λλ€. μ΄λ κ² νλ©΄ μ΄κΈ° λ‘λ μκ°μ΄ λμ± μ€μ΄λ€κ³ μ±λ₯μ΄ ν₯μλ©λλ€.
- μΊμ±: μλ²μμ μΊμ± λ©μ»€λμ¦μ ꡬννμ¬ λ‘λλ₯Ό μ€μ΄κ³ μλ΅ μκ°μ κ°μ ν©λλ€. μ¬κΈ°μλ λ λλ§λ HTMLμ μΊμ±νκ±°λ λ λλ§μ μ¬μ©λ λ°μ΄ν°λ₯Ό μΊμ±νλ κ²μ΄ ν¬ν¨λ μ μμ΅λλ€. μΊμ±μλ Redis λλ Memcachedμ κ°μ λꡬλ₯Ό μ¬μ©ν©λλ€.
- μ±λ₯ λͺ¨λν°λ§: SSR ꡬνμ μ±λ₯μ λͺ¨λν°λ§νμ¬ λ³λͺ© νμμ μλ³νκ³ ν΄κ²°ν©λλ€. Google PageSpeed Insights, WebPageTest λ° New Relicκ³Ό κ°μ λꡬλ₯Ό μ¬μ©νμ¬ TTFB(첫 λ²μ§Έ λ°μ΄νΈκΉμ§μ μκ°), FCP(첫 λ²μ§Έ μ½ν μΈ νμΈνΈ) λ° LCP(κ°μ₯ ν° μ½ν μΈ νμΈνΈ)μ κ°μ λ©νΈλ¦μ μΆμ ν©λλ€.
- ν΄λΌμ΄μΈνΈ μΈ‘ λ€μ λ λλ§ μ΅μν: React μ»΄ν¬λνΈλ₯Ό μ΅μ ννμ¬ νμ΄λλ μ΄μ
ν λΆνμν λ€μ λ λλ§μ μ΅μνν©λλ€. λ©λͺ¨μ΄μ μ΄μ
(
React.memo
), shouldComponentUpdate(ν΄λμ€ μ»΄ν¬λνΈμμ) λ° useCallback/useMemo ν κ³Ό κ°μ κΈ°μ μ μ¬μ©νμ¬ props λλ μνκ° λ³κ²½λμ§ μμ κ²½μ° λ€μ λ λλ§μ λ°©μ§ν©λλ€. - νμ΄λλ μ΄μ μ DOM μ‘°μ λ°©μ§: νμ΄λλ μ΄μ μ΄ μλ£λκΈ° μ μ ν΄λΌμ΄μΈνΈ μΈ‘μμ DOMμ μμ νμ§ λ§μμμ€. μ΄λ κ² νλ©΄ νμ΄λλ μ΄μ λΆμΌμΉμ μκΈ°μΉ μμ λμμ΄ λ°μν μ μμ΅λλ€. DOM μ‘°μμ μννκΈ° μ μ νμ΄λλ μ΄μ νλ‘μΈμ€κ° μλ£λ λκΉμ§ κΈ°λ€λ¦½λλ€.
κ³ κΈ κΈ°μ
κΈ°λ³Έ ꡬν μΈμλ λͺ κ°μ§ κ³ κΈ κΈ°μ μ μ¬μ©νμ¬ React hydrateλ₯Ό μ¬μ©νμ¬ SSR ꡬνμ λμ± μ΅μ νν μ μμ΅λλ€.
- μ€νΈλ¦¬λ° SSR: HTMLμ ν΄λΌμ΄μΈνΈλ‘ 보λ΄κΈ° μ μ μ 체 μ ν리μΌμ΄μ μ΄ μλ²μμ λ λλ§λ λκΉμ§ κΈ°λ€λ¦¬λ λμ μ€νΈλ¦¬λ° SSRμ μ¬μ©νμ¬ HTML μ²ν¬λ₯Ό μ¬μ© κ°λ₯ν΄μ§λ λλ‘ λ³΄λ λλ€. μ΄λ κ² νλ©΄ TTFB(첫 λ²μ§Έ λ°μ΄νΈκΉμ§μ μκ°)λ₯Ό ν¬κ² κ°μ νκ³ λ λΉ λ₯Έ μΈμ§ λ‘λ© κ²½νμ μ 곡ν μ μμ΅λλ€. React 18μ μ€νΈλ¦¬λ° SSRμ λν κΈ°λ³Έ μ 곡 μ§μμ λμ ν©λλ€.
- μ νμ νμ΄λλ μ΄μ : λννμ΄κ±°λ μ¦κ°μ μΈ μ λ°μ΄νΈκ° νμν μ ν리μΌμ΄μ λΆλΆλ§ νμ΄λλ μ΄νΈν©λλ€. μ΄λ κ² νλ©΄ νμ΄λλ μ΄μ μ€μ μ€νν΄μΌ νλ JavaScriptμ μμ μ€μ΄κ³ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€. React Suspenseλ₯Ό μ¬μ©νμ¬ νμ΄λλ μ΄μ μμλ₯Ό μ μ΄ν μ μμ΅λλ€.
- μ μ§μ νμ΄λλ μ΄μ : νλ©΄μ 보μ΄λ μ€μν μ»΄ν¬λνΈμ νμ΄λλ μ΄μ μ λ¨Όμ μ°μ μν©λλ€. μ΄λ κ² νλ©΄ μ¬μ©μκ° κ°λ₯ν ν 빨리 μ ν리μΌμ΄μ μ κ°μ₯ μ€μν λΆλΆκ³Ό μνΈ μμ©ν μ μμ΅λλ€.
- λΆλΆ νμ΄λλ μ΄μ : λΆλΆ νμ΄λλ μ΄μ μ μ 곡νλ λΌμ΄λΈλ¬λ¦¬ λλ νλ μμν¬λ₯Ό μ¬μ©νλ κ²μ κ³ λ €νμ¬ μ΄λ€ μ»΄ν¬λνΈλ₯Ό μμ ν νμ΄λλ μ΄νΈνκ³ μ΄λ€ μ»΄ν¬λνΈλ₯Ό μ μ μΌλ‘ μ μ§ν μ§ μ νν μ μμ΅λλ€.
- νλ μμν¬ μ¬μ©: Next.js λ° Remixμ κ°μ νλ μμν¬λ SSRμ λν μΆμν λ° μ΅μ νλ₯Ό μ 곡νμ¬ κ΅¬ν λ° κ΄λ¦¬λ₯Ό λ μ½κ² λ§λλλ€. λΌμ°ν , λ°μ΄ν° κ°μ Έμ€κΈ° λ° μ½λ λΆν κ³Ό κ°μ 볡μ‘μ±μ μλμΌλ‘ μ²λ¦¬νλ κ²½μ°κ° λ§μ΅λλ€.
μ: λ°μ΄ν° νμμ λν κ΅μ μ κ³ λ € μ¬ν
κΈλ‘λ² μ»¨ν
μ€νΈμμ λ°μ΄ν°λ₯Ό μ²λ¦¬ν λλ λ‘μΌμΌ κ°μ νμ μ°¨μ΄λ₯Ό κ³ λ €νμμμ€. μλ₯Ό λ€μ΄ λ μ§ νμμ ν¬κ² λ€λ¦
λλ€. λ―Έκ΅μμλ λ μ§κ° μΌλ°μ μΌλ‘ MM/DD/YYYYλ‘ νμμ΄ μ§μ λμ§λ§ μ λ½μμλ DD/MM/YYYYκ° λ λ리 μ¬μ©λ©λλ€. λ§μ°¬κ°μ§λ‘ μ«μ νμ(μμμ κ΅¬λΆ κΈ°νΈ, μ² λ¨μ κ΅¬λΆ κΈ°νΈ)μ μ§μλ§λ€ λ€λ¦
λλ€. μ΄λ¬ν μ°¨μ΄μ μ ν΄κ²°νλ €λ©΄ react-intl
λλ i18next
μ κ°μ κ΅μ ν(i18n) λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμμμ€.
μ΄λ¬ν λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νλ©΄ μ¬μ©μμ λ‘μΌμΌμ λ°λΌ λ μ§, μ«μ λ° ν΅νλ₯Ό νμμ μ§μ νμ¬ μ μΈκ³ μ¬μ©μμκ² μΌκ΄λκ³ λ¬Ένμ μΌλ‘ μ μ ν κ²½νμ 보μ₯ν μ μμ΅λλ€.
κ²°λ‘
React hydrateλ μλ² μ¬μ΄λ λ λλ§κ³Ό ν¨κ» React μ ν리μΌμ΄μ μ μ±λ₯, SEO λ° μ¬μ©μ κ²½νμ κ°μ νκΈ° μν κ°λ ₯ν κΈ°μ μ λλ€. μ΄ κΈ°μ¬μ μ€λͺ λ μ리, ꡬν μΈλΆ μ¬ν λ° λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄ν¨μΌλ‘μ¨ SSRμ ν¨κ³Όμ μΌλ‘ νμ©νμ¬ λ λΉ λ₯΄κ³ μ κ·Όμ±μ΄ λ°μ΄λκ³ κ²μ μμ§μ μΉνμ μΈ μΉ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€. SSRμ 볡μ‘μ±μ λμ νμ§λ§ νΉν μ½ν μΈ κ° λ§κ³ SEOμ λ―Όκ°ν μ ν리μΌμ΄μ μ κ²½μ° μ 곡νλ μ΄μ μ΄ μ’ μ’ μ΄λ €μλ³΄λ€ ν½λλ€. SSR ꡬνμ μ§μμ μΌλ‘ λͺ¨λν°λ§νκ³ μ΅μ νν¨μΌλ‘μ¨ μμΉλ μ₯μΉμ κ΄κ³μμ΄ React μ ν리μΌμ΄μ μ΄ μΈκ³μ μμ€μ μ¬μ©μ κ²½νμ μ 곡νλλ‘ ν μ μμ΅λλ€.