Next 또는 Gatsby vs Create React App 등의 리액트 프레임워크를 사용하는 경우
저는 React/Javascript 학습 경험의 일종의 빠른 프로토타이핑 단계에 있습니다.표준 Create React App과 비교해서 Next.js나 Gatsby.js와 같은 프레임워크에 언제 손을 뻗을지 궁금했습니다.
Next.js의 링크를 프리로드하기 위한 페이지 기반 구조와 전망은 매우 마음에 듭니다.다만, CRA와 관련하여 Next에 언제 도달할지, CRA를 이젝트할지는 모르겠습니다.
감사합니다!
나는 같은 처지에 있다.저는 처음에 SPA를 만들기 위해 CRA를 시작했습니다.이 SPA는 학습곡선을 극복하는 데 매우 도움이 되었습니다.하지만 나는 곧 두 가지 중요한 문제를 깨달았다.
- 소셜 네트워크 공유 : 루트별로 OGP 태그를 변경할 수 없었습니다.그 결과, 소셜 네트워크상에서 공유되고 있는 경우, 베이스 루트(OGP 태그로 올바르게 설정)만이 카드를 생성할 수 있습니다(트위터 용어). 공유되고 있는 다른 루트는 기본적으로 공백으로 표시됩니다.이것은 Facebook과 LinkedIn에도 해당됩니다.여기 보세요.
- 검색 엔진 최적화: SPA를 올바르게 탐색하여 인덱싱을 수행할 수 있는 검색 엔진에 대한 기사는 거의 없었지만, 제 경험으로는 만족스럽지 못했습니다.예를 들어 Google의 경우 홈페이지만 인덱싱되어 있고 올바르게 구문 분석되지 않았습니다.개별 요소에서 분리된 제목이 서로 연결됩니다.빙, 색인화 안 한 것 같아.Google의 검색 콘솔을 사용하여 홈 페이지를 색인화했기 때문에 Google 색인화되었을 수 있습니다.새 페이지마다 수동으로 인덱스를 다시 작성해야 하거나 페이지를 업데이트한 후 인덱스를 다시 작성해야 하는 경우에는 실행 가능한 솔루션이 아닙니다.
Create-React-App : SPA 작성에 매우 편리한 부트스트래퍼 도구입니다.
Gatsby / React - Static : Create - React - App create produces produces produces produces produces produces produces produces produces produces produces produces produces producesHTML 빌드 출력을 생성하므로 "렌더링 전"이 됩니다.나는 아직 이것을 실험하지 않았다.취득 후 로컬로 변경하는 것이 아니라 HTML 내의 다른 OGP 태그가 스태틱사이트 서버(S3/Azure Blobs/Github Pages)에서 서비스되게 되었기 때문에 (1)과 (2)가 해결되기를 기대합니다.이것이 효과가 있을지 아직 확실하지 않다.여기서 추가적인 장점은 Gatsby가 빌드 시간 동안 이미 프리렌더링을 하기 때문에 사용자는 더 나은 성능을 경험할 수 있다는 것입니다.(개츠비에게 경험이 있는 사람이 분명히 할 수 있을지도 모릅니다.그렇지 않으면 이 답변은 제가 다 쓴 후에 수정하겠습니다.)업데이트 (2018년 2월 19일) : (1)은 Gatsby.js에 의해 정적 웹사이트로 호스팅된 상태에서 해결되었음을 확인할 수 있습니다.
Next.js: Gatsby가 (1)과 (2)를 해결하지 못하면 Next.js는 완전한 SSR 앱을 만들기 위한 나의 폴백이 될 것이다.여기서의 문제는, 정적인 사이트 호스팅 서비스(Azure Blob, AWS S3, Github Pages) 대신에, PaaS 를 사용해 사이트(Azure Web Apps, AWS ElasticBeanStalk, Heroku 등)를 호스트 하는 것입니다.이렇게 하면 CI/CD 파이프라인을 설정하는 데 다소 비용이 많이 들고 작업이 더 많아집니다.
CRA 의 메뉴얼에 기재되어 있는 이러한 대체 방법을 참조해 주세요.
저는 최근에 이 주제에 대해 많은 조사를 했습니다. 특히 Create-React-App vs Gatsby.js. 두 툴 모두 셋업에 대해 크게 걱정하지 않고 리액트 코드를 바로 쓸 수 있다는 것을 알게 되었습니다.다만, 예를 들면, Gatsby는, 그 외에, 빌드시에 서버측의 렌더링을 제공하고 있습니다.이것은 SEO에 있어서 매우 중요합니다.Next.js는 빌드 시 이미 완료되었기 때문에 뷰를 렌더링하는 데 서버가 필요하지 않습니다.사용자가 웹 사이트를 방문하면 HTML 버전이 먼저 로드되고 Javascript가 로드되면 웹 사이트가 완전히 기능하는 리액트 웹 앱이 됩니다.
좋은 점은 이 모든 계층이 동일한 뷰 레이어를 공유하기 때문에 툴 간에 이동할 수 있다는 것입니다.create-react-app에서 Gatsby.js로 이동하는 것을 확인할 수 있습니다.
이 연구는 제가 직접 하고 있어요.Next.js는 서버 사이드 렌더링을 바로 제공하는 것으로 알고 있습니다.React App 생성은 이 작업을 수행하지 않으므로 SSR용 솔루션을 제공해야 합니다(예: 빠른 페이지 로드 및 SEO).
create-filength-app은 많은 학습 곡선을 이용할 수 있기 때문에 웹 사이트와 모바일 앱(네이티브 앱 포함) 구축에 최적입니다.다른 두 가지는 반응 프레임워크입니다.
Gatsby를 사용하여 한 페이지 웹사이트를 보다 빠르고 쉽게 전개할 수 있습니다.REST API를 사용할 때 Next.js를 사용합니다(아마도...)
좋은 개발자는 항상 쉽고 빠른 작업을 위해 자신의 길을 찾습니다.
언급URL : https://stackoverflow.com/questions/46009836/when-to-use-a-react-framework-such-as-next-or-gatsby-vs-create-react-app
'programing' 카테고리의 다른 글
| wordpress에서 캐시를 사용하지 않도록 설정하는 방법 (0) | 2023.03.27 |
|---|---|
| 출력을 JSON으로 직렬화하는 중 - ValueError: 순환 참조가 탐지됨 (0) | 2023.03.17 |
| Woocommerce 카테고리 미리 보기 가져오기 (0) | 2023.03.17 |
| Angularjs:$routeProvider에서 'resolve'를 사용할 때 loading-icon을 표시하는 방법은 무엇입니까? (0) | 2023.03.17 |
| React PropTypes: 하나의 프로포트에 대해 다양한 유형의 PropType 허용 (0) | 2023.03.17 |