-
https://next-netflix-wine.vercel.app/
Next JS 란 .. ?
1. 파일 시스템 기반 라우터
React에서 라우터 → React-Router 라이브러리 사용
Next JS에서 라우터 → 파일 구조 기반
2. 서버 사이드 렌더링 (SSR), 정적 사이트 생성 (SSG) 지원
SEO 최적화
SSG ..?
빌드시 pre-rendering: 모든 페이지를 생성해둔다 (정적인 HTML) → 페이지 요청 → 만들어져있는 HTML 파일을 즉시 반환
* 장점
초기 로딩 매우 빠르다
그럼 SSG 사용하지 왜 SSR 사용하는걸까?
SSG는 빌드시에 정적으로 HTML을 만들어 놓는 만큼, “최신” 즉 “실시간” 데이터를 반영하지 못한다. 따라서 변경 가능성이 거의 없는 경우 SSG를 사용해야 하는 것!
SEO 유리
* 단점
콘텐츠 업데이트를 위해서는 사이트를 다시 빌드해야 한다.
* 언제 사용할까?
내용이 거의 변하지 않는 즉, 정적인 웹사이트의 경우!
ex) 블로그, 정보성 페이지 등 정적인 데이터를 보여주는 사이트3. 기타
Image, Fonts 등 최적화
TypeScript에 대한 지원 향상
정적 및 동적 메타데이터
---
** 자동 코드 스플리팅 : Each file inside your pages/ directory will be code split into its own JavaScript bundle during the build process.
Next의 자동 코드 분할은 페이지별로 필요한 컴포넌트와 모듈을 동적으로 분할하여 각 페이지에 필요한 최소한의 코드만 전달한다.
React는 Next와는 달리 애플리케이션을 새로고침 하고, 변경된 부분만 업데이트 하여 브라우저에 반영하는 것이다.
HTR은 전체 페이지를 새로고침 하지 않고도, 수정된 모듈만 교체하여 렌더링 하기 때문에 어플리케이션의 로딩시간을 더욱 단축 시킨다.
React 공식 문서는 Route-based code splitting를 추천하는데,
사용자의 경험을 해치지 않는 선에서 적당한 코드 분할을 권장. 컴포넌트마다 코드 분할을 적용하는 것이 아니라 Route 기반의 코드가 코드 분할을 설정하기 좋은 장소라고 설명한다
https://ko.legacy.reactjs.org/docs/code-splitting.html#code-splittingRouting
1. 파일 시스템 기반 라우터
React에서 라우터 → React-Router 라이브러리 사용
Next JS에서 라우터 → 파일 구조 기반
🍒 폴더 구조 === 라우터 구조
최상위 디렉토리의 이름은 반드시 **app** 이어야 한다.
**page.js 파일**이 있는 route만 접근 가능하다.
Layouts
1. layout.js
→ 그 하위 라우터들에게 모두 적용된다.
→ 레이아웃은 중첩이 된다.
⇒ 상위 레이아웃이 하위 레이아웃을 children props로 받음
import DashboardNav from '@/components/DashboardNav'; export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return ( <section> <DashboardNav/> {children} </section> ) }2. app/layout.js
→ Root Layout (필수)
→ 모든 route에 공통 적용되는 layout
html body 태그를 반드시 포함해야 한다.
<head> <title> → 내장되어 있는 SEO 함수를 사용해 정적 또는 동적 메타데이터 생성
⇒ 반드시 server component 이어야 한다
Rendering
1. server component
React Server Component : 오직 서버에서만 실행되는 컴포넌트
서버에서 한 번 렌더링 된 후 클라이언트로 전송되어 정적으로 고정
결국 정적으로 클라이언트에 내려지는 컴포넌트다 보니 변경 가능한 값인 state 및 리렌더링과 관련된 이펙트는 사용이 불가하다!
그래서 React에서 나온 서버 컴포넌트 그거 어떻게 사용할 수 있는데?
- Next.js App Router 유일2. client component
React Client Component : 서버, 클라이언트 양측 모두에서 렌더링 되는 컴포넌트
use client
🗣️ 클라이언트에서 다시 렌더링할 수 있도록 JS 번들에 포함해줘 !
3. 사용하기
다음과 같이 클라이언트 단에서 인터렉티브한 기능이 필요한 경우는 클라이언트 컴포넌트를 사용해야 한다고 생각하면 된다!
state(상태)나 effect(이펙트)를 사용하는 컴포넌트 ( useState() useReducer() useEffect() .. )
DOM API, 브라우저 API 사용
이벤트 리스너 사용
커스텀 훅 사용---
클라이언트 컴포넌트는 서버 컴포넌트를 포함(import)할 수 없다 ❗
상태 사용하는 순간 그 아래로 싹 다 클라이언트 컴포넌트로 만들라고?? 👉 children 사용하기
'use client'; import { DARK_COLORS, LIGHT_COLORS } from '@/constant.js'; function ColorProvider({ children }) { const [colorTheme, setColorTheme] = useState('light'); const colorVariables = colorTheme === 'light' ? LIGHT_COLORS : DARK_COLORS; return ( <body style={colorVariables}> {children} </body> ); }import Header from './Header'; import MainContent from './MainContent'; import ColorProvider from './ColorProvider'; function Homepage() { return ( <ColorProvider> <Header /> <MainContent /> </ColorProvider> ); }4. 데이터 패칭하기
Server Component
- Component 에 async / await 사용하기
- 함수 컴포넌트에 async 붙이기
- 컴포넌트 안에서 await 사용해서 data fetching
export default async function Page() { const data = await getData() return <main></main> }Client Component
- Route Handler 사용하기
- server에서 실행 후 client에 데이터를 반환해준다.
- 예민한 정보를 브라우저에 노출시키고싶지 않을 때 사용 가능 (ex. API token) ****
- SWR or React Query 와 같은 라이브러리 사용하기
Optmizing
1. Image 태그
width height : Cumulative Layout Shift 를 막기 위해 사용
- 외부에서 이미지를 로드해오는 경우만 명시해주면 된다.
- 로컬 이미지 같은 경우 자동으로 계산해주기 때문!
blurDataURL : placeholder image
- placeholder="blur"와 함께 사용해야 한다.
- base64-encoded image이어야 한다.
- 10px 보다 작은 이미지를 추천한다.
- priority : LCP 요소가 될 이미지에 명시해 우선순위를 주는 속성
import Image from 'next/image' import profilePic from './me.png' export default function Page() { return ( <Image src={profilePic} alt="Picture of the author" // width={500} // height={500} // blurDataURL="data:..." // placeholder="blur" // Optional blur-up while loading /> ) }'Library > Next JS' 카테고리의 다른 글
Next JS . 초기세팅 (0) 2024.05.12 Next JS . 레퍼런스 (0) 2024.05.06 댓글
- Component 에 async / await 사용하기
