비전공자의 공부일지 - NextJS

NextJS란

React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다.

리액트로 개발할 때 SPA(single page application)을 이용하며 CSR(client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)인데 CSR을 하면 첫 페이지에서 빈 html을 가져와 JS해석하여 화면을 구상하기 때문에 포털사이트에서 거의 노출되지 않는다.

 

하지만 NextJS에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다.

 

리액트에서도 SSR을 지원하지만 구현하기에 괸장히 복잡하기 때문에 NextJS를 통해서 이 문제를 해결하면 된다.

 

CSR

1. 서버에 파일을 요청한다
2. JS파일을 다운로드 한다.
3. React가 실행된다
4. View로 콘텐츠를 보여준다.

리액트가 실행될 때 까지도 view에 아무것도 노출되지 않아 검색노출이 되지 않는다.

 

SSR

1. 서버가 렌더링이 된 HTML파일을 보내준다.
2. JS파일을 다운로드한다.
3. React가 실행된다
4. View로 콘텐츠를 보여준다.

CSR과 다르게 서버에서 렌더링이 된 HTML파일을 전달해 주기 때문에 검색 노출이 쉽다.

 

NextJS의 파일 구조이다.

pages에는 페이지들이 들어가고

styles에는 css가 들어간다.

next.config.js에는 웹팩에 관한 설정들을 해줄 수 있다.

 

pre-render

pre-render은 모든 페이지를 위한 HTML을 Client사이드에서 자바스크립트로 처리하기 전 사전에 생성한다는 것이다. 이렇게 하기 때문에 SEO 검색엔진 최적화에 좋다.

 

Data Fetching

NextJS에서 데이터를 가져오는 방법은 여러 가지가 있는데 애플리케이션의 사용 용도에 따라서 다른 방법을 사용하면 된다.

React에서는 데이터를 가져올 때 useEffect안에서 가져왔는데 NextJS에서는 다른 방법을 사용해서 가져온다.

 

• getStaticProps

Static Generation으로 빌드(build)할 때 데이터를 불러옵니다. (미리 만들어줌)

 

• getStaticPaths

Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현 (pages/prost/[id].js)

 

• getServerSideProps

Server SIde Rendering으로 요청이 있을 때 데이터를 불러옵니다.

 

이렇게 설명 하고 있지만 직접 사용 해보기전까지는 잘 모르겠다.

블로그 만들기 프로젝트할때 사용해보면서 더 알아 가야될것 같다.