NextJs - 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기

1편:  NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기

NextJS는 ReactJs의 몇몇 한계점을 극복한 프레임워크라고 말할수 있습니다. ReactJs의 기반에서 더 좋은 SEO(검색 엔진 최적화), SSR을 통한 효율적으로 최적화된 랜더링 속도와 비용 절감 등등이 추가되었습니다.

하지만 그만큼 ReactJs에 비해 NextJs의 러닝커브가 올라갔다고 할 수도 있습니다. 그래서 NextJs에 대한 기본적인 이론과 알아야할점들을 기록하고자 합니다.

ReactJs에 대한 개념이 우선적으로 알고나서 이 글을 보시면 NexJs에 대하여 더 디테일 하게 이해하는데 좋을거 같습니다.

CSR과 SSR

---

 

CSR과 SSR을 크게 두 가지로 비교할 수 있습니다.

1. 초기 화면 랜더링 방법.
2. 그 이후 페이지 이동과 기능 동작 발생.

 

 

 

 

 

SSR(Server Side Rendering)이란

서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링을 하는 방식을 의미합니다.

SSR의 동작과정 - 초기 화면 수행

1. 사용자가 브라우져에서 요청을 합니다(최초 홈페이지 접속)

2. 클라이언트에서는 이를 확인하고 서버로 요청을 합니다.

3. 서버에서 데이터를 포함한 미리 구성된 HTML, CSS 파일을 클라이언트에게 전달합니다.

4. 전달받은 클라이언트에서 스크립트가 수행하여 최종적인 화면을 브라우저에 그려 사용자에게 보여줍니다.
(해당 부분에서 미리 구성된 JS까지 수행이 되어 사용자에게 보여지는 화면 속도가 빠릅니다.)



SSR의 동작과정 - 페이지 이동 / 동작이 발생하는 경우

1. 브라우져에서 클라이언트로 요청합니다

2. 요청한 정보를 다시 서버로 재 요청합니다.( 페이지를 이동하는 경우 서버로 요청을 해야 함.)

3. 처리가 완료 된 후 클라이언트에 응답합니다.

4. 클라이언트에서 브라우저로 처리된 사항을 그려줍니다.

 

 

 

 

CSR(Client Side Rendering)이란

 

서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청 할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것을 의미합니다.

CSR의 동작과정- 초기 화면 수행

1. 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청합니다.

2. 서버는 빈 페이지(css, js 링크만 있음)를 클라이언트에게 전달합니다

3. 전달받은 클라이언트에서 해당 화면을 그려주고 스크립트를 수행하여 최종적인 화면을 사용자에게 보여줍니다.(해당 부분에서 사용자에게 보여준 뒤 JS를 로드해서 사용자에게 보이는 화면 속도가 느립니다.)

4. 사용자가 다음 액션을 수행하는 경우 클라이언트 내에서 페이지를 요청하고 수행합니다.



CSR의 동작과정- 페이지 이동 / 동작이 발생하는 경우

1. 브라우저에서 클라이언트로 요청합니다

2. 클라이언트에서는 해당 정보를 처리하고 브라우저로 전달합니다 (* 페이지를 이동하는 경우 클라이언트 내에서 이를 처리함)

3. 브라우저에서 이를 처리하고 처리된 사항을 그려줍니다.여기서 렌더링은 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.)

 

NextJs에서는 ReactJs와 다르게 SSR을 추가로 도입했다고 할 수 있습니다. 

 

 

 

 

 

 

 

SSR을 도입한 NextJs 동작 과정

---

 

Next.js 동작과정의 새롭고 가장 큰 특징은 초기화면 수행에서 SSR 방식을 이용했다는 것입니다.

초기화면 수행 (SSR 방식을 이용)

1. 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청합니다.(Server-Side)

2. 서버에서는 미리 구성된 HTML, CSS 파일을 클라이언트에게 전달합니다.(Pre-Rendering - init Load)
(* Initial Load : JS 동작이 없는 HTML을 먼저 화면에 보여주는 것을 의미)

3. 이 과정에서 동시에 클라이언트에서는 스크립트 파일을 수행하여서 클라이언트에게 전달합니다.(Hydration)
(* Hydration : Initial Load 이후 JS 파일을 HTML에 연결하는 과정을 의미)



페이지 이동 / 동작이 발생하는 경우 (CSR 방식 이용)

1. 페이지 이동 및 동작이 발생하는 경우에는 CSR 방식을 통해서 서버를 거치지 않고 브라우저에서 페이지를 이동합니다.

 

CSR의 단점은 초기 진입의 로딩 속도가 느린점, SSR의 단점인 초기 진입 이후 발생하는 페이지 이동 혹은 기능 동작시 발생하는 값비싼 서버 재요청 비용, 이 둘의 단점을 서로 상쇄시키도록 SSR + CSR 방식을 조합한 것이 NextJs 프레임워크입니다.

NextJs는 웹 초기 진입 화면에서 SSR 형식으로 랜더링되고 그 이후에 발생되는 동작과 페이지 이동은 ReactJS의 CSR 방식으로 진행되어 초기 진입시에는 빠르고 그 이후의 페이지 이동이 기존 ReactJs처럼 서버에 재요청 되지 않아도 가능하도록 하였습니다.

 

 

 

NextJs를 사용하는 근본적인 이유

---

 

 

그럼 위의 NextJs의 특징을 고려할때 ReactJs을 사용하지 않고 NextJs 사용 선택을 할수 있는 이유는 무엇일까요.

 

1. Next.js는 초기 페이지를 서버에서 자바스크립트를 로딩하여 더 빠르게 화면을 사용자에게 보여줍니다.

2. Next.js는 SEO(Search Engine Optimiztion) 문제를 해결합니다.

3. Next.js는 SPA의 장점을 유지합니다.

4. 직관적인 Page 기반 라우팅 시스템을 통해 Code Splitting (코드 분할)을 동시에 제공합니다.

 

 

 

 

1. Next.js는 초기 페이지를 서버에서 자바스크립트를 로딩하여 더 빠르게 화면을 사용자에게 보여줍니다.

 

NextJs는 초기 페이지를 서버에서 자바스크립트까지 로딩을 하는 방식으로 <Pre-rendering>을 이용합니다. Pre-rendering 방식은 서버에서 자바스크립트로 HTML 컨텐츠를 채운 완성된 파일을 클라이언트에게 전달하여 처리가 됩니다.

이러한 방식은 이미 서버에서 구성된 HTML 파일을 사용자에게 보여주기 때문에 초기 페이지 로딩 속도가 빨라집니다. (해당 처리는 Hydration을 이용하여 처리합니다.)

 

이 방식은 파일이 로드되기 전에 페이지가 모두 구성되어 있기에 SEO 점수에서도 높은 점수를 받습니다.

 

 

 

 

하지만 No Pre-rendering 방식은 빈 HTML 파일을 최초에 먼저 렌더링 한 이후에 스크립트를 로딩하는 방식으로 처리가 됩니다.

 

이러한 방식은 추후 스크립트를 로딩하기에 사용자에게 보이는 초기 페이지 로딩시간이 늦어집니다. 또한 이 방식은 파일이 로드되기 전까지 페이지를 볼 수 없다는 뜻이며, 결국 UX 측면에서 낮은 평가를 받게 되며 SEO 점수에서도 낮은 점수를 받습니다.

 

 

 

 

 

 

 

2. Next.js는 SEO(Search Engine Optimiztion) 문제를 해결합니다.

검색엔진 최적화(SEO: Search Engine Optimization)란 검색엔진 최적화로 웹 사이트 결과에 더 잘 보이도록 최적화하는 것을 의미합니다.

 

SSR의 가장 큰 특징인 pre-rendering 덕택에 HTML, CSS, Javascript로 만들어진 HTML을 제공함으로써 SEO 문제를 해결할 수 있습니다.

예를 들어 네이버인 경우 프로젝트의 웹 페이지가 검색 결과에 따라 검색 결과 상단에 노출되는 것인데 CSR을 이용하면 검색엔진 봇들이 초기 HTML 빈 페이지에 아무것도 없기에 데이터 수집을 못하여서 검색엔진에게서 잘 채택 되지 못하여 노출이 어려워 집니다.

 

 

 

 

 

 

 

 

3. Next.js는 SPA의 장점을 유지합니다.

 

첫 페이지를 SSR 방식을 이용하여 처리 한 이후 다른 페이지로 이동할 때부터는 CSR 방식으로 브라우저에서 처리하기 때문에 SPA의 장점을 유지 가능합니다.

 

 

 

 

 

 

 

4. 직관적인 Page 기반 라우팅 시스템을 통해 Code Splitting (코드 분할)을 동시에 제공합니다.

 

이런식으로 바로 라우팅 설정 가능하다

ReactJs와 다르게 별도의 라우터 구성없이 파일 디렉토리 구조만 구축하면 라우팅이 가능합니다. 파일 폴더명이 소문자인 법칙만 지키면 아주 편한 기능입니다.

동시에 이 Page 파일 디렉토리를 이용한 라우터를 사용하면 ReactJs에서 따로 설정해야 했던 Code Splitting (코드 분할)이 자동적으로 적용되어 최적화가 된다는 사실입니다.

 

코드 스플리팅(Code Splitting) 이란?
내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것입니다. 모든 번들이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있습니다.

 

 

 

 

 

 

 

프로젝트 생성하기

---

설치

1. 새로운 폴더를 생성합니다.

2. 터미널을 열고, 새로 생성한 폴더로 이동합니다.

3. 다음 명령어를 터미널에 입력하여 Next.js를 설치합니다.

npx create-next-app@latest .

 

4. 아래와 같이 프로젝트 초기 세팅에 필요한 설정들을 Yes or No로 선택하고 나서 설치 진행 가능합니다.
타입스크립트 사용 유무, App Router 사용 유무 등등 많은 설정들이 있으니 참고 바랍니다.

 

 

 

 

실행

1. 설치한 Next.js를 실행하기 위해 터미널에 다음 명령어를 입력합니다.

npm run dev

 

이 명령어는 개발 모드에서 Next.js 애플리케이션을 실행합니다.

 

 

2. 브라우저를 열고 아래 주소로 접속합니다. 

http://localhost:3000/

 

 

 

3. 실행 중인 Next.js 애플리케이션을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

마무리 하며..

---

 

지금까지 NextJs을 시작하기전 필수적으로 알아야한 이론, 그리고 왜 써야 좋은지 등을 알아보았습니다. 2편에서는 NextJs 12버전과 13버전의 차이점을 토대로 서버 컴포넌트까지 알아볼 예정입니다.

감사합니다.

 

 

 

 

 

2편에서 NextJs 12버전과 13버전의 차이점 알아보기: https://k0502s.tistory.com/1197

NextJs - 2편: NextJs 버젼 12에서 13으로 넘어오면서