서버 측 렌더링(SSR)은 React 애플리케이션의 초기 로딩 시간을 단축시키고 검색 엔진 최적화(SEO)를 향상시키는 효과적인 방법입니다. 이 가이드에서는 React 앱에 SSR을 구현하여 사용자 경험을 개선하고 검색 엔진에서의 가시성을 높이는 방법을 소개합니다.
서버 측 렌더링의 이점:
- 성능 향상: 사용자가 보게 될 초기 콘텐츠를 더 빠르게 로드합니다.
- SEO 최적화: 검색 엔진이 앱의 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있게 합니다.
- 향상된 접근성: 느린 인터넷 연결이나 저성능 장치에서 사용자 경험을 개선합니다.
React에서 SSR 구현하기:
1. 필수 도구 설치:
Node.js 및 Express 서버가 필요합니다. 또한, react-dom/server에서 제공하는 SSR 메서드를 사용합니다.
|
1
|
npm install express react-dom
|
cs |
2. 서버 구축하기:
Express를 사용하여 간단한 서버를 구축하고, React 컴포넌트를 서버에서 렌더링합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const express = require(‘express’);
const ReactDOMServer = require(‘react-dom/server’);
const App = require(‘./src/App’);
const app = express();
app.get(‘*’, (req, res) => {
const appString = ReactDOMServer.renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>React SSR App</title>
</head>
<body>
<div id=“root”>${appString}</div>
</body>
</html>
`);
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
|
cs |
3. 클라이언트 사이드 하이드레이션:
서버에서 렌더링된 마크업과 클라이언트 사이드 JavaScript가 연동되도록 합니다.
|
1
2
3
4
5
|
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;
ReactDOM.hydrate(<App />, document.getElementById(‘root’));
|
cs |
고려 사항:
- 데이터 패칭: 서버와 클라이언트 모두에서 애플리케이션 상태를 동기화하는 방법을 고려해야 합니다.
- 캐싱 전략: 렌더링 성능을 최적화하기 위해 캐싱 전략을 구현합니다.
- 코드 분할: 초기 로드 시간을 단축하기 위해 필요한 코드만 로드하도록 코드를 분할합니다.
React와 서버 측 렌더링을 사용하면 애플리케이션의 초기 로딩 시간을 줄이고, SEO를 개선하여 사용자 경험을 향상시킬 수 있습니다.
React 앱에 SSR을 성공적으로 구현하는 데 도움이 되기를 바랍니다.