next를 쓰는 주된 이유는 서버 사이드 렌더링 때문이다.
서버 사이드 렌더링이란 무엇인지 부터 정확히 개념을 짚고 넘어가보자.
서버 사이드 렌더링
클라이언트에서 요청을 하면 html 리소스를 서버로 넘기고 서버에서 데이터를 받아와 html이 완료되고 이를 다시 클라이언트로 전달을 한다.
만약 로그인을 한 상태에서 새로고침을 한다면, csr 방식에서는 우선 로그인이 안된 것처럼 렌더링이 되었다가 서버로부터 로그인한 정보를 받아오고, 확인이 되면 다시 로그인된 정보로 렌더링을 해줄 것이다.
하지만 ssr 에서는 초기 렌더링을 하기전에 서버에 데이터를 보내 로그인 된 정보를 확인하고 받아와서 렌더링을 하는 것으로 초기 렌더링시 csr보다 사용자 입장에서 빠르게 보일 수 있다.
이러한 ssr을 next.js는 편리하게 할 수 있는데 이 방법을 알아보겠다.
------------------------------------------------------------
//ssr 이전 csr rootReducer
const rootReducer = combineReducers({
index : (state = {}, action) => {
switch(action.type){
case HYDRATE :
console.log("HYDRATE",action);
return {...state,...action.payload};
default :
return state;
}
},
user,
post,
})
export default rootReducer;
------------------------------------------------------------
//ssr 하기 위한 rootReducer 수정
const rootReducer = (state,action) => {
switch(action.type){
case HYDRATE :
console.log("HYDRATE",action);
return action.payload;
default : {
const combinedReducer = combineReducers({
user,
post,
})
return combinedReducer(state,action);
}
}
}
export default rootReducer;
------------------------------------------------------------
//
export const getServerSideProps = wrapper.getServerSideProps(async (context:)=>{
context.store.dispatch({
type : LOAD_MY_INFO_REQUEST,
});
context.store.dispatch({
type : LOAD_POSTS_REQUEST,
})
context.store.dispatch(END);
await context.store.sagaTast.toPromise();
})이런 식으로 렌더링하기 전에 getServerSideProps가 실행되고 로그인 되어있는지와 게시글들을 서버에서 받아오고 작성된 컴포넌트에 데이터들이 들어가서 렌더링이 된다.
하지만 이렇게만 코딩을 한다면 문제가 발생한다.
로그인을 했을 때 브라우저에 서버로부터 받아온 쿠키가 저장이 되는데, 지금 ssr을 하는 getServerSideProps 는 프론트서버에서 백엔드 서버로 바로 연결되는 것이기 때문에 브라우저에서 원래 자동으로 쿠키를 전달하는 것을 할 수가 없는 것!
따라서 쿠키를 따로 전달해야만 if 로그인이 되어있는 상태라면 백에서도 알아차려서 정상적으로 작동이 가능한 것이다.
export const getServerSideProps = wrapper.getServerSideProps(async(context)=>{
const cookie = context.req ? context.req.headers.cookie : "";
axios.defaults.headers.Cookie = "";
if(context.req && cookie){
axios.defaults.headers.Cookie = cookie;
}
context.store.dispatch({
type : LOAD_MY_INFO_REQUEST,
});
context.store.dispatch({
type : LOAD_POSTS_REQUEST,
});
context.store.dispatch(END);
})cookie 를 서버에서 받아왔다면, cookie에는 값이 저장이 될 것이고,
axios.defaults.headers.Cookie를 이용해서 cookie를 전달하면 될 것이다. 하지만, 어째서 바로 cookie를 넣어주지 않고 ""로 설정한 후 if로 조건이 만족할 때만 보여주는 것일까 ?
이유는 쿠키가 공유되버릴 수 있기 때문이다.
따라서 저렇게 조건이 충족되었을 때만 쿠키를 보내주는 형식으로 작성해야 한다.
정말 중요한 부분이다!!
쿠키에 대한 부분이 잘 정리가 안되어 있었는데 브라우저 프론트엔드 서버 백엔드 db 에 대해서 어떻게 작동하는지에 대해 공부하며 정리가 된 것 같다
