React는 많은 웹 개발자들이 사랑하는 자바스크립트 라이브러리입니다. 그리고 Server-Side Rendering (SSR)은 웹 애플리케이션의 초기 로딩 속도를 개선하고 SEO (검색 엔진 최적화)를 향상시키는 방법 중 하나입니다. 이 가이드는 React를 사용하여 자바스크립트 SSR 개발을 시작하는 데 도움이 될 것입니다.
1. SSR의 이점
SSR의 가장 큰 이점 중 하나는 초기 로딩 속도의 개선입니다. 일반적으로, 클라이언트 측에서 렌더링되는 SPA (Single Page Application)는 자바스크립트 번들을 다운로드하고 실행하는 시간이 필요합니다. 이로 인해 초기 로딩이 느리고 사용자 경험이 저하될 수 있습니다. SSR은 서버에서 렌더링을 처리하기 때문에, 사용자의 브라우저에 페이지가 빠르게 나타나는 장점이 있습니다.
또한 SSR은 검색 엔진 최적화를 향상시킬 수 있습니다. 일반적인 SPA는 검색 엔진 크롤러가 자바스크립트를 실행하지 못하기 때문에, 페이지 콘텐츠가 인덱싱되지 않을 수 있습니다. 반면, SSR은 서버에서 렌더링되기 때문에, 검색 엔진 크롤러가 이를 쉽게 인식하고 인덱싱할 수 있습니다.
2. React SSR 개발 절차
React SSR을 개발하는 일반적인 절차는 다음과 같습니다:
- 서버에서 요청이 발생하면, 클라이언트 측 애플리케이션의 초기 상태를 구성합니다.
- 초기 상태를 기반으로 React 컴포넌트를 렌더링합니다.
- 렌더링된 HTML과 초기 상태를 클라이언트로 전송합니다.
- 클라이언트에서는 전송된 HTML과 초기 상태를 기반으로 애플리케이션을 마운트합니다.
- 클라이언트 측 라우팅을 설정하여 클라이언트에서 이후의 렌더링을 처리합니다.
3. React SSR 구현 예제
다음은 React SSR을 구현하는 예제입니다:
// server.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';
const app = express();
app.get('/', (req, res) => {
const initialState = {
// 초기 상태 설정
};
const appMarkup = ReactDOMServer.renderToString(<App initialState={initialState} />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>React SSR Example</title>
</head>
<body>
<div id="root">${appMarkup}</div>
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
</script>
<script src="/client.js"></script>
</body>
</html>
`);
});
app.use(express.static('public'));
app.listen(3000, () => {
console.log('Server is listening on port 3000');
});
// client.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const initialState = window.__INITIAL_STATE__;
ReactDOM.hydrate(<App initialState={initialState} />, document.getElementById('root'));
위의 예제 코드는 Express 서버를 사용하여 React SSR을 구현하는 방법을 보여줍니다. 서버 측에서는 시간이 필요한 비동기 작업 또는 데이터 로딩과 같은 작업을 처리하여 초기 상태를 설정하고, 렌더링된 HTML과 초기 상태를 클라이언트로 전송합니다. 클라이언트 측에서는 전송된 HTML과 초기 상태를 기반으로 애플리케이션을 마운트합니다.