[Next.js] Next.js란? (리액트 단점, CSR, SSR 설명)

Next.js 탄생배경

CSR을 사용하는 리액트의 단점때문에 이를 개선하고자 리액트 프레임워크 Next.js가 생겨났다

 

CSR이란?

Client Side Rendering으로 클라이언트 즉, 웹브라우저가 화면을 렌더링해준다

웹브라우저에 내장된 JS 엔진이 동적으로 HTML 엘리먼트를 생성한 뒤 root element에 추가하여 웹 콘텐츠를 만드는 방식을 말한다

 

리액트의 단점 (CSR의 단점)

• 리액트에서는 브라우저가 페이지를 화면에 그려주고 서버에서는 해당하는 데이터만 받아오는 CSR(Client Side Rendering) 방식을 사용한다
• 즉 유저가 웹사이트로 이동한 그 후에 JS를 다운받고 리액트가 UI를 빌드한다
• 만약 사용자의 JS가 활성화 되어 있지 않거나 인터넷이 느려 JS 파일을 다운받거나 프로세싱 하는데 오래 걸리면 사용자는 웹브라우저에 아무것도 로딩되지 않은 흰색 화면만 보게된다
• 자바스크립트 코드가 사이트 UI를 만드는 코드를 생성하기 때문에 검색 크롤러가 안에 있는 컨텐츠를 읽어내고 어떤 페이지인지 분석하는데 힘들다

 

리액트의 단점 (CSR의 단점) 정리

1. 초기 로딩이 느리다
2. SEO에 취약하다

 → 리액트 프레임워크 등장 (Next.js)

 

Next.js 소개

• 리액트로 프론트엔드를 개발할 때 필요한 여러 기능을 기본으로 제공하는 리액트 프레임워크
• 예) 라우팅, 서버 렌더링, CSS in JS
• 파일 시스템 기반의 라우팅 기능을 제공
• → pages 안에 있는 파일이름이 바로 라우팅 처리가 됨
• 처음 렌더링시에는 SSR 그 후에 페이지 변경은 CSR 방식을 사용한다

 

SSR이란

• 웹 사이트를 게시하기 전에 페이지를 미리 생성하는 방식
• 사용자가 요청할 때 서버 측에서 모든 코드를 실행

 

Next.js 장점 (SSR의 장점) 정리

1. 브라우저 리렌더링시 화면 깜빡임이 없다
2. 렌더링 속도가 빠르다
3. SEO 적용에 유리하다