SSR : SEO 최적화, 초기 구동 속보다 CSR보다 빠름
Next.js는 React기반으로 라우팅과 SSR을 간편하게 적용하기 위해 나온 프레임워크로 SSR이 필요한 페이지는 getServerSideProps를 이용하면 된다.
- 참고로 getStaticProps, getStaticPaths(였나) 함수도 있는데, 대부분 사용하지 않는다. 정적인 데이터나 화면을 사용할 경우엔 사용해도 된다.
사용하기
import React, { useEffect } from 'react';
import { END } from 'redux-saga';
import axios from 'axios';
import 스토어 from '../store/configureStore';
// ...그리고 그외의 필요한 컴포넌트
const Index = () => {
const { 필요한 변수 } = useSelector((state) => state.리듀서);
return (
<Layout>
{ 변수 && <컴포넌트 /> }
</Layout>
);
};
// 서버사이드 렌더링 : 프론트 서버가 직접 요청하기 때문에 withCredentials문제 다시 발생하므로 브러우저 대신 cookie를 보내줘야함.
export const getServerSideProps = 스토어.getServerSideProps(async (context) => {
console.log('start');
const cookie = context.req ? context.req.headers.cookie : '';
axios.defaults.headers.Cookie = '';
// 서버일때와 쿠키가 있을 때만 cookie 넣어놓기
if (context.req && cookie) {
axios.defaults.headers.Cookie = cookie;
}
context.store.dispatch(액션());
context.store.dispatch(END);
console.log('end');
await context.store.sagaTask.toPromise();
});
export default Index;
- store, action, END, axios는 필수로 import한다.
- req.headers에서 cookie값을 가져와서 axios에 defaults값으로 설정한다. 기존에는 해당 역할을 브라우저가 대신 해주어서 rootSaga에서 한번에 withCredential: true;를 적용했었다. 하지만 SSR은 프론트엔드가 axios를 직접하기 때문에 따로 담아주어야한다.
- context.store.dispatch를 통해서 action을 dispatch하고
- END와 toPromise를 통해서 끝낸다.
- 페이지에서 불러온 변수를 사용하는 방법은 기존에 사용하던 방법과 똑같이 useSelector, useDispatch를 사용하면 된다.
