Next.js란?

Next.js Getting Started

npx create-next-app@latest

# or

yarn create next-app

# or

pnpm create next-app

---

npx create-next-app@latest --typescript

# or

yarn create next-app --typescript

# or

pnpm create next-app --typescript

---

Next.js란 무엇인가?

• Next.js는 vercel에서 만든 React 라이브러리의 프레임워크이다.
• 클라이언트 사이드 기술과 서버 사이드 기술을 모두 가지고 있는 올인원 솔루션이다.

---

궁금점 1. 라이브러리와 프레임워크의 정의 및 차이점은 뭘까?

라이브러리

• 공통으로 사용될 수 있는 특정한 기능들을 모듈화 한 것을 의미한다.
• 폴더명, 파일명 등에 대한 규칙이 없고 프레임워크에 비해 자유롭다.

- 한마디로 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내린다.

 

프레임워크

• 공통으로 사용될 수 있는 특정한 기능들을 모듈화 한 것을 의미한다.
• 폴더명, 파일명 등에 대한 규칙이 있고 라이브러리에 비해 좀 더 엄격하다.

- 한마디로 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따른다.

 

라이브러리와 프레임워크의 차이점

• 라이브러리의 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)이다.
  라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다.
  그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다.

---

왜 Next.js를 만들었을까?

많은 블로그 포스트들을 읽어보면 Next.js를 사용하는 가장 큰 이유로 SEO(Search Engine Optimization)을 위한 Server-Side Rendering(SSR)을 가능하게 하기 위해서라고 말하고 있다.

 

React는 Client Side Rendering(CSR)을 한다.
이는 위 그림처럼 웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에, 첫 로딩 시간도 오래 걸리고 Search Engine Optimization(SEO)에 취약하다는 단점이 있다.
그래서 대시보드나 로그인을 해야 쓸 수 있는 private 한 사이트에 적합하다.

 

반면, Next.js는 pre-reloading을 통해 미리 데이터가 렌더링 된 페이지를 가져올 수 있게 해 주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있습니다. 

 

pre-reloading은 SSR 뿐만 아니라 정적 사이트 생성(Static-Site Generate (SSG))도 가능하게 해 준다. 또, SSR과 CSR도 혼합하여 사용 가능하다.

---

궁금점 2. SSR와 CSR은 무엇인가?

SSR

• 서버에서 html 그려준다.
• html 렌더링부터 한 다음에 js를 다운로드한다.(js 다운로드하기 전에 html를 다운로드하여서 화면을 볼 수 있어 검색엔진 크롤링이 가능하다.)

CSR

• 클라이언트에서 html 그려준다.
• js 다운로드하고 react를 돌리기 때문에 검색엔진 봇의 크롤링이 안된다.

---

궁금점 3. Next.js 없이는 SSR을 구현할 수 없을까?

결론부터 얘기하자면 만들 수는 있다.
react-helmet 등의 라이브러리로 SEO에 대응할 수 있다.
그런데 만약 이미 진행된 react 프로젝트에서 갑자기 프레임워크를 도입하는 것이 리팩토링 등 꽤 비용이 드는 작업이기 때문에, 프로젝트 시작 전 프레임워크를 도입할지 고민을 하고 있다거나, 시간적 여유가 있다면 깔끔하게 SSR을 처리하는 데는 Next가 최고다.

---

 

참고 : https://velog.io/@syoung125/Next.js-%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90-1-Next.js-%EB%9E%80-Next.js%EB%A5%BC-%EC%99%9C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C-Next.js%EC%9D%98-%EC%9E%A5%EC%A0%90%EC%9D%80

[Next.js] 기본 개념 : Next.js 란? Next.js를 왜 사용할까? Next.js의 장점은?

https://shinystarforever.tistory.com/270

Next.js는 무엇인가? 내가 사용하면서 느낀 Next.js의 장점은?