서버 사이드 렌더링을 할 때는 이미 있는 정보를 재요청하지 않게 처리하는 작업이 중요합니다. 이 작업을 하지 않으면 서버 사이드 렌더링 후 브라우저에서 페이지를 확인할 때 이미 데이터를 가지고 있음에도 불구하고 불필요한 API를 호출하게 됩니다. 그러면 트래픽도 낭비되고 사용자 경험도 저하되겠지요?

컨테이너 컴포넌트를 모두 작성했으면 이 컴포넌트를 보여 줄 페이지 컴포넌트를 만들고, 라우트 설정을 해 주세요.

pages/UsersPage.js

import React from 'react';
import UsersContainer from '../containers/UsersContainer';

const UsersPage = () => {
  return <UsersContainer />;
};

export default UsersPage;

---

 

App.js

import React from 'react';
import { Route } from 'react-router-dom';
import Menu from './components/Menu';
import RedPage from './pages/RedPage';
import BluePage from './pages/BluePage';
import UsersPage from './pages/UsersPage';

const App = () => {
  return (
    <div>
      <Menu />
      <hr />
      <Route path="/red" component={RedPage} />
      <Route path="/blue" component={BluePage} />
      <Route path="/users" component={UsersPage} />
    </div>
  );
};

export default App;

---