6. SSR 적용

mangojang·2023년 6월 8일

react-disney-app 회고록

목록 보기

6/8

이번 프로젝트에서 가장 이슈가 많았던 부분이다. 왜 SSR(ServerSideRendering)을 적용해야 했고, 그 과정에서 어떤 어려움이 있었는지, 정리해 보려고 한다.

적용하게 된 계기

처음부터 SSR을 바로 적용하지 않았고, 프로젝트가 어느 정도 구현되고 나서, 필요하다 싶어 적용 하였다.

firebase를 이용하여 로그인을 하고, 로그인 유무에 따라 페이지 이동과, 로그인 정보에 따른 프로필 렌더를 하는데, 이 부분이 새로 고침을 할 경우, 너무 부자연스러웠다. 페이지 이동하는 시간의 간격과, 프로필 사진 보여주는 부분이 막 요동을 치는데 반드시 SSR 적용을 해야 겠다 싶었다.

순조롭지 않았던 과정

firebase 가 SSR에 적합하지 않았다.
- 로그인 여부를 firebase authentication 에서 제공하는 onAuthStateChanged 메서드를 이용하여 받아오는데 이 메서드는 serverside 에서는 작동하지 않는다.
```
useEffect(() => {
		onAuthStateChanged(auth, user => {
			if (user) {
				// dispatch(setUser(user));
				dispatch(setLoggedIn(true));
				const photourl = user.photoURL;
				photourl && setPhotoUrl(photourl);
				setCookie('uid', user.uid, 1);
			}
		});
	}, [auth]);
```
➕ firebase말고 찾아본 로그인 방법
- next-auth : https://dantechblog.gatsbyjs.io/posts/next-auth/
- 카카오 : https://jforj.tistory.com/237 → CSR
찾아 보니 이런 방법이 있었음.

로그인 했을 경우, uid나 토큰을 브라우저 저장소에 저장하고,( 로그 아웃 시 지움.) 페이지 들어갈 때마다 브라우저 저장소의 uid나 토큰을 확인하고 로그인 여부를 판단
위의 방법을 참고로 uid를 localstorage에 저장하려고 하였으나 localstorage는 serverside에서 접근이 안되었다.
쿠키는 serverside에서도 접근이 가능하기에 쿠키에 저장하기로 하였다.
로그인 여부를 쿠키를 통해 serverside에서 접근 할 수 있게 되었고, 이를 redux 상태값으로 저장하려는데 에러가 발생하였다.
- RTK를 이용하여 상태 관리를 하였는데, getServerSideProps에서 RTK 훅을 사용하려고 하니, getServerSideProps안에서는 다른 훅을 쓰면 안된다고 에러가 뜸.
- RTK훅을 쓰지 않고 state를 바꾸려면, next-redux-wrapper를 사용하여 store.dispatch로 바꿔야 한다고 함. - 공식문서 참조
next-redux-wrapper 붙이는 과정이 험난 했음 😭
- 시작을 Next.js13 app 라우팅을 적용했는데, app 라우팅은 next-redux-wrapper 적용이 안되었다 . 그래서 page dir 라우팅으로 전면 수정 하였다. - 참고
- 처음에 App을 withRedux()로 감싸는 코드를 적용했다가 /!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore(). 라는 경고창이 떴다.
- 찾아 보았더니 useWrappedStore를 사용하여 store를 만들고 provider 로 감싸는 코드로 작성해야 한다고 한다. - 참고
- 그러나 다음엔 makeStore is not a function 이라는 에러가 났다 (🗻넘어 🗻)
  - 다른 샘플 코드를 참고하여 store = wrapper.useStore() 를 적용해 보았지만 이 또한 똑같은 에러 발생이었다
- 찾다 찾다 못 찾아서 결국 다시 withRedux()로 감싸는 방법으로 돌아갔다. (혹시 이 문제의 해결법을 알고 계시는 분은 댓글로 알려주시면 감사하겠습니다. 🙏)