
## Create React App

브라우저 접근 -> CDN이 스크립트와 스타일을 포함하는 HTML 페이지를 반환 -> 
js를 실행한 후 클라이언트 사이드에서 HTML 컨텐츠가 렌더링 -> 데이터까지 받으면 동적 컨텐츠가 렌더링됨

### 장점

- 리액트 팀에서 생성 및 유지 관리

### 단점

- 서버 사이드 렌더링 없음. 라우팅 라이브러리 필요
- Code splitting과 같은 기능을 직접 구현해야함
- eject 시 복잡성 증가

## Next.js

렌더링된 HTML 페이지를 클라이언트가 받음 -> JS 앱이 시작되고 hydration 단계에 들어섬 -> 데이터를 받아 동적 컨텐츠 로딩

### 장점

- 페이지마다 data-fetch, pre-rendering 전략을 다르게 할 수 있음
- 다양한 상태관리, 스타일링 라이브러리 지원
- 파일 시스템 라우팅
- API route

### 단점

- 프레임워크 지식이 필요(`_app.js`, `_document.js`, `getServerSideProps` 등)
- 플러그인 시스템 없음
- 이미지 최적화

### Next.js로 인증 없이는 접근조차 못하게 막기

Next.js는 로그인/인증이 없으면 페이지에 접근조차 못하게 막을 수 있다. (핵심적인 스크립트 파일 유출을 막을 수 있음)

```js  
Page.getInitialProps = async (context: ServicePageContext) => {
    if (!validate(context)) redirect('/login')
    return {}
}
```

## Gatsby

### 장점

- GraphQL(단점이자 장점)
- 플러그인 생태계
- 이미지 최적화
- 정적 페이지 성능이 Next.js보다 약간 더 좋음

### 단점

- 빌드시간이 오래걸림 (이미지 최적화, 정적 페이지)

## 프레임워크 별 응답값

|    | CRA | Gatsby | Next.js |
|----|-----|--------|---------|
| 응답값| - 빈 HTML  - JS | - 그려진 HTML  - JS | - 그려진 HTML   - JS   - JSON (페이지 데이터) |

**이 때 Next.js가 렌더링에 필요한 데이터도 브라우저로 같이 보내므로 브라우저에서 최초에 데이터를 요청하지 않음**


WEB

'WEB'에 관한 글들을 모아봤어요.

웹 프론트엔드 프레임워크 비교