nextjs 13 App router3 [next] Data 요청, Next fetch API Next 13 Data fetchingnext에서 외부의 데이터를 가져오는 방법은 크게 두 가지로 나뉩니다.클라이언트에서 fetching서버에서 fetching 1. 클라이언트에서 fetchingClient component에서는 아래와 같은 방식으로 데이터를 가져올 수 있습니다.useEffect를 활용한 브라우저 fetch 혹은 axios 패키지 사용vercel의 swr 패키지react-query 패키지 Client component에서 가져온 데이터는 서버로부터 응답받은 초기 HTML에 포함되지 않기 때문에 SSR에 해당되지 않습니다. next에서 클라이언트 사이드의 fetching은 주로 다음과 같은 상황에서 필요합니다.초기 렌더링 이후 추가 Data가 필요할 때.. 2023. 11. 1. [next] Routing Conventions Next 13 App router - Routing Conventions nextjs는 file system based 라우팅 방식입니다. 즉, 프로젝트의 폴더와 파일 구조에 따라서 라우팅 경로가 결정됩니다. 예시 위와 같은 프로젝트 구조라면 localhost:3000에서 실행했을 때 다음과 같이 라우팅 됩니다. localhost:3000 app 폴더의 layout, page 실행 localhost:3000/product app/product 폴더의 (layout), page 실행 localhost:3000/user app/user 폴더의 (layout), page 실행 참고로 이미지에 있는 favicon.ico, globals.css와 같이 위의 Routing conventions에 없는 파일은 경로로.. 2023. 10. 29. [next] App router Nextjs 13 App router1. App router에 대해 정리하기 전에 next부터 정리1) next 등장배경컴포넌트 단위의 개발인 react는 높은 확장성과 유연함을 가지고 있습니다. next는 react의 장점을 유지하는 동시에 SSR(Server Side Rendering)을 수행하기 위해 등장합니다. SSR 이란?브라우저가 서버에서 생성된 HTML을 응답받아서 출력해 주는 방식입니다. 서버에서 HTML을 생성하므로 Server side Rendering, 서버 사이드 렌더링이라고 표현합니다. 이와 대비되는 방식으로는 브라우저가 서버로부터 javascript 코드를 응답받고, 이를 사용하여 HTML을 직접 렌더링 하는 CSR(Client side Rendering), 클.. 2023. 10. 29. 이전 1 다음
