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
728x90
'Framework&Library > React' 카테고리의 다른 글
[ React : Next.js ] _app.js (0) | 2021.11.23 |
---|---|
[ React ] Next.js : React Framework + <Link>, CSN (0) | 2021.11.23 |
[ React ] Hook - state (0) | 2021.11.22 |
[ React ] Styled-Components [1] (0) | 2021.11.16 |
[ React ] Component & Props (4) | 2021.11.16 |