반응형
SSR(Server-Side Rendering)은 서버에서 HTML, CSS, JavaScript 등을 렌더링하여 클라이언트에게 전달하는 방식이다.
1. Node.js 설치
Node.js는 JavaScript를 실행할 수 있는 서버 측 런타임으로 SSR을 구현하려면 필요하다.
공식 홍페이지(https://nodejs.org/)에서 다운로드하거나, 패키지 매니저를 통해 설치할 수 있다.
2. 프로젝트 생성
SSR을 구현할 프로젝트를 생성해야한다. 프로젝트 생성 방법은 아래와 같다.
mkdir my-ssr-project
cd my-ssr-project
npm init -y이 명령어를 실행하면 `package.json`파일이 생성된다.
3. 서버 환경 구성
Express.js는 Node.js를 기반으로 동작하는 웹 프레임워크이다. Node.js와 Express.js를 사용하여 서버 환경을 구성한다. 필요한 라이브러리를 설치하고, Express.js 앱을 생성한다.
npm install express react react-dom react-router-dom// server.js
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router-dom');
const App = require('./App').default; // 클라이언트 앱
const app = express();
app.use(express.static('public'));
app.get('*', (req, res) => {
const context = {};
const html = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
res.send(`
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="root">${html}</div>
<script src="bundle.js"></script>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log('Server is listening on port 3000');
});
4. 클라이언트 앱 구현
React 앱을 만든다. 이 앱은 서버에서 렌더링할 때와 클라이언트에서 렌더링할 때 모두 사용된다.
// App.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
);
}
export default App;
5. 클라이언트 앱 빌드
Webpack을 사용하여 클라이언트 앱을 빌드한다. 이때 서버에서 렌더링할 때 필요한 파일을 생성해야 한다.
// webpack.config.js
const path = require('path');
module.exports = {
entry: './client.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
},
},
},
],
},
};
6. 서버 실행
node server.js
이제 브라우저에서 http://localhost:3000에 접속하여 앱이 정상적으로 동작하는지 확인할 수 있다.
반응형
'매일 해내는 개발 > Develog' 카테고리의 다른 글
| [Develog] 좋아요 기능 optimistic update로 구현하기 (0) | 2023.03.22 |
|---|---|
| [Develog] 링크드리스트로 투두리스트 구현하기.js (0) | 2023.03.21 |
| [Develog] SSR과 CSR 비교 (0) | 2023.03.15 |
| [Develog] JAMStack과 정적 사이트 생성기 (0) | 2023.03.14 |
| [Develog] npm의 --save, --save-dev 등의 플래그와 그 종류 (0) | 2023.03.12 |
댓글