1. Next.js 란?

• 웹을 위한 React 프레임 워크

라이브러리? 프레임워크?

라이브러리와 프레임워크의 차이는 프로그래밍의 흐름 제어 권한 주체가 다르다는 점이다.
프레임워크(next.js)는 개발자가 아닌 프레임워크에서 흐름 권한을 가지고 있기 때문에 사전에 세팅된 것들이 많고 프레임워크를 사용하기 위한 규칙들이 존재한다.

라이브러리(react)는 개발자가 흐름을 제어할 수 있다. 라이브러리에서 원하는 기능들만 가져다가 개발할 수 있다.

Next.js 사용하는 이유?

1. 사전 렌더링(Pre-Rendering)
2. 자동 코드 분할(Code-Splitting)
3. API Routes
4. 자동 최적화(Built-in Optimization)
5. 미들웨어(Midlleware)
6. Routing & Layout

사전 렌더링

next.js는 기본적으로 모든 페이지를 미리 렌더링 해 놓는다. 미리 html 페이지를 만들어 놓고 클라이언트에서 서버에 요청을 보내면 빠르게 페이지를 보여준다.

장점1) 페이지를 불러오는 속도가 빠르다.
장점2) 검색 엔진 최적화(SEO)에 큰 도움을 준다.
ex) react의 경우 SPA라 빈 HTML만 로드하기 때문에 html 안에 아무런 내용이 없어서 검색을 했을 때 결과가 나오지 않는다.

자동 코드 분할

각 페이지별 필요한 코드를 작은 청크로 프로그램의 번들을 분할하는 과정이다. pages 폴더에서 각 페이지들이 빌드하는 동안 자체적인 자바스크립트 번들로 자동 코드 분할을 하는데 그때 페이지를 실행하는데 필요한 코드만 가져와 초기 로딩 시간을 향상할 수 있다.
=> 결과적으로 불필요한 코드가 로드되지 않는다.

API Routes

백엔드없이 데이터 통신할 수 있는 앱을 만들 수 있다.

자동 최적화(Built-in Optimization)

자동으로 이미지, 폰트, 스크립트 등을 최적화 해 준다. 따로 설정을 하지 않아도 지연 로딩이나, 성능 최적화 등을 대신 해 주기 때문에 개발 생산성 향상, 더 나은 유저 경험과 성능을 경험할 수 있게 한다.

미들웨어(Midlleware)

미들웨어가 내장되어 있다. 특정 요청을 하기 전에 어떤 행동을 하고 싶을 때 미들웨어를 사용해서 제어할 수 있다. (ex: 특정 페이지들에 로그인한 유저만 접근할 수 있겠끔 하고 싶을 때 미들웨어에 인증이 필요한 페이지 경로만 정의해주면 요청이 끝나기 전에 검증하는 로직을 추가할 수 있다.)

Routing & Layout

편리한 라우팅과 레이아웃 기능. 파일 시스템 기반 라우팅을 사용하기 때문에 폴더 경로에 따라 앱 구축을 할 수 있다.

SSR이란?

SSR

• Server Side Rendering

• 요청이 올 때마다 해당 HTML 문서를 생성하여 반환하는 사전 렌더링

• 장점 ) 페이지 데이터가 항상 최신을 유지, 페이지가 동적이기 때문에 사용자들에게 인터렉티브한 반응할 수 있다.

  SSG

• Static Site Generation

• 빌드 타임에 각 HTML 페이지를 미리 생성하고 요청하면 미리 생성된 페이지를 반환하는 사전 렌더링

• 페이지에 대한 사용자의 요청이 발생하면 요청에 따라 계속 서버에서 재성성을 하는 게 아니라 이미 생성이 완료된 static한 페이지 하나를 반환함. 생성이 완료된 html 파일을 재활용하기에 응답 속도가 빠름.

• ssr과 달리 서버에 계속 요청한다고 해서 내용이 변하지 않음.

  SEO

• Search Engine Optimization

• 내 사이트를 검색 엔진 결과에 잘 노출시킬 수 있도록 최적화 하는 것.