Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- interface
- 안드로이드빌드에러
- Next.js
- javascript
- array
- TS
- forwardref type
- 리액트네이티브아이콘
- async
- 상속
- react
- map
- err_connection_refused
- Filter
- materialicons
- reactnative error
- 배열중복요소제거
- generic
- extends
- mainapplication.kt
- reactnative
- 타입스크립트
- npm에러
- app.post
- app:compiledebugkotlin
- 슬라이딩윈도우
- set
- 스크롤이벤트
- Spring
- 이진탐색
Archives
- Today
- Total
rhanziy
Next.js - server/client component 본문
Next.js에서는 server component, client component 2가지 종류의 component가 있다!
리액트에서 하던 방식대로 component를 그냥 만들면 server component임.
component 만드는법
- function 작명() { }
- return ( html )
- < 작명 /> 으로 사용
export default function Cart() {
return (
<div>
<h4 className="title">Cart</h4>
<CartItem/>
</div>
)
}
function CartItem(){
return(
<div className="cart-item">
<p>상품명</p>
<p>$40</p>
<p>1개</p>
</div>
)
}
여기서는 CartItem이 server component 임.
server component?
- html 상에 자바스크립트 기능 넣기 불가능(ex. onClick)
- useState, useEffect 사용 불가능
- 로딩 속도가 빠름
원래 알던 방식이 서버컴포넌트인데,
파일 맨위에 'use client' 를 작성하면 client component가 된다.
'use client'
export default function Cart() {
return (
<div>
<h4 className="title">Cart</h4>
<CartItem/>
</div>
)
}
function CartItem(){
return(
<div className="cart-item">
<p>상품명</p>
<p>$40</p>
<p>1개</p>
</div>
)
}
client component?
- 자바스크립트 해석때문에 로딩속도 느림
- html 분석하는 작업때문에 로딩속도 느림( hydration )
👉 큰 페이지는 sever component, JS기능 필요한 곳만 client component를 사용하자.
'Next.js' 카테고리의 다른 글
Next.js - router.isReady (0) | 2024.04.11 |
---|---|
Next.js - mui Select, Chip 선택 개수 제한하기 (1) | 2024.01.05 |
Next.js - git clone 받고 프로젝트 셋팅(feat.nx) (0) | 2023.11.14 |
Next.js - 이미지 넣는 법 (0) | 2023.08.23 |
Next.js 개발환경 셋팅 (0) | 2023.08.23 |
Comments