내가 정리하는 Next.js

0. 요약
Next.js는 SPA고, 첫 페이지 내용이 모두 채워져 있는 html을 받아서 SSR이라고 하고, Link를 이용해서 CSR을 하고, 검색엔진최적화를 대응하려면 Next.js를 사용해야 된다.

1. Next.js는 SPA인가?
Next.js는 SPA인 리액트에서 SSR을 할 수 있게 구현이 되어있는 프레임워크이다. 
Next.js는 기존의 Multi Page Form이랑 다른 개념이다.
기존 Multi Page Form은 page가 변경될 때 마다 서버에서 html 파일을 새로 내려주지만, Next.js는 첫 페이지만 내려주고, 나머지는 CSR한다.

즉, 페이지가 갱신될 때 store가 살아있는 이유는 Next.js도 SPA이기 때문이다.

Next.js가 SPA인지 테스트해보기 위해 next export로 생성된 out 폴더를 노드서버로 띄워봤는데, index.html만 라우팅 처리하고, 나머지 html들은 라우팅 처리해주지 않았는데도 Link로 이동한 페이지는 잘 노출됐다.

SPA에서 페이지 갱신 때 store가 살아있는 이유는 SPA 환경에서는 react-router에서 히스토리를 가로채서 서버로 request를 보내는 것이 아니라 client 측에서 내부적으로 히스토리가 동작하기 때문이다.

2. 그렇다면 Next.js는 CSR이라는거야 SSR이라는거야?
CSR + SSR을 합치는 아이디어를 구현해주는 것이 Next.js이다.

내 기준 Next.js는 CSR이다. CSR이 처음에 빈 html을 랜더링하고, Next.js는 처음에 내용이 찬 html을 랜더링 해서 SSR이라고 하는 거 같은데, 라우팅 동작을 클라이언트에서 하는데 이걸 SSR이라고 볼 수 있나?

3. React.js 놔두고 왜 Next.js를 왜 사용하는가?
1) 검색엔진 최적화
React의 렌더링 방식은 render() 함수가 먼저 실행되고, 그다음에 ComponentDidMount() 함수를 통해 데이터를 가져와서 다시 한 번 렌더링이 된다.(검색엔진이 html을 긁어갈 때, html 안은 빈 값이다.)

Next의 렌더링 방식은 getInitialProps() 라는 함수를 사용하기 때문에 데이터를 먼저 가져와서 한 번에 렌더링을 해준다.
첫 페이지는 서버 사이드 렌더링하고 그 뒤에 발생하는 라우팅은 클라이언트 사이드 렌더링으로 하면 첫 페이지가 내용이 모두 채워져있는 html을 받고 이후 interaction이 가능한 js 파일은 따로 load해서 클라이언트에서는 DOM을 그대로 그리기만 하면 된다.

즉, Next.js의 첫 화면은 빈 html이 아니라, src/pages에 작성한 화면이라 검색엔진이 html을 잘 긁어갈 수 있다.

2) React는 서비스 규모가 커질수록 초기로딩이 느려진다는 단점이 있다.
Next.js는 해당 이슈를 해결하기 위해 필요에 따라 파일을 불러올 수 있게 여러 개의 파일을 분리하는 코드 스플리팅을 사용했다.(src/pages)
즉, 접속하는 page의 컴포넌트만 불러와서 초기로딩을 줄일 수 있다.

내가 알기론 React도 코드 스플리팅을 할 수 있는걸로 알고 있다. 그치만 사용 방법이 Next.js가 더 간편에서 Next.js 장점으로 꼽은 거 같다.