[ React ] React Framework

React Framework

1. Next.js

- SSR( Server Side Rendering ) 방식으로, CRA의 경우 index.js만 불러와 SPA 방식으로 라우팅에 따라서 Component를 교체하는데, Next.js는 pages directory에 있는 파일을 기준으로 router별로 다른 page로 넘어가게 된다. 

- 요청한 page의 코드만을 로딩한다. -> 특정 page에서 에러가 발생하지 않더라도, 다른 page들은 잘 작동할 것.

- Browser의 View port에서 'Link' Component가 있을 때, 백그라운드에서 링크된 페이지를 위해 자동으로 프리패치(Prefetch)한다. [ Prefetch : 

 

2. Gatsby

- SSG( Static Site Generation ) 방식 Rendering

 

3. Create React App ( CRA )

- 가장 배우기 쉬움. 

- Client 측에서 rendering 하는데 필요한 HTML CODE를 생성한다. 

- SPA(Single Page Application)로, CSR( Client side rendering )방식이기 때문에 규모가 커지게 되어 js 파일의 용량이 커지게 되면 초기 로딩시간이 늘어나게 된다. -> CSR의 단점인 SEO 관련 문제도 발생 

- 무거운 작업들은 브라우저에서 수행된다. 

 

 

https://ko.reactjs.org/docs/create-a-new-react-app.html

https://geonlee.tistory.com/229

https://blog.outsider.ne.kr/1426

React 개발이 이렇게 쉬웠나? (Feat. Next.js)