-
[Next 13] next.js 입문하기Next.js 2023. 12. 4. 14:45
Client-Side Rendering
- 브라우저에서 html을 실시간으로 만듦
- 부드러운 페이지 전환
- 검색 노출 어려움
- 첫 페이지 로딩 속도 저하
- react, vue ...
Server-Side Rendering
- 서버에서 html을 미리 만들어 보내줌
- 가벼움
- 페이지 로딩 속도 빠름
- 원하는 곳에서는 CSR 가능
- next, nuxt, sveltekit, remix ...
대표적인 SSR React Framework인 Next.js를 알아보자.
1. 설치
npx create-next-app@lastest2. 파일 및 폴더 구조
경로의 각 폴더는 경로 세그먼트를 나타낸다.
next.js page.js
- 메인페이지
- 옆, 상위에 있는 모든 layout.js 합쳐서 보여줌
layout.js
- page.js를 감싸는 파일
- 모든 페이지에 보일 요소를 작성
- 페이지 바깥에 적을 내용이 있을 시
- <head>
- 상단 메뉴 등...
Next.js는 중첩된 경로에서 특정 동작으로 UI를 생성하기 위한 특수 파일 세트를 제공한다.
.js .jsx .tsx 파일 확장자를 사용할 수 있다. 3. Route
- 폴더 기반 라우팅
- 폴더 안에 page.js 생성
- 레이아웃 생성
- app 폴더 안에 url과 동일한 이름의 폴더 생성
4. 컴포넌트
출처 : 생활코딩 
- server component
- html에 자바스크립트 기능넣기 불가능
- hook 사용 불가
- 로딩속도 빠름
- 검색엔진 노출 유리
- 큰 페이지 만들 때 사용 (단순히 보여주는 역할)
- client component
- 파일 맨 위에 'use client' 삽입
- 로딩 속도 느림
- 자바스크립트 기능
- hydration 필요 (*hydration : html 유저에게 보낸 후에 JS로 html 다시 읽고 분석하는 일)
- 자바스크립트 기능이 필요한 곳에만 사용 (사용자와 상호작용하는 기능)