Next Js

Next 사용하는 이유

가장 큰 이유는 리액트 프로젝트에서 SSR(Server Side Rendering)을 하기 위함이라고 할 수 있다.

검색 엔진 최적화(SEO)를 하기 위해서 SSR이 중요한 역할을 하기 때문이다.

 

초기 로딩 속도가 빠른 SSR, 페이지 전환이 빠른 CSR

SSR은 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 굉장히 빠르고 검색 엔진 최적화(SEO)에 유리하다. CSR은 서버가 아닌 클라이언트 측에서 서비스에 필요한 자원(Resource)을 먼저 다운로드 후에 브라우저에 렌더링 하는 방식이다. SSR보다 초기 로딩 속도는 뒤쳐질 수 있지만, 첫 페이지를 로딩하면서 모든 파일을 다운로드하기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용한다.

 

Next 작동 원리

1. 초기에 사용자가 Server에 페이지 접속을 요청하면, SSR방식으로 렌더링 될 HTML을 보냄.
2. 브라우저에서 JavaScript를 다운로드하고 React를 실행함.
3. 사용자, 페이지가 서로 상호작용하여 다른 페이지로 이동할 땐, Server가 아닌 CSR방식으로 브라우저에서 처리함.

 

1. pages 폴더

2. 라우팅 url 과 동일한 이름의 컴포넌트를 생성

3. pages 컴포넌트가 next 라우팅과 동일하게 mapping 된다.

ex) /first =  pages/first.jsx