이제 리액트도 겨우 할 줄 아는데
다들 Next.js!!! 얘기를 하더라거여,,?
배워도 배워도 배워도 끝이 옶는...
이건 모냐....해서 공부하려고 글을 써봅니다.
😤 NEXT.js를 알아보자!
일단 위키백과씨가 알려준 바에 의하면
Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다.
여기서 다시 한 번 짚고 넘어갑시다.
나는 아는데욥? 하시면 바로 넘어가시묜 됩미다! (사실 제가 헷갈려서 정리하는 겁니다.)
프레임워크란?
어떤 어플리케이션을 개발하기 위해 필요한 기본적인 클래스와 라이브러리등이 모두 포함되어있는 환경을 의미합니다.
잘 이해가 안되시죠..?
프레임워크 vs 라이브러리
이 두 가지를 비교해보면 더 이해가 쉬울 것 입니다.
프레임워크
예시)
- Java 서버 개발에 사용되는 Spring
- Python 서버 개발에 사용되는 Django, Flask
- 웹 개발에 사용되는 Angular, Vue.js 등
등등등
라이브러리
소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉, 특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미합니다.
예시)
- python pip로 설치한 패키지/모듈 (tensorflow, pandas ...)
- Node.js에서 npm으로 설치한 모듈
- 웹에서 사용자 인터페이스 개발에 사용되는 React.js
등등등
가장 중요한 차이점
"제어흐름"의 권한이 어디있느냐 입니다.
라이브러리 사용시 사용자가 애플리케이션 코드의 흐름을 직접 제어 합니다.
프레임워크는 애플리케이션의 코드가 프레임워크에 의해 사용됩니다.
애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하므로 제어의 흐름은 프레임워크가 가지게 되고 사용자가 그 안에 필요한 코드를 작성하게 됩니다.
📍 Next.js 란?
그래서 다시한번 짚어보자면
리액트 기반의 프레임워크, 리액트 개발자에게 생산성과 편의성을 증대시켜 주며 이는 곧 React의 단점(SPA의 단점)을 커버해 준다는 것을 의미합니다.
React의 단점 (SPA의 단점)
SPA의 장점
- 리액트는 SPA(Single Page Application)로써 사이트에 접속할 때 하나의 페이지를 불러옵니다.
- 페이지를 불러올 떄 필요한 모든 JS 파일을 한번에 불러옵니다.
- SPA는 페이지를 이동하게 되면, 받아온 파일을 이용하여 UI를 변화시키고, 필요한 데이터는 서버에서 JSON 형태로 받아서 UI를 빠르게 변화시킬 수 있습니다.
- 이러한 특징으로 인하여 사용자 경험(UX)에 좋습니다.
SPA 단점
장점이자 단점이 발생하게 됩니다.
1. 모든 JS 코드를 불러와야 하기 때문에 처음 페이지를 불러올 때 시간이 오래 걸립니다.
2. 검색 엔진 최적화(SEO)에 좋지 않습니다.
- 검색 엔진 봇이 사이트에 방문하였을 때 콘텐츠를 제공하지 못하여 사이트를 파악하는데 어려움이 있습니다.
이러한 문제점들을 서버사이드렌더링(SSR)을 사용함으로써 해결할 수 있습니다.
SSR 이란?
서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링 하는 방식
SSR 동작과정
- 사용자가 브라우저에서 요청을 한다. (최초 홈페이지 접속)
- 클라이언트에서는 이를 확인하고 서버로 요청을 합니다.
- 서버에서 데이터를 포함한 미리 구성된 HTML, CSS 파일을 클라이언트에게 전달합니다.
- 전달받은 클라이언트에서 스크립트가 수행하여 최종적인 화면을 브라우저에 그려 사용자에게 보여줍니다.
(해당 부분에서 미리 구성된 JS까지 수행이 되어 사용자에게 보여지는 화면 속도가 빠릅니다.)
CSR 동작과정과 비교하면 쉽습니다.
CSR 동작과정
: 서버에서 전체 페이지(빈 페이지)를 최조 렌더링하고 사용자가 요청 할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것을 의미합니다.
- 사용자가 홈페이지를 접속한 경우 클라이언트는 이를 확인하고 서버로 요청합니다.
- 서버는 빈 페이지(css, js 링크만 있음)을 클라이언트에게 전달합니다.
- 전달받은 클라이언트에서 해당 화면을 그려주고 스크립트를 수행하여 최종적인 화면을 사용자에게 보여줍니다.
(요 부분이 SSR과 다른점! 해당부분에서 사용자에게 보여준 뒤 JS를 로드해서 사용자에게 보이는 화면 속도가 다릅니다.) - 사용자가 다음 액션을 수행하는 경우 클라이언트 내에서 페이지를 요청하고 수행합니다.
그림으로 쉽게 보세요
SSR의 장점
- 필요한 JS 파일을 불러올 때까지 반응은 하지 않지만, 빠르게 화면을 보일 수 있기에 속도가 빨라 보입니다.
- 검색 엔진 봇에 렌더링 된 html을 제공하여 SEO에 좋습니다.
SSR의 단점
- SSR은 페이지 이동 시 새로운 페이지를 요청하기 때문에 페이지 이동 시 깜빡임이 존재합니다.
- 더불어 템플릿을 중복해서 로딩하며 이는 서버에 부담을 줘 성능상 좋지 않습니다.
Next.js의 등장
Next.js는 SPA와 SSR의 단점을 해결하기 위해서 리액트에 서버사이드렌더링 기능을 더하여 SPA와 SSR의 장점을 가질 수 있게 됩니다.
리액트에 SSR 기능을 추가하려면 웹 서버를 만들어 주고, 웹팩 설정, 데이터 로딩, 코드 스플리팅 등 복잡한 과정을 필요로 합니다.
Next.js를 통해 이러한 것들을 설정하지 않고 바로 사용할 수 있습니다!!
📍 Next.js를 써야하는 이유
다시 정리해서 사진으로 간단하게 봐봅시다.
- 초기 페이지를 서버에서 자바스크립트를 로딩합니다. (SSR)
기존 React.js app
Next.js를 사용한 경우
- SEO 문제를 해결합니다.
- 직관적인 페이지 기반 라우팅 시스템 (Auto Routing)
프로젝트의 가장 바깥 폴더인 pages/ 폴더에서 컴포넌트를 export 하면 폴더명이 페이지 route가 됩니다.
react-router라는 라이브러리를 사용하지 않아도 됩니다.
- SPA의 장점을 유지합니다.
- Code splitting (코드 분할) 지원
코드 스플리팅 이란?
내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것 입니다. 모든 번들이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있습니다.
- Typescript 내장
따로 타입스크립트 설정 없이 사용할 수 있습니다.
.
.
.
.
.
.
참고블로그
https://velog.io/@carrot/Next.js-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%ED%8A%B9%EC%A7%95
https://adjh54.tistory.com/52
