[nodejs] SSR과 SEO의 관계

19 Dec 2023

nodejs

서버 사이드 렌더링(SSR, Server-Side Rendering)은 웹 페이지를 서버에서 생성하여 클라이언트에게 전달하는 기술이며, 검색 엔진 최적화(SEO, Search Engine Optimization)에 중요한 영향을 미칩니다. 이 글에서는 SSR과 SEO 간의 관계에 대해 살펴보겠습니다.

SSR이란?

SSR은 클라이언트 측에서 HTML 파일을 생성하는 대신, 서버에서 미리 HTML 파일을 생성하여 클라이언트에 전달하는 방식을 말합니다. 즉, 사용자가 페이지를 요청할 때마다 서버에서 해당 페이지의 HTML을 생성하여 보여줍니다.

SEO와의 연관성

검색 엔진은 웹 페이지의 콘텐츠를 수집하기 위해 HTML을 읽어야 합니다. 클라이언트 사이드 렌더링(CSR, Client-Side Rendering)의 경우, 초기 페이지 로드 시에는 HTML에 적절한 콘텐츠가 포함되지 않을 수 있기 때문에 SEO에 부정적인 영향을 미칠 수 있습니다.

SSR은 초기 페이지 로드 시에 검색 엔진이 수집할 콘텐츠를 포함한 완전한 HTML을 제공하므로, 검색 엔진은 페이지의 콘텐츠를 효과적으로 수집할 수 있습니다. 따라서 SSR은 SEO를 개선하는 데 도움이 됩니다.

예시

다음은 Node.js와 Express를 사용하여 간단한 SSR 웹 애플리케이션을 구현하는 예시 코드입니다.

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

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

위의 예시 코드는 SSR을 사용하여 React 앱을 서버에서 렌더링하는 간단한 예시를 보여줍니다.

결론

SSR은 SEO를 향상시키는 데 도움이 되는 기술이며, 웹 페이지의 검색 엔진 최적화를 위해 SSR을 고려하는 것이 좋습니다.

참고 문헌

Google Developers - Making AJAX Applications Crawlable

서버 사이드 렌더링과 SEO에 대한 자세한 내용은 Google Developers의 문서를 참고하실 수 있습니다.