Front-End/Next

[Next.js] Pre-Rendering

Pre-Rendering에 들어가기 전, SPA의 특성을 먼저 생각해보자. SPA (Single Page Application)은 처음이 느리고 그 다음부터 빠르다. SPA에서는 사용자가 실제 컨텐츠를 보려면 서버로 요청을 한 뒤에 HTML, JS, ASSETS 파일을 다 다운 받기 전 까지 대기해야한다. 그리고 다 다운받고 난 뒤 JavaScript를 이용해서 매 화면의 컨텐츠를 동적으로 바꾼다. 이러한 것들이 SPA를 느리게 하는 이유가 되는데, 이런 문제를 해결하기 위해서는 SSR위에 HTML 파일을 반환해줄 서버를 둬야한다. Next.js에서는 이런 문제를 Pre-Rendering으로 SSR보다 복잡하지 않은 비용으로 해결할 수 있다. Next.js의 Pre-Rendering React는 CSR로..

[NextJS] Hydrate?

Next.js 프레임워크의 동작원리를 알고있다면 Hydrate에 대해서는 이미 익숙하게 들었을 거다. 하지만, 놓치기도 쉬운 개념인 만큼, 이번에 제대로 공부하고 정리 해보려고 한다. 일단 React에서 렌더링 되는 과정과 Next에서 렌더링 되는 과정의 차이점에 대해서 정리 해 보자. React.js HTML과 JS파일을 한꺼번에 보내고 클라이언트에서 JS 코드를 통해 웹 화면을 렌더링한다. React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있기 때문에 실제 HTML 코드는 안에 내용이 하나도 없는 상태이다. (CSR이 SEO에 적합하지 않은 원리) // public/index.html 단순 뼈대만 있는 HTML document와 Js 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트 ..

Next.js를 사용하는 이유

Framework vs Library React는 라이브러리이고, Next는 React의 프레임워크이다. 이 둘의 궁극적인 차이점은 “응용 프로그램의 흐름 주도권을 누가 가지고 있느냐" 이다. 여기서 프레임워크란? 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격 즉, 뼈대를 의미한다. 사용자는 코드를 작성하여 애플리케이션을 개발한다. 여기서 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분을 프레임워크가 관리한다. 라이브러리란? 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉, 특정 기능을 모아둔 코드 혹은 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다. Next.js SSR을 쉽게 구현하도록 도와주는 프레임워크 Next...