React로 만드는 서버 사이드 렌더링(SSR) 프레임 워크
클라이언트 사이드 렌더링의 단점을 보안한다.
클라이언트 사이드 렌더링(CSR)의 단점
- 최초 로딩 속도 - 첫페이지 렌더링 시 서버로부터 모든 파일을 한번에 다운받고 파싱하므로 유저 대기 시간이 증가한다.
- 검색 엔진 최적화(seo) - 자바스크립트를 통해 동적으로 html 생성시 검색엔진은 정보를 잘 찾지 못한다.
서버 사이드 렌더링(SSR)의 장점
- 서버에서 자바스크립트,html,css 및 데이터까지 갖춘 html을 클라이언트에 전달 -> 초기 로딩 속도가 빠르다.
- 컨텐츠가 구성되어 있는 HTML을 서버에서 받기 때문에 검색엔진이 정보를 찾기 수월하다.
서버렌더링
컴파일과 번들링이 자동으로 실행된다. (webpack 과 babel)
개발 중 저장되는 코드는 자동으로 새로고침된다.
pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅된다.
style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들수 있다
정적 파일을 지원
타입스크립트에 대한 설정을 따로 하지 않아도 된다.
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