nextjs CSR2 Data Fetching - getServerSideProps getServerSideProps 페이지에서 getServerSideProps를 사용하면 해당 함수에서 반환된 데이터를 이용해 페이지를 미리 렌더링한다. export async function getServerSideProps(context) { return { props: {}, } } getServerSideProps는 언제 실행될까? getServerSideProps는 브라우저에서 실행되지 않고 서버에서만 실행된다. 페이지에서 getServerSideProps를 사용하는 경우 해당 페이지를 직접 요청하면 getServerSideProps가 실행되고 반환된 데이터로 사전 렌더링된다. 브라우저에서 next/link 또는 next/router를 통해 해당 페이지로 페이지 전환을 하게되면 Next.js는 .. 2022. 12. 26. Pages Next.js는 pages 폴더 안에 있는 파일 이름을 기반으로 라우팅한다. pages 폴더 안에는 .js, .jsx, .ts, .tsx 파일이 들어갈 수 있으며, 각 파일에는 React Component가 들어간다. 만약 about.js라는 파일을 만들었다면 www.domain.com/about으로 접근할 수 있다. 동적 라우팅(Dynamic Routes) Next.js는 동적 라우팅을 지원하는데 pages/posts/[id].js처럼 대괄호를 추가해서 파일명을 작성하면 동적라우팅이 가능하다. www.domain.com/posts/1로 접근할 수 있다. 사전 렌더링(Pre-rendering) Next.js는 기본적으로 모든 페이지를 사전 렌더링한다. 사전 렌더링이란, 클라이언트(브라우저)측에서 자바스크.. 2022. 12. 23. 이전 1 다음 728x90