[NextJS] 서버 컴포넌트, 클라이언트 컴포넌트, SSR 차이점
·
🍞 Front-End/Next.js
NextJS에서는 13 버전이 업데이트되면서부터 모든 컴포넌트가 기본적으로 서버 컴포넌트다.서버 컴포넌트와 클라이언트 컴포넌트가 있으며, 이를 잘 이해하고 사용하고 것이 중요할 것 같아 정리하게 되었다. 웹 애플리케이션을 렌더링할 수 있는 환경은 클라리언트와 서버가 있다.   서버 컴포넌트 -> 클라이언트 컴포넌트서버 컴포넌트는 서버에서 실행되는 React 컴포넌트라고 볼 수 있다.  NextJS에서는 기본적으로 컴포넌트를 만들 때 서버 컴포넌트로 동작된다. 도입부에 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 설명한 공식문서에서 확인할 수 있듯, 서버 컴포넌트에서는 react lifeCycle을 가능하게 하는 useState, useEffect 같은 함수를 사용하지 못한다. 그렇기 때문에 클라이언트 컴..
[NextJS] 노마드 코더 <NextJS 시작하기> 정리
·
🍞 Front-End/Next.js
1. 라이브러리와 프레임워크 차이점 - 라이브러리 우리가 갖다쓰는 것 (Ex React: 렌더링할때 ReactDOM.render() 불러오기) 사용자가 파일 이름이나 구조 등을 정하고 모든 결정을 내림 - 프레임워크 정해진 틀 안에서 커스터마이징 (Ex NextJS: 정해진 규칙에 따라 코드를 작성하면 렌더링) 는 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 2. 404 에러 페이지를 직접 만들지 않아도, 구현 가능 3. CSR와 SSR 차이 앱에 있는 페이지들이 미리 렌더링됨. 정적으로 생성된다. CRA는 CSR 클라이언트 사이드 렌더링 브라우저가 자바스크립트를 가져와 유저가 보는 UI를 만드는 모든 것을 한다. 유저가 흰화면을 보고 있을 땐, 브라우저가 자바스크립트를 요청하고 있다. 브라..