Frontend/Next.js

1. Next.js 는?

섕걍 2022. 3. 8. 14:47

Next.js는?

: ReactSSR을 도와주는 FrameWork이다.


 

React는 js library사용자 인터페이스를 만들기위함.

1. Component

2. 단방향 데이터 바인딩

3. JSX (javaScript XML)

4. Virtual DOM

의 특징을 가진다.


Next.js 장점

1. 앱에 있는 페이지들이 미리 렌더링 된다. 정적으로 생성됨(static)

 


create-react-app |  next.js의 차이 

Create-react-app 

1. create-react-app 은 CSR로 작동한다

  => 클라이언트가 UI를 모두 만듦.

2. 브라우저 js를 가져와 모든 ui를 만든다.

3. CSR => 연결이 느리다면 흰 화면이 보일 수 있다.

4. . SEO에 최적화 되어있지 않다.


Next.js

1. Pre-Rendering : HTML이 미리 렌더링 되어 SEO에 좋다.

2. 매우 느린 연결과 js의 비활성화 문제가 있어도 유저는 HTML을 볼 수 있다.

3. 파일시스템 기반 라우팅을 사용해 폴더의 경로에 따라 페이지의 경로가 설정된다. 

4. 빌드시 모든 페이지를 미리 렌더링에 보여준 후 필요한 최소한의 js코드를 불러온다.