이번 nextjs의 기초와 관련된 포스팅은 next.js 공식문서를 기반으로 작성되었습니다.
Next.js를 들어가기 전
HTML, CSS, JS를 넘어 리액트와 타입스크립트까지.
나는 1년이 넘는 시간동안 리액트를 사용했었고, 반년 전부터 현재까지 타입스크립트를 도입하면서 타입스크립트 & 리액트를 사용해왔다.
리액트는 SPA라는 신기한 앱을 만드는데 특화되어있었고, 실제로 현재까지도 여전히 인기있는 프레임워크 중 하나이다.
리액트는 CSR(Client Side Rendering)이라는 방식을 사용해 개발자가 작성한 코드의 렌더링이 서버가 아닌 클라이언트(사용자)의 환경에서 렌더링 되도록 하였다.
실제로 리액트는 매우 유용하다.
JSX라는 문법을 통해 자바스크립트코드와 HTML을 한 파일안에서 작성할 수 있었고(기본 .html파일에서도 script라는 태그를 사용해 작성할 수 있다.) css-in-js를 사용하면 html,css,js를 파일 안에서 작성할 수 있다.
또한 파일을 기능단위, 또는 view의 박스 단위로 쪼개고 쪼개 파일을 컴포넌트라는 단위로 세분화 할 수 있었고, 페이지 전환 시 매우 부드러운 애니메이션을 보여주기도 한다.
그 외에 뛰어난 장점이 있지만 그에 못지않은 단점 또한 존재한다.
우선 코드의 렌더가 사용자 환경에서 진행되는 만큼, 첫 로딩이 매우 길다. 모든 코드를 사용자가 웹앱 또는 웹 사이트에 접속했을 때 렌더링이 되므로 처음 접속한 순간만큼은 무척이나 길다.
또한 라우팅 기능을 지원하지 않아 react-router-dom이라는 lib를 따로 설치해야하고, 컴포넌트를 재사용할 수 있는 만큼 개발자의 역랴에 다라 보일러플레이트가 빈번히 발생할 수 있다.
게다가 무척이나 치명적인 단점을 하나 뽑자면(내 생각으로는) 아마 SEO가 아닐까 싶다.
웹사이트를 크롤링하는 검색엔진은 미리 준비된 HTML코드를 살펴보며 그에 맞은 사이트의 주소를 사용자에게 제공하는데, 모든 코드가 사용자 환경에서 렌더되는 React는 SEO에 가장 치명적일 수 밖에 없다.
나 또한 리액트로 개발을 진행하며 CSR의 SEO의 한계를 느끼고 SSR이라는(사실 SSR은 Next.js가 등장하기 전부터 우리가 평소 사용했던 렌더링 방식이다)렌더링을 통해 사용자기준 최적화를 실행하고, SEO를 향상시키고 싶었기에 Nex.js에 문을 연 것이다.
How this applies to Next.js
Nex.js는 애플리케이션의 개발 및 생산 단계 모두를 위한 기능을 제공합니다.
예를들어, Typescript의 내장, ESLint, 빠른 새로고침이 있습니다.
What is Compiling?
개발자는 JSX, Typescript, Js등 개발자에게 친숙한 언어로 코드를 작성합니다. 이러한 언어는 개발자의 효율성과 자신감을 향상시키지만, 브라우저가 이를 이해할 수 있으려면 먼저 Javascript로 컴파일 해야합니다.
컴파일이란 한 언어로 된 코드를 가져와 다른 언어 또는 해당 언어의 다른 버전으로 출력하는 프로세스를 의미합니다.
What is Minifying?
개발자는 사람이 쉽게 읽을 수 있도록 최적화된 코드를 작성합니다. 이 코드에는 주석, 공백, 들여쓰기, 여러 줄 등 코드 실행에 필요하지 않은 추가 정보가 포함될 수 있습니다.
개발자는 애플리케이션을 더 큰 규모의 애플리케이션을 구축하는 데 사용할 수 있는 모듈, 구성 요소 및 기능으로 애플리케이션을 나눕니다. 이러한 내부 모듈과 외부 타사 패키지를 내보내고 가져오면 복잡한 파일 종속성 웹이 생성됩니다.
Build Time and Runtime
Build Time은 프로덕션용 애플리케이션 코드를 준비하는 일련의 단계에 부여되는 이름입니다.
애플리케이션을 빌드하면 Next.js는 코드를 서버에 배포 하고 사용자가 사용할 수 있도록 프로덕션에 최적화된 파일로 변환합니다. 이러한 파일에는 다음이 포함됩니다.
- 정적으로 생성된 페이지용 HTML파일
- 서버에서 페이지를 렌더링하기 위한 Javascript코드
- 클라이언트에서 페이지를 대화형으로 만들기 위한 Javascript코드
-Css 파일
RunTime은 애플리케이션 이 구축되고 배포된 후 사용자의 요청에 대한 응답으로 애플리케이션이 실행되는 기간을 나타냅니다 .