CSR/SSR with Next.js

CSR & SSR

CSR은 클라이언트에서 웹 페이지 렌더링을 하는 것이고 모든 로직, 데이터 페칭, 라우팅 등을 클라이언트에서 처리한다.

CSR은 한 번에 HTML, JS, CSS 등을 로드해서 부분적 리로드를 하지 않고 사용자와 동적으로 상호작용하는 웹 앱이다. 따라서 모든 컨텐츠가 동적으로 로드되어 브라우저는 앱 내에서 라우터를 이동하더라도 새로운 html을 요청하지 않고 기존에 로드한 소스들을 사용하여 컨텐츠를 업데이트 한다.

하지만 CSR은 초기에 모든 것을 로드하기 때문에 로딩 시간이 길고 검색 엔진의 크롤러가 페이지를 제대로 인식하지 못하기 때문에 SEO에 적합하지 않다.

CSR의 이런 단점을 보완하기 위해 다시 SSR 사용이 우세해지기 시작했다. SSR은 페이지를 서버에서 미리 렌더링하여 사용자나 크롤러에게 전달하고 그 후 JS를 로드하여 HTML과 결합한다.

따라서 빠른 페이지 로드와 SEO최적화, 소셜 공유에 최적화돼있다.

Next.js- npm start

npm start는 Next.js로 빌드한 웹 앱을 프로덕션 환경에서 실행하는 명령어이다.

npm start는 build된 앱을 실행하는 것이기 때문에 npm run build 명령어로 빌드가 선행되어야 한다.

추가적으로 개발환경에서 앱을 실행하기 위해서는 npm run dev 명령어를 입력하면 된다.

• 참고 블로그(https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg)