JavaScript에서의Hydration?
하이드레이션(Hydration)은 클라이언트 측에서 초기 HTML 마크업을 서버로부터 받아와서 해당 마크업을 동적으로 변환하고 렌더링하는 프로세스를 말합니다. 특히, JavaScript 프레임워크에서는 클라이언트 측에서 동적인 웹 애플리케이션을 구축할 때 중요한 역할을 합니다. 효율적인 하이드레이션은 초기 로딩 속도를 향상시키고 검색 엔진 최적화(SEO)에도 도움이 될 수 있습니다.
대표적인 예시
React: React에서는 서버 측 렌더링(SSR)을 사용하여 초기 마크업을 서버에서 생성한 후 클라이언트로 전송합니다. 클라이언트에서는 이 초기 마크업을 기반으로 가상 DOM을 구성하고, 서버에서 전송된 상태를 재사용하여 클라이언트 측 렌더링을 수행합니다.
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');
const app = express();
app.get('/', (req, res) => {
const initialMarkup = ReactDOMServer.renderToString(<App />);
res.send(`
<html>
<head>
</head>
<body>
<div id="app">${initialMarkup}</div>
<script src="/path/to/bundle.js"></script>
</body>
</html>
`);
});
const initialData = window.__INITIAL_DATA__;
const rootElement = document.getElementById('app');
ReactDOM.hydrate(<App {...initialData} />, rootElement);Vue: Vue.js에서도 SSR을 사용하여 초기 마크업을 생성하고 클라이언트에서는 이를 재사용하여 앱을 하이드레이션합니다.
const express = require('express');
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
const app = express();
app.get('/', (req, res) => {
const app = new Vue({
data: { message: 'Hello, Vue!' },
template: '<div>{{ message }}</div>'
});
renderer.renderToString(app, (err, html) => {
if (err) throw err;
res.send(`
<html>
<head>
</head>
<body>
<div id="app">${html}</div>
<script src="/path/to/bundle.js"></script>
</body>
</html>
`);
});
});
const app = new Vue({
data: { message: 'Hello, Vue!' },
template: '<div>{{ message }}</div>'
});
app.$mount('#app');Angular: Angular는 Angular Universal을 사용하여 서버 측 렌더링을 제공합니다. 이를 통해 초기 마크업을 서버에서 생성하고 클라이언트에서 재사용할 수 있습니다.
결론
이러한 방법들은 각 프레임워크나 라이브러리마다 다르게 구현될 수 있습니다. 선택한 프레임워크와 사용하는 라이브러리에 따라 세부적인 구현이 달라질 수 있으므로 해당 프레임워크와 라이브러리의 공식 문서 및 예제를 참고하는 것이 좋습니다.
새로운 기술을 즐기는 라이프 하루에 한번 포스팅하기!