1. app 폴더 구조 #A. 기본 폴더 구조Next에서는 /app 폴더 내부에 각각의 경로 세그먼트(route segment)에 해당하는 폴더를 만듦으로써 라우팅이 가능하다. 예를 들어, /app/dashboard/page.js 컴포넌트는 www.mypage.com/dashboard 페이지로 연결된다. 이러한 방식으로 중첩 라우팅이 가능한데, /app/dashboard/setting/page.js 컴포넌트는 www.mypage.com/dashboard/setting 페이지에 해당한다. B. 파일 컨벤션 #① page.js: 해당 경로에 보여줄 UI 컴포넌트② route.js: ③ layout.js: 현재 경로 세그먼트와 자식 세그먼트의 레이아웃을 위한 UI 컴포넌트④ loading.js: 로딩 상태를..
1. Next.js에서의 Data Fetching React에서는 웹페이지를 구성하는 방식이 CSR(Client-Side Rendering)뿐이지만, Next에서는 CSR 외에도, SSG(Static-Site Generation), SSR(Sever-Side Rendering), ISR(Incremental Static Regeneration) 방식이 존재함. 1. CSR: 페이지 컴포넌트 내부의 useEffect()에서 처리 2. SSG: getStaticPaths()와 getStaticProps()에서 처리 3. SSR: getServerSideProps()에서 처리 4. ISR: getStaticProps()에서 revalidate 값을 반환 2. getStaticPaths # 다이내믹 라우팅(Dy..
React만 사용해 웹페이지를 구성하면 서버에서 HTML, CSS, JS 파일을 다운로드받아 JavaScript를 실행해 페이지 내부 데이터를 채워넣는 CSR(Client-Side Redering) 방식으로 작동함. 하지만, Next.js에서는 기본적으로 웹페이지를 서버에서 미리 작성(pre-render)하고 클라이언트에 보내주는 방식으로 작동함. 클라이언트에서 어느 정도 완성된 웹페이지와 JS를 다운로드받고 JavaScript가 실행되어 사용자가 상호작용할 수 있는 상태가 되면 웹페이지 구성이 완료되는데 이 과정을 Hydration이라고 함. 1. Next.js에서 Pre-rendering의 형태 A. SSG(Static-Site Generation) 웹페이지를 빌드 때 미리 생성해두고, 사용자가 해당..
JavaScript/Next.js 2024. 12. 28. 18:16
1. app 폴더 구조 #A. 기본 폴더 구조Next에서는 /app 폴더 내부에 각각의 경로 세그먼트(route segment)에 해당하는 폴더를 만듦으로써 라우팅이 가능하다. 예를 들어, /app/dashboard/page.js 컴포넌트는 www.mypage.com/dashboard 페이지로 연결된다. 이러한 방식으로 중첩 라우팅이 가능한데, /app/dashboard/setting/page.js 컴포넌트는 www.mypage.com/dashboard/setting 페이지에 해당한다. B. 파일 컨벤션 #① page.js: 해당 경로에 보여줄 UI 컴포넌트② route.js: ③ layout.js: 현재 경로 세그먼트와 자식 세그먼트의 레이아웃을 위한 UI 컴포넌트④ loading.js: 로딩 상태를..
JavaScript/Next.js 2022. 12. 21. 18:35
1. Next.js에서의 Data Fetching React에서는 웹페이지를 구성하는 방식이 CSR(Client-Side Rendering)뿐이지만, Next에서는 CSR 외에도, SSG(Static-Site Generation), SSR(Sever-Side Rendering), ISR(Incremental Static Regeneration) 방식이 존재함. 1. CSR: 페이지 컴포넌트 내부의 useEffect()에서 처리 2. SSG: getStaticPaths()와 getStaticProps()에서 처리 3. SSR: getServerSideProps()에서 처리 4. ISR: getStaticProps()에서 revalidate 값을 반환 2. getStaticPaths # 다이내믹 라우팅(Dy..
JavaScript/Next.js 2022. 11. 29. 17:20
React만 사용해 웹페이지를 구성하면 서버에서 HTML, CSS, JS 파일을 다운로드받아 JavaScript를 실행해 페이지 내부 데이터를 채워넣는 CSR(Client-Side Redering) 방식으로 작동함. 하지만, Next.js에서는 기본적으로 웹페이지를 서버에서 미리 작성(pre-render)하고 클라이언트에 보내주는 방식으로 작동함. 클라이언트에서 어느 정도 완성된 웹페이지와 JS를 다운로드받고 JavaScript가 실행되어 사용자가 상호작용할 수 있는 상태가 되면 웹페이지 구성이 완료되는데 이 과정을 Hydration이라고 함. 1. Next.js에서 Pre-rendering의 형태 A. SSG(Static-Site Generation) 웹페이지를 빌드 때 미리 생성해두고, 사용자가 해당..