React Next
1 | 나는 그저 SSR을 하기위해서 Next라는 프레임워크사용한다. 정도만 알고 있었고 SEO와 웹속도가 빠르게 하기 위해서 사용한다 정도?? |
서버사이드 렌더링(SSR)
장점.
- 검색엔진 최적화(SEO) - B2C서비스라면 대부분의 경우 SEO가 필수
- 사용자 입장에서 빠른 첫 페이지 렌더링
단점.
- 공짜가 아니다??
- 코드 복잡도 크게 증가하고 서버 관리 부담도 생김
SSR 구축
- create-react-app 기반으로 SSR환경 직접 구축
- SSR환경이 구축 되있는 next
next.js tip
initPage HOC
next.js 버전 7에서는 _app.js를 이용
모든 페이지에 공통으로 적용되는 기능은 HOC(higher order component)로 만들어서 사용
- 로그인여부
- user-agent 파싱정보
- global store
- 로딩
모든 페이지 컴포넌트를 initPage로 감싸준다.
단일 페이지
next.js를 빌드하면 main.js라는 파일이 만들어진다. main.js는 첫페이지 로딩시 클라이언트로 내려주는데, 파일 크기가 제법 크다.
main.js에는 절반 이상의 페이지에서 공통으로 사용되는 패키지나 next.js 라우팅 관련 코드가 들어가 있다.
라우팅이 필요없는 단일 페이지는 main.js를 클라이언트로 내려줄 필요가 없다.
document.js를 이용하면 main.js는 내려주지 않고 next.js의 서버 렌더링을 그대로 사용
document.js를 이용하면 main.js는 내려주지 않으면서 next.js의 서버 렌더링을 그대로 사용할 수 있습니다.
next/link 클릭 이벤트
next.js에서 제공해주는 link컴포넌트 사용 시 클릭 이벤트를 붙이고 싶은 경우가 있다.하지만 link 컴포넌트의 첫번째 자식에 onClick 이벤를 붙여도 동작하지 않는다.
next.js가 내부적으로 onClick을 사용하기 때문 Link를 사용하지 않고 router를 사용 하면 되지만 SEO를 위해서는 anchor 태그에 herf를 입력하고 router에서 또 다시 url을 입력해얃 되는 번거로움이 있다.