-
모든 컴포넌트를 jsx, tsx로 설정하지 않아도됨
-
react를 매번 import하지 않아도 됨
-
useState, useEffect와 같은 react method 사용 시에는 import 해야 함
-
Static Pre Rendering
- CSR VS SSR (reactJS VS nextJS)
- CSR (예: reactJS)
- 브라우저 속도를 임의로 Slow 3G로 만들고 새로고침하여 CSR(react)로 만든 환경을 렌더링했을 경우
- 기본적으로 빈
<div id=“root”> 태그 생성된 상태
- 자바스크립트의 콘텐츠를 페인팅하므로 빈 화면이 지속된 상태
- 점차 자바스크립트 내 콘텐츠 노출
- 브라우저는 자바스크립트 코드가 왔을 때만 UI를 그릴 수 있으므로 느린 속도의 브라우저 환경에서는 콘텐츠가 정말 느리게 보임
- 정리
- 브라우저가 HTML을 가져올 때 빈 div로 가져옴
- 브라우저가 자바스크립트와 리액트를 실행
- 그 이후에 앱이 유저에게 노출(UI 완성)
- SSR (예: nextJS)
- 브라우저에서 HTML을 보여줄 때 nextJS는 pre-rendering을 해서 HTML에 실제 데이터를 보이도록 함
- 브라우저 속도를 임의로 Slow 3G로 만들고 새로고침했을 경우
- HTML 내 초기 콘텐츠가 노출됨(앱의 초기 상태를 활용해서 pre-redering 함)
- 이것이 가능한 이유?
- nextJS는 reactJS를 백엔드에서 동작시켜서 페이지를 미리 만듦
- 동작시킨 컴포넌트들을 렌더 시킴
- 렌더링 후에 HTML이 됨
- nextJS는 HTML을 페이지의 소스코드에 넣어줌
- 그렇게 됨으로써 javascript와 reactJS가 로딩되지 않아도 콘텐츠를 볼 수 있음
- 그 이후에 reactJS가 로딩되었을 때, 이미 존재하는 것들(HTML)과 연결되어 일반적인 reactJS 앱이 됨(nextJS의 초기 렌더링하고 reactJS가 이어받아 작동
- HTML을 미리 그려주니 SEO(검색엔진 최적화)에 특화되었다고 할 수 있음! 구글 엔진이 크롤링할 수 있으니
-
hydration: js, react 코드가 HTML과 동기화하여 앱이 동적으로 상호작용할 수 있도록 하는 과정, 위에서 첫 렌더링을 SSR로 하고 그 다음부터 CSR로 하는 과정을 말하는 듯 하다.
-
Routing
- next/link 내에 a 태그 넣어야 함(v13부터는 a 안 넣어도 됨)
- reactJS에서는 react-router-dom을 설치(라이브러리이기 때문)해야 했는데 nextJS는 모든 것을 제공해주는 프레임워크이므로 next/router 안에 useRouter를 사용하여 모든 라우팅 정보를 가져올 수 있음 (location 등)
-
CSS Modules
- style jsx 방식
- <style> 태그의 jsx 속성을 사용하고 각 모듈은 독립적이므로 어떠한 모듈에서 a 태그컬러를 전체 바꾼다고 해도 해당 컴포넌트 내에서만 스타일이 적용
- <style jsx>{
a { background: white }}</style>
- class name을 고민하지 않아도 되는 장점
- 소스코드에서 보면 <a class=“jsx-sa39aeb4f0d”> 이런 식으로 구성
- 직접 class name을 설정한 경우도 마찬가지로 모듈이 독립되어 있음
- .active.jsx-a8sf90bdje { … }