클라이언트-사이드 렌더링은 클라이언트=유저, 서버가 아닌 브라우저 등에서 렌더링 처리를 하는 형식을 말한다. 렌더링을 새로 그릴때마다 서버와 소통하지 않아도 되기 때문에(서버와 정보를 주고받아야 할 경우에는 필요함) 페이지를 로딩할때 클라이언트 측의 부하가 적다.
네트워크 상태가 좀 불안정해도 버틴다던지. 단순 페이지 이동시 데이터, 파워면에서 효율성이 좋다던지 하는 장점이 있다.
단점은 렌더링이 변화하는 부분을 클라이언트가 이렇게 행동할 것을 예측하고 깔아두는 자바스크립트 파일에 의존해야 해서 파일이 크고 + SPA일 경우 초기 실행시 모든 파일을 받아둬야 해서 페이지가 많을 경우 위의 장점이 그대로 단점으로 되어서 돌아온다는 것 등이 있다.
위에서 썼듯이 클라이언트 측에서 모든 변화에 대응하려고 하면 자바스크립트 파일이 커지는데 spa는 1개의 페이지로 구성되어 있기 때문에 전체 파일이 비대해져서 오히려 무거워질 수 있다.
이때 서버 사이드 렌더링이 되면 싱글페이지=일단 진입하면 그 안에서 로딩이 없음, 이라는 장점에다가 + 서버사이드=관련 데이터를 한번에 갖고있지 않고 그때그때 서버에서 가져옴=몸이 가벼움 이라는 장점이 합쳐져서 시너지를 낸다.
가볍고 로딩없고 퍼포먼스 좋은... 궁극체 디지몬같은 그런...
yarn start를 하면 package.json에서 스크립트에 start라고 되어있는데에 미리 세팅되어 있는 명령어가 실행된다.
리액트 프로젝트때와 달리 next start라고 써있는 것을 볼 수 있다.
참고로 여기에서 다른거(제이슨-서버 실행이라던지 노드서버 같이 켜기 등)를 && 연산자로 추가해두면 같이 켜진다.
https://github.com/vercel/next.js/blob/canary/packages/next/lib/commands.ts
해당 명령어와 연결된 코드는 이거
프로미스 형태로 되어있어서 성공-실패에 대응할 수 있다. 뭐가 켜지는지는 스타트서버 파일로 가보면 볼 수 있는 것 같다.
https://github.com/vercel/next.js/blob/canary/packages/next/server/lib/start-server.ts