react (3) 썸네일형 리스트형 [Nextjs] Pre-rendering 이 글은 nextjs 공식 문서 내용을 번역하고 모아둔 글 입니다. 기본적으로 Next.js는 모든 페이지를 사전 랜더링(Pre-Rendering)합니다. 이는 Next.js가 페이지마다 HTML을 미리 생성하고, 클라이언트 측 JavaScript로 모두 처리하지 않고 미리 생성하는 것을 의미합니다. 사전 랜더링은 성능과 SEO 향상에 도움이 될 수 있습니다. 생성된 각 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결됩니다. 페이지가 브라우저에 의해 로드되면 해당 페이지의 JavaScript 코드가 실행되어 페이지를 완전히 인터랙티브하게 만듭니다. (이 과정을 하이드레이션(hydration)이라고 합니다.) Check That Pre-rendering Is Happening 다음.. [Nextjs] Build Time vs Runtime Build Time 빌드 타임(Build time)은 애플리케이션 코드를 프로덕션 환경에 적합한 형태로 준비하는 일련의 단계를 가리키는 용어입니다. 애플리케이션을 빌드할 때, Next.js는 코드를 프로덕션에 최적화된 파일로 변환하여 서버에 배포하고 사용자가 사용할 수 있는 상태로 만듭니다. 이 파일에는 다음과 같은 내용이 포함됩니다: 정적으로 생성된 페이지를 위한 HTML 파일 서버에서 페이지를 렌더링하기 위한 JavaScript 코드 클라이언트에서 페이지를 인터랙티브하게 만들기 위한 JavaScript 코드 CSS 파일 Runtime 런타임(Runtime) 또는 요청 시간(Request time)은 애플리케이션이 빌드되고 배포된 후 사용자의 요청에 응답하여 실행되는 기간을 가리킵니다. 출처 Nextj.. [Nextjs] Nextjs 렌더링 렌더링이란 ? React로 작성한 코드를 UI의 HTML 표현으로 변환하는 작업을 말합니다. 이 과정을 랜더링(Rendering)이라고 합니다. 랜더링은 서버 또는 클라이언트에서 수행될 수 있으며, 빌드 시점에 사전에 실행될 수도 있고 런타임에 매번 요청마다 실행될 수도 있습니다. Next.js에서는 세 가지 유형의 랜더링 방법이 사용 가능합니다. 서버 사이드 랜더링(Server-Side Rendering), 정적 사이트 생성(Static Site Generation) 및 클라이언트 사이드 랜더링(Client-Side Rendering)입니다. Pre-rendering SSR 및 SSG는 Pre-Rendering이라고도 불립니다. 외부 데이터를 가져오고 React 구성 요소를 HTML로 변환하는 작업이 .. 이전 1 다음
