Web

Next.js - Data Fetching ( getStaticProps, getStaticPaths )

getStaticProps 만약 우리가 'getStaticProps'라는 함수를 export했다면 Next.js는해당 페이지를 build-time에 pre-render할 것이다. getServerSideProps는 request시에라는 점에서 차이가 있다. 그래서 Next.js에서 SSG인 getStaticProps를 추천하는 이유도 여기에 있는 것 같다. - use의 request전에 build-time에 pre-rendering되어있으면 좋겠는 곳 - 데이터가 공공적으로 캐싱될 수 있는 곳 - SEO최적화가 필요하고 매우 빠르게 접속될 수 있는 곳, 그리고 CND에 의해 빠르게 캐싱될 수 있는 CDN의 작동 원리 1. 웹 브라우저가 ..

Next.js - Data Fetching ( getServerSideProps )

getServerSideProps getServerSideProps는 오직 server-side에서만 동작하며 browser에서는 동작하지 않습니다. 만약 페이지가 getServerSideProps를 사용하게 된다면 - 페이지에 직접 들어갔을 때, 페이지는 return된 props에 의해 pre-rendering된다. - 만약 'next/link'나 'next/router'와 같은 client-side page를 통해 들어가게 되었다면 Next server에 API요청을 보내서 실행한다 ( pre-rendering 진행) 여기서 중요한 것은 getServerSideProps는 'JSON'데이터를 반환하는데 이는 pre-rendering하는..

Next.js - Getting Started - 2

Static Generation without data 기본적으로 Next.js의 아무런 fetching이 필요없는 페이지는 Static Generation을 사용하는 pre-render기법을 사용합니다. 예시를 들면 function About() { return About } export default About; 이러한 경우에는 Next.js는 하나의 HTML파일을 빌드타임떄 생성합니다. Static Generation with data 어떠한 페이지는 당연히 pre-rendering되기 위해 외부의 fetching되는 데이터가 필요합니다. 이 경우에는 두가지 시나리오가 존재합니다. 이 중 하나 또는 둘다 적용될 수 있습니다. 그렇다면 다시 CNA프로젝트로 돌아가서 S..

Next.js - Getting Started - 1

Next.js React로 완전한 웹 애플리케이션을 처음부터 빌드하려면 고려해야 할 중요한 세부 사항이 많이 있습니다. 코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 트렌스파일러를 사용하여 변환되어야 합니다. code spliting과 같은 production최적화를 수행해야 합니다. 성능 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링할 수 있습니다. 서버 측 렌더링 또는 클라이언트 측 렌더링을 사용할 수도 있습니다. React앱을 데이터 저장소에 연결하기 위해 서버 측 코드를 작성해야 할 수도 있습니다. Next.js는 위의 문제에 대한 최고의 해답을 제공합니다. Next.js 시작 ( 공식문서 ) Pages Next.js 에서는 '.js', '.jsx', '.ts'..