yoon-arc의 코딩 일지

이번 포스팅에서는 Next.js에서의 서버 컴포넌트와 클라이언트 컴포넌트에 대해 알아보도록 하겠습니다.이 두 개념은 Next.js에서 매우 매우 중요한 요소이며, 본격적으로 다루기 전  SSR과 CSR에 대한 기본적인 이해가 필요합니다.(이에 대해 정리한 포스팅이 있으니 개념이 헷갈리실 경우 이 링크를 참고하시면 되겠습니다)   Next.js는 SSR을 기본으로 하지만, CSR도 부분적으로 사용할 수 있어 두 방식의 장점을 모두 갖춘 효율적인 프레임워크입니다.서버 컴포넌트는 SSR을 통해, 클라이언트 컴포넌트는 CSR을 통해 렌더링 됩니다. 📌  서버 컴포넌트(Server Component)(공식 문서는 이 링크를 참고해 주세요)   Next.js의 모든 컴포넌트는 기본적으로 서버 컴포넌트입니다. 서..

이번 포스팅에서는 Next.js 개발 환경 세팅을 위한 절차를 소개하도록 하겠습니다. 순서는 다음과 같습니다.1. Node.js 설치2. Node.js, npm 설치 확인3. Next.js 설치 및 설정4. 프로젝트 실행5. 샘플앱 코드 정리하기6. .next 폴더  1. node.js 설치Node.js는 자바스크립드를 서버 측에서 실행할 수 있게 해주는 자바스크립트 런타임 환경이며, npm은 Node.js의 패키지 매니저입니다. 이 둘은 React와 Next.js를 사용하는 데 필수적인 도구이기 때문에먼저 설치를 해주셔야됩니다. https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on..

목차 (눌러서 이동 가능) 📌 SSR (Server Side Rendering): 서버에서 HTML 렌더링 후 클라이언트로 전송 ⚙️ SSR의 동작 순서 ⭐ SSR의 장점 🔧 SSR의 단점 📌 CSR (Client Side Rendering): 클라이언트(브라우저)에서 렌더링 ⚙️ CSR의 동작 순서 ⭐ CSR의 장점 🔧 CSR의 단점 📌 SSR, CSR 어느 쪽이 더 좋다? 📌 SPA(Single Page Application)와 MPA(Multi Page Application) ..