똑같은 삽질은 2번 하지 말자

Nuxt3 vol.3 (Hydration) 본문

카테고리 없음

Nuxt3 vol.3 (Hydration)

곽빵 2024. 9. 7. 21:38

개요

Nuxt의 유니버셜 랜더링의 하이드레이션이라는 개념에 대해 정리해보고자 한다.

 

하이드레이션이란?

Nuxt 또는 Next에서도 사용되는 기술로써 SSR로 만들어진 정적 HTML에 클라이언트 사이드의 Javascript가 다시 활성화되는 과정을 말한다. 즉, 서버에서 생선된 정적 HTML이 브라우저에 로드된 후, 해당 HTML에 Javascript를 삽입시켜 동적인 인터랙티브가 가능하게 만드는 과정이다.

 

Nuxt에서는 어떻게 하이드레이션을 하고 있을까?

app.js

// Universal Code 서버와 클라이언트 양쪽에서 사용되는 코드
import { createSSRApp } from "vue";

export function createApp() {
  return createSSRApp({
    data: () => ({ count: 1 }),
    template: `<button @click="count++">{{ count }}</button>`,
  });
}
  • createSSRApp: SSR용의 app을 생성하는 함수이다.
  • 이 코드는 범용코드로 서버와 클라이언트 둘다에서 사용된다.

server.js

import { renderToString } from "vue/server-renderer";
import express from "express";
import { createApp } from "./app.js";

const server = express();

server.get("/", (req, res) => {
  const app = createApp();

  renderToString(app).then((html) => {
    res.send(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</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(3333, () => {
  console.log("Ready");
});
  • app.js에서 createSSRApp을 이용해 뷰 인스턴스를 생성한다.
  • 브라우저에 반환할 때 client.js라는 하이드레이션을 담당하는 코드도 같이 보낸다.
  • <script type="importmap"의 부분은 app.js의 import { createSSRApp } from "vue" 부분의 "vue"라는 식별자가 해당 링크를 가리키도록 하는 것이다.

 

client.js

import { createApp } from "./app.js";

createApp().mount("#app");
  • createApp은 createSSRApp이라는 함수로 만들어져 있는데 마운트를 할때 이미 SSR로 뷰 인스턴스가 만들어져 있다는 걸 가정하에 똑같은 뷰 인스턴스를 생성하고 동적 인터렉티브에 필요한 이벤트등을 등록하는 하이드레이션이 이루어진다.

 

nuxt에서 페이지의 SSR이 이루어질때 서버쪽에서 한번 그리고 클라이언트에서 한번 총 두번의 앱 인스턴스가 생성이 되며 실행된다. 이로인해 페이지의 새로고침을 할때 서버쪽 클라이언트쪽에서 각각 로그가 출력되는걸 이해할 수 있었다.

 

Comments