Nuxt에는 여러 가지 렌더링 모드가 있습니다.
Universal Rendering , Client-side Rendering, Hybrid Rendering
Universal Rendering
일반적으로 Nuxt에서 기본적으로 렌더링 되는 방법입니다.
url이 요청이 되면 서버에서 Vue.js 코드를 실행하여 화면에 보일 HTML 문서를 구성합니다.
클라이언트에서는 사용되어지는 이벤트, 페이지 전환 등 동적으로 움직여야 할 자바스크립트 코드를 로드합니다.
이러한 과정을 정적인 페이지를 동적인 페이지로 전환하는 것을 Hydration (수화)라고 합니다.
장점
서버에서 코드를 실행하여 HTML 문서를 구성하여 내려주니, 빠르게 접근이 가능하고 검색 엔진 최적화에 좋습니다.
Hydration 과정
Hydration은 수화라는 뜻입니다.
화학에서 어떤 물질이 물과 만나서 새로운 물질을 형상하는 것을 수화라고 합니다
정적인 페이지를 브라우저에서 자바스크립트르 파일을 로드하여 대화식 페이지로 전환하는 것을 Hydration이라고 합니다.
app.js
import { createSSRApp } from 'vue';
export function createApp() {
return createSSRApp({
data: () => ({ count: 1 }),
template: `<button @click="count++">{{ count }}</button>`,
});
}
서버 사이드 렌더링 방식으로 화면에 표시되어질 HTML을 구성합니다.
해당 방식은 정적 컨텐츠이기 때문에, 클릭 이벤트는 동작하지 않습니다.
client.js
import { createApp } from './app.js';
createApp().mount('#app');
앞에서 app.js에서 사용한 동일한 코드를 가져와서 브라우저에서 실행할 자바스크립트 코드를 생성합니다.
해당 파일을 브라우저에서 로드하여 동적인 페이지를 구성할 수 있습니다.
server.js
import express from 'express';
import { renderToString } from 'vue/server-renderer';
import { createApp } from './app.js';
const server = express();
server.get('/', (req, res) => {
const app = createApp();
renderToString(app).then((html) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Vue SSR Example</title>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<script type="module" src="/client.js"></script>
</head>
<body>
<div id="app">${html}</div>
</body>
</html>
`);
});
});
server.use(express.static('.'));
server.listen(3000, () => {
console.log('ready');
});
서버버에서 서버 측에서 생성한 html 코드와 client에서 실행할 자바스크립트 코드를 모두 send 하는 것을 볼 수 있습니다.