CSR
JS 가 다운로드 되어 리액트 어플리케이션이 정상 실행되기 전까지는 화면이 보이지 않는다. 리액트 어플리케이션이 정상 실행된 후 유저 인터렉션 가능하다.
SSR
JS가 전부 다운로드 되지 않아도 화면이 보이지만 유저 인터렉션은 불가능하다. JS 가 전부 다운로드 되어 리액트가 정상 실행된 후 사용 가능하다. 즉, 기능이 동작하지 않더라도 화면이 먼저 그려지기 때문에 유저가 빈 화면을 보고 있지 않는다.
next.js 와 react
마이 페이지를 만드는 과정에서 react-router-dom 라이브러리를 이용해서 NavLink 와 Outlet 을 사용하려고 했다. Outlet 사용했을 때 원하는 위치에 렌더링 할 수 있다고 해서 사이드 메뉴는 최상위 페이지에 하나만 만들어두고 오른쪽 부분에 메뉴에 따른 화면을 렌더링 시키고 싶어서
하지만 문제는 라우팅이 내 생각되로 되지 않는 것도 있었는데 이걸 해결하려고 코드를 바꿔보는 와중에 document not founded 라는 에러가 출력되는 것이었다.
저 에러가 매번 출력되는 건 아니었고 두 가지 상황에서만 그랬다.
- 주소창에 바로 입력해서 들어왔을 때
- 새로고침 했을 때
구글링을 해도 react-router-dom 을 이용하면서 나랑 똑같은 문제를 가진 사람은 없었는데, 한 포스팅(https://helloinyong.tistory.com/248)을 보고 그제서야 어떤 문제가 있었는지 알 수 있었다.
에러가 발생하는 상황이 SSR 방식으로 렌더링이 되기 때문에 렌더링이 되기 전 DOM에 접근하려 했기 때문에 document 를 찾을 수 없다는 에러가 발생하는 것이었다. 반대로 메뉴에 있는 마이페이지 버튼을 누를 때는 CSR 이 일어나기 때문에 오류가 발생하지 않았던 거였다.
react-router-dom 을 사용하지 않고 next에서 제공하는 Link 태그를 사용했다면 이런 문제는 겪지 않았을 수도 있다. 하지만 이번 기회를 통해 SSR, CSR, next.js 에 대해 다시 공부할 수 있어서 좋았다.
