👉  Page Router 의 장점파일 시스템 기반의 간편한 페이지 라우팅 제공다양한 방식의 사전 렌더링 제공정적 사이트 생성 (SSG) 최신데이터 X증분 정적 재생성 (ISR)유통기한 설정 가능 (최신데이터 반영)On Demand - Revalidate 요청 (즉각적으로 반영 가능) 👉  Page Router 의 단점다양한 방식의 사전 렌더링 제공 상호작용이 필요하지 않은 페이지도 JS Bundle 에 포함되어 불필요하게 번들 용량이 커진다.서버에서만 실행하면 되는 컴포넌트 (React Server Component)Hydration 시간이 길어짐 -> TTI 까지 걸리는 시간이 길어짐     출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%..

👉  Next.js 다양한 사전 렌더링서버사이드 렌더링 (SSR)가장 기본적인 사전 렌더링 방식요청이 들어올 때 마다 사전 렌더링을 진행함정적 사이트 생성(SSG)빌드 타임에 미리 페이지를 사전 렌더링 해 둠증분 정적 재생성 (ISR)향후에 다룰 사전 렌더링 방식  👉  SSR - 서버 사이드 렌더링 (요청이 들어올 때 마다 사전 렌더링을 진행)export const getServerSideProps = () => { // 컴포넌트보다 먼저 실행, 컴포넌트에 필요한 데이터 불러오는 함수 // 오직 서버측에서만 한 번 실행 const data = 'hello' return { //단 하나의 객체를 리턴, props 프로퍼티값을 넣어야함 props: { data, }, ..

👉  Page Router현재 많은 기업에서 사용되고 있는 안정적인 라우터React Router 처럼 페이지 라우팅 기능을 제공  👉  프리페칭(Pre-fetching) - 빠른 페이지 이동을 위해 제공되는 기능!이동할 가능성이 있는 페이지를 미리 불러오는 기능경로별로 컴포넌트들을 Spliting 해서 저장을 미리 해놓음 현재 페이지에만 필요한 JS Bundle만 전달 됨요청된 페이지의 JS Bundle 만 불러오기 때문에 Hydration 빠르게 가능 (용량 경량화)Pre Feching 으로 연결된 모든 페이지의 JS Bundle 파일을 미리 불러옴개발모드일 경우에는 Pre Feching이 적용되지 않음 Build 후 production 모드로 실행해줘야함Link Component로 이뤄지지 않은 ..

👉  Dynamic Routing여러개의 URL 파라미터를 넣을 때 [...id] Catch all segment파라미터가 없을 경우에 [[...id]] Optional catch all segment👉  Layout 동작 방식 Layout 안에 chlidren 으로 page 가 들어있음  Layout 이 위 아래로 있을 경우 중첩됨👉  Route Group (소괄호로 작성) 경로상에는 아무런 영향을 미치지 않음각기 다른 경로들을 하나의 페이지로 묶어둘 수 있음경로가 달라도 공통적인 layout을 적용하고 싶을 때👉  React Server Component (React 18v 부터, 새로운 유형의 서버측 컴포넌트 )Page Router 버전의 Next.js 에는 어떤 문제가 있었을까?정적 페이지..

👉  사전 렌더링 (Next.js 의 기본 동작 방식)브라우저 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식CIient Side Rendering의 단점을 효율적으로 해결하는 기술👉  CIient Side Rendering(CSR)React.js 앱의 기본적인 렌더링 방식클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식장점: 초기접속 이후의 페이지 이동이 매우 빠르고 쾌적단점: FCP(초기접속 속도)가 느려짐👉  Next.js에서는 CIient Side Rendering의 문제를 어떻게 해결할까? - 사전 렌더링서버에서 직접 JS를 실행 -> 렌더링이 완료된 HTML을 응답JS 실행 (렌더링)JS코드를 HTML코드로 변환하는 과정화면 렌더링HTML코드를 브라우저가 화면에 그려내는..

기능 구현의 주도권이 누구에게 있는가?👉  Library - 개발자기능 구현의 주도권을 개발자가 가짐ex) 페이지 라우팅 기능을 구현해야 함 -> React router, tanstack Router우리가 사용하고 싶은 도구를 마음대로 사용할 수 있음자유도가 높다. -> 기본 기능 외 제공 X👉  Framework  - 개발자 X 주도권을 Framework 가 가짐Framework에서 제공하는 기능을 사용하거나 허용하는 범위 내에서만 추가기능 사용 가능큰틀, 방법은 정해져 있음자유도가 낮다.거의 모든 기능을 제공Page RoutingSever Pre RenderingReact.js 의 확장판     출처: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%E..