mingg IT

React 프레임 워크 TOP3 본문

FrontEnd

React 프레임 워크 TOP3

mingg123 2022. 2. 21. 00:57

NextJs

GatsBy는 웹 사이트를 게시하기전에 페이지를 미리생성하고 Remix는 사용자가 요청할 때 서버 측에서 모든 코드를 실행함.

NextJs는 모두할 수 있음.

Gatsby

pages폴더에 index.js, about.js 가 있고 폴더안의 파일들은 URL에 직접 매핑함.

localhost:8080/about하면 만든 페이지가 있을거임.

gatsby build를 실행하면 public폴더가 생기고 index.html에 우리가 만든

리액트 구성요소를 가져다가 inex.html로 렌더링함.

유저가 웹사이트로 이동할 때 로딩을 기다릴 필요 없이, 앱의 UI를 바로 볼 수 있다.

유저가 HTML을 보고있는 동안 리액트를 다운로드하고 실행하고, HTML과 동기화 되어서 인터렉티브하게 작동함.

UI구축을 위해 기다리지 않고 사전에 HTML 페이지를 로딩하고,페이지 로딩이 끝나면 전체 페이지 인터랙티브 해지는 거임

둘(Remix, GatsBy)과의 차이점은 플러그인들이 있고 데이터를 애플리케이션에 추가할 수 있음.

정적 페이지를 만들 때 좋다.

플러그인을 사용하면 HTML을 미리만들수있다. GraphQL + Gatsby 조합이 좋다.

Remix

유료였다가 최근에 무료로됨.

Remix는 서버측에서 페이지를 렌더링함. 백엔드에서 리액트 js를 실행시킴.

routes 폴더안에 있고 보안 위험이 없을거임. 서버에서 사용하니까.

loading State를 관리할 필요가 없음.

Remix 사용자가 페이지를 요구할 때만 HTML을 요구함. GatsBy는 HTML을 주지만 미리 렌더링함.

 

 

https://www.youtube.com/watch?v=RP8nvTeurbQ 

모두 공통 문제를 해결하려함. 클라이언트사이드 렌더링

리액트로 하면 디폴트로 클라이사이언트 렌더링이 됨.

'FrontEnd' 카테고리의 다른 글

[React] lodash debounce 사용  (0) 2022.02.23
[Typescript] 제너릭(generic) 타입 사용하기  (0) 2022.02.22
[React] 코드 스플리팅 예시(class, 함수, loadable)  (0) 2022.02.01
[React] CROS 에러 해결 하기 Access to XMLHttpRequest at 'http://localhost:9091/springapi/restarant/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not ..  (0) 2021.12.03
[React] redux-action 사용하기 (typeScript)  (0) 2021.11.30
'FrontEnd' Related Articles more
Comments