2023년 5월 18일

React.js와 Node.js를 사용하여 SSR로 페이지별 SEO를 최적화

  1. 먼저 애플리케이션을 실행하는 데 사용할 프로젝트 폴더를 생성합니다.
  2. 프로젝트 폴더에 package.json이라는 파일을 생성합니다.
  3. package.json 파일에 다음 코드를 붙여넣습니다.
{
  "name": "react-ssr-app",
  "version": "1.0.0",
  "description": "A simple React SSR application",
  "main": "index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "express": "^4.17.1",
    "react-ssr": "^1.1.0",
    "react-helmet": "^6.0.3"
  }
}
  1. 터미널에서 npm install 명령을 실행하여 React, React DOM, React SSR 및 React Helmet을 설치합니다.
  2. 프로젝트 폴더에 index.js라는 파일을 생성합니다.
  3. index.js 파일에 다음 코드를 붙여넣습니다.
const express = require('express');
const React = require('react');
const ReactDOM = require('react-dom');
const ReactSSR = require('react-ssr');
const ReactHelmet = require('react-helmet');

const app = express();

app.get('/', (req, res) => {
  const App = () => {
    return (
      <div>
        <h1>About</h1>
        <h2>This is the about page.</h2>
        <ReactHelmet title="About" description="This is the about page." />
      </div>
    );
  };

  const ssrApp = ReactSSR.createServerApp(App);
  const html = ssrApp.renderToString();

  res.send(html);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
  1. 터미널에서 node index.js 명령을 실행하여 서버를 시작합니다.
  2. 브라우저에서 http://localhost:3000으로 이동하여 애플리케이션의 응답을 확인합니다.

이 코드는 검색 엔진에 의해 인식될 수 있는 완전히 렌더링된 HTML 응답을 생성합니다. 또한 og:title 및 og:description 메타 태그를 사용하여 페이지의 제목 및 설명을 지정합니다.