NextJs와 CreateReact App의 차이점은 무엇입니까?
NextJs와 CreateReact App의 차이점을 알아보려고 합니다.둘 다 ReactJs를 사용하여 프런트 엔드 앱을 개발하면서 우리의 삶을 더 쉽게 만들 수 있다는 것을 알고 있습니다.
구글에서 몇 가지 기사를 찾아본 결과, 가장 큰 차이점은
NextJs는 SSR(Server Side Rendering)을 제공하고 Create React App은 CSR(클라이언트 사이드 렌더링)을 제공하며 SSR은 애플리케이션 로딩 성능을 향상시킵니다.
하지만 개발 관점에서 볼 때 다음과 같은 다른 매개 변수는 어떻습니까?
NextJS 또는 CRA와 함께 개발된 웹 애플리케이션의 유지 보수성과 확장성
타이프스크립트 및 리액트 훅/Redux 지원
아니면 제가 잘못된 비교를 하고 있는 경우에도 안내해 주실 수 있습니까?
NextJs와 CRA를 모두 사용해봤습니다.이 두 프레임워크 모두 빠르게 시작하고 우수한 개발자 환경을 제공하기 위해 사용할 수 있습니다.그러나 둘 다 둘 중 하나가 더 빛날 수 있는 사용 사례가 있습니다.이 요인들 중 몇 가지를 바탕으로 비교해보겠습니다.추가 포인트나 코멘트를 포함한 편집 내용을 자유롭게 제안해 주십시오.
서버측 렌더링
CRA | Next.js |
---|---|
CRA는 SSR를 즉시 지원하지 않습니다. 다만, 설정할 수 있습니다. 우선 서버 및 구성을 사용하여 SSR를 설정하는 데 더 많은 노력이 필요합니다.개발팀은 가까운 장래에 이를 지원할 계획이 없습니다.그들은 이 사용 사례에 다른 도구를 제안합니다. |
NextJs에는 SSR의 유형이 다릅니다.SSR를 즉시 지원합니다. * 정적 생성: 빌드 시 데이터를 가져옵니다.블로그나 정적 웹사이트와 같은 사용 사례에 가장 적합합니다. * 서버 측 렌더링: 요청별로 데이터를 가져와 렌더링합니다.사용자마다 다른 보기를 제공해야 할 경우 이 작업을 수행해야 합니다. |
설정 가능성
이 점에서 이들 툴은 매우 다르며 이 요소에 따라 결정이 달라질 수 있습니다.
CRA | Next.js |
---|---|
Create React App은 구성할 공간이 많지 않습니다. webpack config 등의 설정은 다음 경우를 제외하고 변경할 수 없습니다. 일반적인 CRA 방식(이젝트, 리스크립트, 리와이어드, craco)에서 벗어납니다. 기본적으로는 에서 설정한 것을 사용해야 합니다. react-scripts CRA를 사용하다 |
거의 모든 것을 설정할 수 있습니다. 예제 NextJs 템플릿을 체크하면 다음과 같은 파일을 볼 수 있습니다. babelrc ,jest.config ,eslintrc 타 etc설정할 수 있습니다. |
유지 보수성
CRA | Next.js |
---|---|
CRA cra cra 、 CRA の cra cra cra cra cra cra 。 CRA 릴리즈를 최신 상태로 유지하면 유지보수가 어렵지 않습니다. |
NextJs도 잘 유지되고 있습니다.정기적인 업데이트를 발표합니다. |
타이프 스크립트
CRA | Next.js |
---|---|
개봉 즉시 지원.은 CRA를 사용하여 를 사용하여 할 수 .npx create-react-app my-app --template typescript |
즉시 사용할 수 있는 타이프 스크립트를 지원합니다. '하다'가 붙은 합니다. touch tsconfig.json |
후크 지원
CRA 및 NextJs의 최신 버전은 후크를 지원하는 React 버전을 설치합니다.최신 버전으로 쉽게 업그레이드할 수도 있습니다.
Redux 지원
Redx는 이러한 두 가지 도구에서 모두 사용할 수 있는 라이브러리입니다.
Create React App은 React 프로젝트를 빠르게 셋업할 수 있도록 지원하는 React 프로젝트 생성 엔진입니다.CRA 스크립트 실행 후npx create-react-app <appname>
실행할 수 있는 깔끔한 한 페이지짜리 어플리케이션을 얻을 수 있습니다.바벨, eslint, joke, webpack 리액션 도구의 잘 가 있는 에도 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」npm run eject
.
Next.js는 React 기반의 프레임워크로 Node.js 서버측 앱을 구축합니다.즉, 동일한 컴포넌트 지향 로직을 사용하여 페이지를 작성하고 Next.js 라우팅 엔진을 사용하여 페이지 간 네비게이션을 수행합니다.서버측 렌더링을 사용하면 로딩 시간이 시간이 길어지기 때문에 인식되는 성능이 향상될 수 있습니다.Redx도 사용할 수 있지만 올바르게 동작하기 위해서는 몇 가지 추가 절차가 있습니다(https://github.com/kirill-konshin/next-redux-wrapper) 참조).
무엇을 선택하든 결국 리액트 코딩이 됩니다.컴포넌트, JSX, TypeScript 지원, React 훅 및 React의 기타 모든 핵심 측면이 모두 지원됩니다.따라서 비슷한 수준의 유지보수를 기대할 수 있습니다.한편, scalability는 선택에 따라 달라집니다.Next.js를 선택하면 어플리케이션을 대상 사용자에 따라 사이징해야 하는 서버 인프라스트럭처 상에서 호스트합니다.반면 CRA를 사용하여 작성된 React 번들은 정적 호스트만 하면 됩니다.
TLDR
가장 큰 차이는 두 프로젝트의 목적입니다.NextJS : JAM Stack 또는 Static Site Generator Create React App :는 공식적으로 지원되는 단일 페이지 React 응용 프로그램 생성 방법입니다.
설명:
이 난제는 많은 오픈소스 프로젝트에 해당됩니다.다른 것의 대안처럼 보이지만 그들은 중요한 차이점을 가지고 있다.예를 들어, 두 프로젝트 모두 React를 사용하지만JS는 프런트 엔드로 웹 앱을 제작합니다.그들이 해결하는 문제는 매우 뚜렷하다.js.에는 몇 가지 중복되는 특징 주제/특징이 있지만, 개발 및 향후 작업은 프로젝트를 강화하여 문제를 더 나은 방식으로 해결하는 데 도움이 될 것입니다.
즉, NextJs는 새로운 마크다운 기능이 개발되었는지 여부를 포함하려고 합니다.CreateReactApps에서는 해당되지 않습니다.
제안.
질문하신 내용에 따르면 리액트 네이티브 앱을 개발하기 위한 프로젝트를 찾고 계신 것 같습니다.그래서 저는 Create React App을 추천합니다.
주로 이 프로젝트가 내가 해결 중인 문제와 일치하는지 여부를 비교해야 합니다.비교합니다.유지보수성, 확장성, 타입스크립트 및 리액트 훅/리듀스 지원.
만약 더 많은 정보가 필요하다면 코멘트를 하세요.
React는 JavaScript 라이브러리일 뿐이고 Nextjs는 React 프레임워크입니다.SSR는 Nextjs의 장점 중 하나이지만 다른 많은 장점이 있습니다.Nextjs는 반응하는 모든 것을 할 수 있고, 게다가 반응하는 기능만으로는 할 수 없는 기능도 있습니다.다음 URL에서 nextjs 매뉴얼을 확인하십시오.https://nextjs.org/docs/getting-started
ReactJs는 라이브러리이고 NextJs는 react 컴포넌트를 사용하는 프레임워크입니다.
언급URL : https://stackoverflow.com/questions/62967958/what-is-the-difference-between-nextjs-and-create-react-app
'programing' 카테고리의 다른 글
JSON Schema: number-or-null 값을 확인합니다. (0) | 2023.03.02 |
---|---|
SyntaxError: 식이 필요한데 '<'이(가) 수신되었습니다. (0) | 2023.03.02 |
다른 TypeScript 파일을 Import하려면 어떻게 해야 하나요? (0) | 2023.02.25 |
angularjs multi-step/wizard 폼을 한 페이지/url로 하는 방법 (0) | 2023.02.25 |
재생 2 JSON 형식에서 누락된 속성에 대한 기본값 (0) | 2023.02.25 |