SSR

Next.js 프레임워크는 Data Fetching 시에 SSR(Server-side Rendering), SSG(Static-site Generation), 그리고 Dynamic Routing 등의 세 가지 방법을 제공한다. 각각의 방법에 대해서 하나씩 깊게 알아보고 언제 어떻게 써야 하는지 사용법을 공부해 보고자 한다. SSR(Server-side Rendering) 만약 어떤 페이지에서 getServerSideProps 함수를 호출하면, Next.js는 getServerSideProps에서 데이터를 반환받을 때 마다 이 페이지를 pre-rendering 할 것 이다. export async function getServerSideProps(context) { return { props: {}, //..

이번 포스팅에서는 최근에 페이스북에서 발표한 React 18 알파 버전에 대해서 바뀐 점들을 분석해보고 리액트 팀이 어느 방향으로 리액트를 만들어 나가는지 동향을 분석해 보려고 한다. 2021년 6월 8일 리액트 팀은 리액트 18 버전의 주요 변경 사항들을 발표했다. 리액트 18을 다음 메이저 버전으로 가져갈 것이며 리액트 커뮤니티에서의 다양한 의견들을 수용하여 리액트 18의 주요 기능들로 가져간다고 한다. 그리고 여러 사람들로부터 피드백을 듣기 위해 리액트 18 알파 버전을 발표했다. 리액트 18은 다음과 같은 개선사항들이 포함될 예정이다. 즉시 사용 가능한 개선(out-of-the-box improvement) automatic batching (적은 렌더링을 위함) suspense를 위한 SSR 지..

이번 포스팅에서는 Next.js에서 지원하는 동적 라우트(Dynamic Route)에 대한 개념을 살펴보고 간단한 예제로 실습까지 해보는 시간을 가지려고 한다. 참고로 튜토리얼은 Next.js 공식 홈페이지에서 제공하는 자료 및 소스코드를 가지고 진행하였다. 예제는 간단한 블로그를 만드는 프로젝트이다. 블로그의 페이지 컨텐츠는 외부 데이터에 의존하는데, getStaticProps 함수를 통해서 데이터를 패치하고 렌더링한다. 이번에는 각각의 블로그 포스팅 페이지 경로가 외부 데이터에 의존하는 부분에 대해서 다뤄보려고 한다. Next.js에서는 경로를 바탕으로 정적으로 페이지를 생성할 수 있는 기능을 제공한다. 이 기능이 Next.js에서 동적 url을 가능하게 한다. 동적 라우트를 생성한다는 말은 만약에 ..

지난 포스팅에 이어서 Next.js 튜토리얼 글을 이어서 작성해 보고자 한다. 시작하기에 앞서 이제부터 타입스크립트를 사용할 계획이라 TS 설치를 먼저 진행한다. $ npm i typescript @types/react @types/node --save-dev // node_modules 폴더를 지우고 $ npm i $ npm run build & npm run dev 그러면 프로젝트 root 디렉토리 위치에 다음 파일들이 자동으로 생성이 될 것이다. next-env.d.ts tsconfig.json 그리고 기존의 어플리케이션도 jsx 파일을 tsx로 바꾸어 주면 정상적으로 실행이 된다. 오늘 해볼 작업들은 다음과 같다. Link를 통해 페이지를 이동 getStaticProps()를 통한 동적 데이터 추..

MPA (Multiple Page Application) 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다. 사용자가 아주 사소한 요청을 해주어도(버튼 클릭 등) 매번 전체 페이지를 렌더링 해주어야 한다. 장점 SEO(Search Engine Optimization, 검색엔진 최적화) 관점에서 유리하다. MPA는 완성된 형태의 HTML 파일을 서버에서 전달받기에 검색엔진이 페이지를 크롤링하기에 적합하다. 단점 매번 페이지 전체를 새로 불러와서 렌더링 해야 하기 때문에 화면이 깜빡이는 등 성능상의 이슈가 있다. 프론트와 백이 밀접하게 연관되어 있어서 개발 복잡도가 증가한다. SPA (Single Page Application)..