Next.js

React로 만드는 서버 사이드 렌더링(SSR) 프레임 워크
클라이언트 사이드 렌더링의 단점을 보안한다.

클라이언트 사이드 렌더링(CSR)의 단점

• 최초 로딩 속도 - 첫페이지 렌더링 시 서버로부터 모든 파일을 한번에 다운받고 파싱하므로 유저 대기 시간이 증가한다.
• 검색 엔진 최적화(seo) - 자바스크립트를 통해 동적으로 html 생성시 검색엔진은 정보를 잘 찾지 못한다.

서버 사이드 렌더링(SSR)의 장점

• 서버에서 자바스크립트,html,css 및 데이터까지 갖춘 html을 클라이언트에 전달 -> 초기 로딩 속도가 빠르다.
• 컨텐츠가 구성되어 있는 HTML을 서버에서 받기 때문에 검색엔진이 정보를 찾기 수월하다.

주요 기능

• 서버렌더링

  • 클라이언트 렌더링과 다르게 서버렌더링을 한 페이지의 페이지 소스보기를 클릭하면 내부에 소스가 있다.

• 컴파일과 번들링이 자동으로 실행된다. (webpack 과 babel)

• 개발 중 저장되는 코드는 자동으로 새로고침된다.

• pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅된다.

  • ex: pages/home.js -> localhost:3000/home
    (public 폴더도 pages의 폴더와 동일하게 라우팅 가능. But 모든 사람이 페이지에 접근할 수 있으므로 지양)

• style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들수 있다

• 정적 파일을 지원

• 타입스크립트에 대한 설정을 따로 하지 않아도 된다.

  • 타입스크립트를 설치하고 (yarn add typescript @types/node @types/react) 명령어 (yarn run dev)만 하면 자동으로 tsconfig, next-end.d.ts가 생성되어 타입스크립트로 코딩이 가능.

더 많은 기능- 공식문서

기본 작동 방식

SSR : 유저가 해당 url로 접속시 서버에서 해당하는 html을 응답한다

root URL로 들어오면 next.js는 pages 폴더 내의 index.js 이름을 가진 파일을 찾는다.
해당 파일에서 react-dom을 그리는 것과 연관된 js코드를 html로 변환해서 내려준다.

다른 파일(ex: home): home url로 들어올때 마찬가지로 해당 home.js 내용이 html로 변환

내부적으로 CSR을 하는 방법: next/link나 next/router 사용

https://nextjs.org/docs/getting-started
https://kyounghwan01.github.io/blog/React/next/basic/#document-tsx