1. [page]app 폴더 안에 page파일을 찾음 (라우터 설정: url)
> 폴더 만들기 - page.tsx 파일 (내부 : export default function)
2. [not-found] url에 없는 경로 입력시 해당 화면 보여줌
3. <a>태그 대신에는 <Link href='/'> 사용하기
> next에서 지원하는 기능 Link
4.[hook: usePathname() + "use client"] 사용하기
> path name = user가 현재 머물고 있는 url
5. SSR vs CSR
=> Next.js에서 모든 컴포넌트와 페이지들은 먼저 backen에서 render됨
( " use client" 이건 브라우저가 주체겠지! => 아님 )
(1) SSR : 서버가 주체임
=> 사용자는 next.js가 backend에서 생성한 html을 보게 됨
(2) CSR +"use client" : 브라우저가 렌더링 주체!
+ html은 브라우저의 js 엔진에 의해 추가됨 = UI를 보려면 JS가 필수임 (설정에서 없게 설정하면 화면 ui 못 봄)
+ seo가 취약함
=> client가 JavaScript를 로드하고, 그 후에 JavaScript가 UI 빌드함
* 렌더링 : 리액트 코드를 브라우저가 이해할 수 있는 html로 변경하는 것
6. Hydration
> 우리가 받은 HTML 위에서 React application을 실행한다는 뜻.
> h1 과 같은 HTML은 interative 될 필요 없음 => 'use client'를 사용하는 이유 (선택적으로 사용 가능)
=> 장점 : 사용자들이 다운로드 받아야하는 JS 코드 양이 줄어듦
> 'use client'는 framework에게 해당 컴포넌트가 interative 하다는 것을 알려줌
=> use client는 client에서만 render 하는것 아님 (client에서도 render된다는 뜻임)
=> 모든 컴포넌트는 백엔드에서 먼저 render됨
(1) 백엔드에서 먼저 모든 것이 server side render로 pre render됨 (use client 명령어 상관 없이)
(2) 그리고 boring HTML -> interative HTML로 변환되어 사용자에게 넘어감
(3) 그 후에 'use client' client components만이 hydrate되고 interative하게 됨
: 어떤 컴포넌트가 hydrate되는지,( 어떤 것이 interactive를 필요로 하는지)
어떤 것이 JavaScript가 필요한지, 결정할 때 중요함
(4) 아래 코드는 server에서만 실행되니깐 ,
DB와 통신 가능, API key 사용해서 API fetch하기 가능
=> 이 코드는 client로 절대 가기 않기 때문에, 보안에 신경 안쓰기 가능
> server component 안에 client component를 갖기만 가능
(반대의 경우, 모든 children이 client component가 될 것임)
7. Layouts
> 순서:
layout 컴포넌트에 있는 export된 default 컴포넌트를 렌더링 함
next JS는 layout 컴포넌트 렌더링 함, URL 확인 => abou 컴포넌트를 렌더링 해야하는 것을 인식함
> route groups는 폴더 이름에 괄호로 묶어주기 (home) => url 생성 안함 => 자유롭게 사용 가능
8. Metadata
> 꼭 내보내야하는 object = metadata
> title, description 등
> 페이지 이동하는 곳마다 작성해서 사용 가능 (페이지나 레이아웃만 메타데이터 내보내기 가능)
> 템플릿으로 만들어서 사용 가능
> title에 객체로 만들어서 사용 가능 + default 값 꼭 넣어주기
> 타입스크립트, Metadata를 import 해서 사용하기 가능
> 메타데이터는 병합됨, 그래서 "Home"을 "%s"로 넣어줄 것
> 더 많은 방법은 공식문서 참고하기!
9. Dynamic Routes
> 대괄호를 넣어서 사용하기
> 클라이언트 컴포넌트가 아니기에 프론트에서 실행 x , 백엔드에서 렌더링 됨
> hydration x
> 터미널에서 확인 가능하고 props는 {params: {id:~~},searchParams:{~~~}}
: searchParams는 url에서 ?뒤에 나오는 데이터 (ex. movie/1213?region=kr} : 검색에 유용함
> 타입스크립트의 경우.
10. Conclusions
> 백엔드 서버에서, 클라이언트 컴포넌트 + 서버 컴포넌트 모두 렌더링 됨
> 클라이언트 컴포넌트만 프론트엔드에서 다시 렌더링 되거나 hydrate 됨
> 클라이언트의 자바스크립트는 사용자가 다운로드하 실행함
> 서버 컴포넌트는 딱 1번만 서버에 의해 실행되고, 유저는 boring HTML 얻게 됨
> 클라이언트 컴포넌트가 hydrate 되는데, hydrate = 상호작용 가능하게 된다
> 모든 이벤트 리스너가 추가되고, 클라이언트 컴포넌트에서만 실행됨
> 클라이언트 컴포넌트를 서버 컴포넌트 내에 포함 가능 ( 반대로는 불가능 )
> 클라이언트를 사용할 때,
state를 사용하거나, 디바이스API, 지리위치 필요할 때 사용하기
끝.
* 출처 : 노마드 코더
https://nomadcoders.co/nextjs-for-beginners/lectures/4700