Hong_DEVBOX

getServerSideProps gerServerSideProps 함수를 호출하게 되면 반환된 데이터를 사용하여 각 요청에 미리 페이지를 렌더링 하게 된다. export async function getServerSideProps(context{ return{ props:{} } } getServerSideProps는 언제 실행될까? gerServerSideProps는 오직 서버사이드에서만 실행되고 브라우저에서는 실행되지 않는다. 만약 페이지에 요청이 들어오면, getServerSideProps는 요청 시간에 실행되고 반환된 값으로 미리 렌더링을 한다. 만약 현재 페이지를 `next/link`나 `next/router`와 같은 클라이언트 사이드 페이지 이동을 통해 요청했을 경우 getStaticProp..

NextJS 2022. 7. 21. 10:47

getStaticPaths getStaticPaths 함수를 사용하게 되면 특정 경로에 따라 미리 정적 렌더링이 가능하다. export async function getStaticPaths(){ return{ paths: [ {params : {...}} ], fallback: true } } getStaticPaths는 정적으로 페이지를 생성하기 떄문에 앞선 포스트에서 언급했던 getStaticProps와 같이 사용할 수 있지만 getServerSideProps와는 같이 사용할 수 없다. 언제 getStaticPaths를 써야할까? 동적 라우트(dynamic routes)를 이용하여 미리 정적으로 페이지를 생성해야할 때 사용거나 다음의 경우에 사용한다. 데이터를 headless CMS에서 가져오는 경우..

NextJS 2022. 7. 20. 09:45

Data Fetching 이전 포스트에서 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-Side Renderin)을 알아보았다. 이번 포스트에서는 데이터를 가져오기 위해 Next.js에서 제공하는 세 가지 함수 및 client-side에서 어떻게 데이터를 가져오는지 알아보자. Next.js에서는 데이터를 가져오기위해 세 가지 함수가 사용된다: getStaticProps (Static Generation) : 프로젝트가 빌드될 때 데이터를 가져온다. getStaticPaths (Static Generation) : 데이터를 기반으로 동적 라우트를 지정한다. getServerSideProps (Server-Side Rendering) : 각 요청이 있을 때마다 데이터를 가져온..

NextJS 2021. 8. 27. 16:23

Pages Next.js에서 page 는 `.js`, `.jsx`, ' .ts'에서 내보내진 리액트 컴포넌트이다. 만약 `pages/about.js`와 같이 pages 디렉토리에 js 파일을 생성하게 되면 `/about` url 을 통해 접근이 가능하다. function About() { return About } export default About Pages with Dynamic Routes (동적 라우팅) Next.js는 동적 라우팅을 지원한다. 예를 들어 `pages/posts/[id].js` 와 같은 파일을 생성하게 되면 `posts/1`, `posts/2`와 같이 동적으로 접근이 가능하다. Two forms of pre-rendering Next.js는 정적 생성(Static Generati..

NextJS 2021. 8. 27. 12:23

Next.JS란? React를 위한 프레임워크로 weback과 같은 번들러, Babel과 같은 컴파일러를 사용하여 코드를 변환해주거나 코드 분할과 같은 프로덕션 최적화 및 성능, SEO(검색 최적화), SSR(서버사이드 렌더링)등을 수행한다. Next.JS 설치 Next.JS 설치에 앞서 VScode등 IDE 및 Node.js가 설치되어 있어야한다. npx create-next-app [프로젝트명] Node.js가 설치되어 있다면 콘솔창에 npx create-next-app이란 명령어를 통해 프로젝트를 자동으로 설치 할 수 있다. 필자는 npx create-next-app next-tutorial 로 프로젝트를 생성했다. 명령어를 입력하게되면 react, react-dom, next등 기본적으로 의존성이..

NextJS 2021. 8. 19. 16:30