넥스트JS
1.Next.js의 철학
React가 UI 라이브러리라면, Next.js는 React 애플리케이션을 위한 프레임워크다.즉, React를 기반으로 실제 서비스 수준의 웹앱을 만들 수 있도록 기능을 갖춘 도구집합이라고 보면 된다.React는 UI 구성에 집중된 라이브러리라면,Next.js는 그 위
2.Next.js와 React 선택 기준 정리
기술 선택은 단순히 인기 때문이 아니라 프로젝트 목표와 요구 사항에 가장 적합한 기술을 선택하는 것이 중요하다. 아래는 Next.js와 Vite의 주요 특징 및 선택 기준이다.주요 특징:서버 사이드 렌더링(SSR): 초기 페이지 로딩 속도 개선 및 SEO 최적화.정적
3.백엔드 서버와 프론트엔드 서버
백엔드 서버: 데이터를 저장하고 처리하며, API 요청에 응답하는 역할을 하는 서버이다. 예를 들어, 데이터베이스에서 정보를 가져오거나, 인증을 처리하는 서버를 말한다.예: Node.js로 작성한 API 서버, Django, Spring 서버 등프론트엔드 서버: 사용자
4.라우터 핸들러와 서버 액션
Server Component는 Client Component를 포함할 수 있다.Client Component는 직접적으로 Server Component를 포함할 수 없다.하지만, Server Action은 Client Component 안에서 호출할 수 있다."use
5.서버컴포넌트에서의 브라우저 전용 객체의 사용 제한
넥스트.js에서 서버 사이드 렌더링(SSR) 페이지나 정적으로 생성된 페이지는 Node.js 환경에서 실행된다. 이로 인해 fetch, window, document와 같은 웹 브라우저 전용 전역 객체나 canvas 같은 HTML 요소에는 접근할 수 없다. 그러나 서버
6.Next.js 15의 렌더링 방식 및 적용법
설명: 빌드 시 HTML을 미리 생성하여 정적 파일로 제공 사용법: export const generateStaticParams, generateMetadata, fetch cache: 'force-cache'대표 예시:특징:페이지는 빌드 시 생성됨빠른 응답 속도자주
7.넥스트JS의 서버 캐싱 3종 비교: cache, unstable_cache, unstable_noStore
cache()목적: 리액트 서버 렌더링 중 중복 호출을 막기 위한 메모이제이션사용위치: 리액트 서버 컴포넌트unstable_cache()목적: 넥스트js 서버 캐시 + 태그/경로 무효화가 가능한 고급 캐싱 도구사용위치: RSC, Route Handler, Server
8.Next.js 16, Cache Component를 이해해보자
Next.js 16에서 가장 크게 체감한 변화는 이것이다.React CompilerPPR (Partial Prerendering)Cache Component의 정식 지원그중에서도 직접 코드를 짜보면서 가장 인상 깊었던 건 Cache Component였다.처음에는 이렇게