Web/NextJs

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'..

Next.js ( CSR && SSR )

오늘날 웹 어플리케이션 개발을 한다고 하면 대부분 리액트 앵귤러 뷰와 같은 자바스크립트 기반 프레임워크를 통해서 개발을 하게 됩니다. MPA란 다양한 페이지를 만들어 매 요청마다 새로운 페이지를 요청해서 화면에 렌더링 해주는 전통적인 웹 방식이다 MPA의 단점 하지만 매번 새로운 HTML을 서버로부터 받아오고 전환 시마다 화면 깜빡임이 있다는 단점이 있습니다. 그 후로 AJAX라는 것이 나타나면서 동적으로 서버에서 원하는 정보를 받아와서 화면 깜빡임도 없는 SPA를 사용하게 되었습니다. CSR && SSR SPA는 웹 애플리케이션에 필요로 한 정적 리소스를 초반 한번에 모두 다운로드 하고 그 후 페이지 갱신이 필요로 할 때 필요로 한 데이터만 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 ..