CSR이 여기서 필요한 이유는 SPA기반 SSR은 CSR앱을 이용해 서버에서 렌더링하는 것이기 때문입니다. 또한 SPA기반 SSR은 클라이언트가 페이지에 최초 접속시, 정확히 말하자면 SSR을 담당하는 서버에 요청을 보내는 과정에서만 SSR이 이루어지고, 그 이후 렌더링 과정은 CSR로 이루어지기 때문입니다.
CSR 코드 작성
< src/About.js >
import React from "react";
const About = () => {
return (
<div>
<h3>This is About page</h3>
</div>
);
};
export default About;< src/Home.js >
import React from "react";
const Home = () => {
return (
<div>
<h3>This is Home page</h3>
</div>
);
};
export default Home;< src/App.js >
import React, { useState, useEffect } from "react";
import Home from "./Home";
import About from "./About";
function App({ page: initialPage }) {
const [page, setPage] = useState(initialPage);
useEffect(() => {
window.onpopstate = (event) => {
setPage(event.state);
};
}, []);
function onChangePage(e) {
const newPage = e.target.dataset.page;
window.history.pushState(newPage, "", `/${newPage}`);
setPage(newPage);
}
const PageComponent = page === "home" ? Home : About;
return (
<div>
<button data-page="home" onClick={onChangePage}>
Home
</button>
<button data-page="about" onClick={onChangePage}>
About
</button>
<PageComponent />
</div>
);
}
export default App;< src/index.js >
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App page="home" />, document.getElementById("root"));< template/index.html >
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>test-ssr</title>
</head>
<body>
<div id="root"></div>
</body>
</html>< webpack.config.js >
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "[name].[chunkhash].js",
path: path.resolve(__dirname, "dist"),
},
devServer: {
historyApiFallback: true,
port: 9000,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: require.resolve("babel-loader"),
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./template/index.html",
}),
],
};< babel.config.js >
const presets = ["@babel/preset-react", "@babel/preset-env"];
const plugins = [];
module.exports = { presets, plugins };아래는 DevServer의 결과물입니다.
'React > ReactJs' 카테고리의 다른 글
| styled-component의 동작방식 (0) | 2022.02.21 |
|---|---|
| SPA기반 SSR구현하기 - 3 (0) | 2022.02.20 |
| SPA기반 SSR구현하기 - 1 (0) | 2022.02.19 |
| React - Code-spliting, Lazy Reloading (0) | 2022.02.19 |
| Webpack을 통한 React개발환경 구축하기 (0) | 2022.02.19 |