Next.js
-
useFormStatus()Next.js 2024. 4. 22. 14:46
useFormStatus() 이 hook은 자신의 부모 components를 보고, 가장 가까운 form을 찾으려고 한다. 그렇기 때문에 useFormStatus는 form이 작성된 components에서는 사용할 수 없다. 쉽게 말해 form 이 작성된 components가 아니라 useFormStatus hook을 사용할 자식 요소 안에서 사용해야 한다. 가장 가까운 부모 form을 찾아서 그 부모 form의 상태를 알려준다. form이 pending인지 아닌지 알려주므로 유용하다 (disabled에 pending 값을 넣음) //부모 component export default function Login() { return ( ); } //자식 component "use client"; import..
-
CSR, SSG, ISR, SSR 차이점 정리Next.js 2024. 1. 5. 12:17
Client Side Rendering 렌더링하는 주체자가 클라이언트(브라우저) 장점? 한번 로딩되면, 빠른 UX 제공 서버의 부하가 작음 문제점? 페이지 로딩 시간(TTV)이 길다 자바스크립트 활성화 필수임 SEO 최적화가 힘듬 보안에 취약함 CDN에 캐시가 안됨 *TTV(time to view) Static Site Generation 렌더링 하는 주체자가 서버, 언제 렌더링 하냐? 빌드할때 렌더링 장점? 페이지 로딩 시간(TTV: time to view)이 빠름 자바스크립트 필요 없음 SEO 최적화가 좋음 보안이 뛰어남 CDN에 캐시가 됨 문제점? 데이터가 정적임(데이터가 가변적으로 바뀌는 웹사이트라면 맞지 않다) 사용자별 정보 제공이 어려움 => 이런 문제점을 해결하기 위해 나온게 ISR, SSR..