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)

해당 글은 제가 DEVIEW 2020의 발표 영상 DEVIEW 2020 - React 개발이 이렇게 쉬웠나? (Feat. Next.js)을 보면서 문서화 및 제 의견을 추가한 글입니다. 0.React 개발이 이렇게 쉬웠나? (Feat. Next.js) 1. UI Lib..

geonlee.tistory.com

 

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

+ Recent posts