React 서버사이드랜더링 적용을 위한 Next.js

🔎서버사이드 랜더링이란?

Server Side Rendering(SSR)로 브라우저에서 화면을 그려주는 주체가 서버인 경우이다.

반대의 개념으로는 Client Side Rendering(CSR)이 있다.

우리가 사용하는 react는 기본적으로 CSR을 이용한다.

 

하지만, SSR이 주는 장점들이 있어서 SSR 환경에서 개발이 필요할 때가 있다.

 

👏서버사이드랜더링(SSR) 장점

• 검색엔진(SEO) 최적화, 검색엔진에서 웹페이지 수집 가능
• 초기 렌더링 속도가 CSR에 비해 빠르다.

 

🥰Next.js 이용하기

 

Next.js

서버사이드랜더링을 적용을 하려면 코드로도 가능하지만 Next.js라는 프레임워크를 이용하면

간단한 설정으로 SSR 설정이 가능해진다.

 

🙂Next.js 의 또 다른 장점은?

1️⃣코드스플리팅

코드스플리팅은 빌드를 할 때 파일크기를 최소화하는 것을 도와준다.

하나의 파일로모든 자바스크립트를 만들어서 빌드하는 것이 아니라,

파일을 분리하는 작업을 코드 스플리팅이라고 한다.

Next.js의 경우 코드스플리팅의 복잡한 과정을 자동으로 최적화 하여준다.

 

2️⃣오토라우팅

Next.js에서는 라우팅을 페이지 기반으로 관리한다.

page 폴더 깊이로 자동 라우팅 처리를 해주기 때문에 별도의 라이브러리를 설치할 필요가 없다.

 

 

 

 

📌첫 Next.js 프로젝트 생성해보기

nxt create-next-app

next 프로젝트 생성 성공 화면

📌첫 Next 프로젝트 실행시키기

npm run dev

next프로젝트 실행시키기

실제동작 화면

npm run dev호출어로 프로젝트를 실행시키면,

아무런 변경이 없다면 3000번 포트로 서버가 실행된다.

localhost:3000으로 화면에 접속하면 next 프로젝트가 정상적으로 실행된 것을 볼 수 있다