[Nextjs] Nextjs에 대해 알아보기

Nextjs

공식 문서에 들어가면 대문짝만하게 다음과 같은 소개글이 나온다.

The React Framework for the Web

Nextjs는 리액트 프레임워크이다. 리액트를 기반으로 서버사이드 렌더링, 최적화 등의 기능을 제공해주는 틀이라고 할 수 있다.

CSR과 SSR

리액트는 SPA(Single Page Application)를 지원하는 자바스크립트이다.
단일 페이지 애플리케이션. 즉, 하나의 페이지에서 자원을 모두 보여준다는 것이다. SPA는 보통 CSR의 렌더링 방식을 사용해서 구현된다.
CSR은 다음과 같은 렌더링 과정을 가진다.

CSR의 렌더링 방식

1. 사용자가 웹사이트에 방문하면 브라우저는 서버에 컨텐츠를 요청한다.
2. 서버는 브라우저로 HTML (빈 뼈대),CSS,JS 파일들을 응답한다.
   (public 폴더의 index.html을 생각하면 된다.)
3. 브라우저에서는 JS파일을 다운받아서 동적으로 DOM을 생성한다.

CSR의 장단점

이처럼 CSR은 초기에 모든 로직이 담긴 JS파일을 받아오는 과정이 있기 때문에 초기 렌더링 속도가 느린 단점이 존재한다.💥💥
하지만 로딩 후에는 필요한 부분만 서버로 요청하여 동작되기 때문에 구동속도가 빠르다.✅
또한 초기 렌더링 시 빈 뼈대만 존재하는 html 파일을 불러오기 때문에 SEO(검색 엔진 최적화)에 취약하다는 단점도 존재한다.💥

SSR의 렌더링 방식

1. 사용자가 웹사이트에 방문하면 브라우저는 서버에 컨텐츠를 요청한다.
2. 서버에서는 렌더링 준비를 마친 HTML과 JS 코드를 응답한다.
3. 브라우저에서는 바로 전달받은 페이지(HTML)를 띄운다.
4. 이어서 js 코드를 다운로드 받는다.

HTML에 JS 로직 연결

SSR의 장단점

• 서버에서 이미 렌더링 가능한 상태의 HTML 파일이 넘어오기 때문에 사용자는 초기에 렌더링된 화면을 빠르게 접할 수 있다. ✅
• 하지만 js 파일을 그 다음에 받아오기 때문에 사용자 인터랙션에 반응이 느리다는 단점이 있다. 💥
• 이미 렌더링된 HTML 파일이 넘어오기 때문에 검색엔진 최적화에 좋다는 장점이 있다. ✅
• 하지만 페이지를 이동하거나 사용자와의 인터랙션으로 페이지에 변화가 발생하면 위 렌더링 과정이 다시 일어나기 때문에 속도가 CSR에 비해 느리다는 단점이 있다. 💥

Nextjs를 사용해서 React에서 SSR을 한다.✨

CSR과 SSR은 각각의 장단점을 갖고 있다. 그렇다면 둘 중 하나만 사용해서 개발해야만 하는 것일까? -> 🙅‍♀️
Nextjs를 사용해서 React 환경에서 SSR을 할 수 있다.