[nodejs] SSR과 웹 애플리케이션 성능 최적화

19 Dec 2023

nodejs

최근 웹 애플리케이션의 성능 최적화가 중요한 이슈로 떠오르고 있습니다. 사용자는 더 나은 웹 경험을 원하기 때문에, 웹 애플리케이션의 초기 로딩 시간을 줄이고 성능을 향상시키는 것이 중요합니다. 이를 위해 서버 사이드 렌더링(SSR)이 유용한 도구로 자리 잡고 있습니다.

SSR이란?

SSR은 서버 측 렌더링의 약자로, 클라이언트에서가 아닌 서버에서 웹 페이지를 렌더링하는 방법을 의미합니다. 이를 통해 초기 페이지의 렌더링 속도를 향상시킬 수 있습니다.

// Example SSR using Node.js
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 reactHtml = ReactDOMServer.renderToString(React.createElement(App));
  res.send(`<!DOCTYPE html>
  <html>
    <head>
      <title>SSR Example</title>
    </head>
    <body>
      <div id="root">${reactHtml}</div>
    </body>
  </html>`);
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

SSR의 장점

SSR을 통해 초기 로딩 속도를 증가시키고 검색 엔진 최적화(SEO)를 향상시킬 수 있습니다. 또한, 클라이언트 사이드 렌더링(CSR)보다 초기 렌더링 시간을 줄일 수 있기 때문에 사용자들에게 더 빠르고 유저 친화적인 경험을 제공할 수 있습니다.

SSR의 단점

SSR은 클라이언트 사이드 렌더링과 비교하여 서버 부하가 증가할 수 있습니다. 또한, 모든 웹 애플리케이션이 SSR을 사용하기에는 복잡성과 비용 문제가 있을 수 있습니다.

결론

SSR은 웹 애플리케이션의 성능 최적화를 위한 강력한 도구로 사용될 수 있지만, 상황에 따라 적절하게 선택하여 구현해야 합니다. 성능 향상과 사용자 경험을 고려하여 SSR을 효과적으로 적용할 수 있도록 노력해야 합니다.

참고 문헌: Google Developers - Server Side Rendering for React