Razzle: 누가 Razzle을 사용하고 있습니까?

그냥 가지고 놀아 주지만 초보자 용 create-react-app과 Next 등과 같은 완전한 프레임 워크 사이의 격차를 정확히 채우고 있습니다.
더 많은 항목을 넣고 기본값을 선택하려는 유혹이 클 수 있으므로 이러한 방식으로 유지되기를 바랍니다.

저는 대행사에서 일하고 있으며 현재 대규모 공개 반응 사이트의 프로덕션에서 Razzle을 사용하고 있습니다. 나는 말할 수 없지만 우리가 그것을 생산 / 대규모로 사용하고 있고 그것을 좋아하고 있음을 표현하고 싶었습니다.

나는 회사가 없기 때문에 생산 사용 사례는 일급 비밀이 아니며 응용 프로그램도 작습니다. 아직 완전히 완료되지는 않았지만 구현 된 기능은 잘 작동합니다. Facebook Searcher 라고하며 현재 양식을 사용하여 사용자에 대한 맞춤 검색을 쉽게 할 수 있습니다. Search is Back에서 영감을 얻었습니다

@jaredpalmer 원한다면 쇼케이스 섹션에이 애플리케이션을 추가 할 수 있습니다. 그러나 현재 상태에서는 정적 사이트 일 수도 있으므로 성능면에서 더 좋습니다.

저는 그것을 제 학생의 최종 프로젝트를위한 출발점으로 사용하고 있습니다. 나는 청소년을 어려움에 처하게하고 그들 중 0 명으로부터 주니어 풀 스택 웹 개발자를 만드는 NGO에서 가르칩니다. 그들은 모든 것을 이해하지만 도구에 익숙하지 않기 때문에 Razzle은 모든 것을 연결해야하는 것을 환영합니다.

개인적인 차원에서 이것은 아이디어를 테스트하는 가장 빠른 방법이며 타이프 스크립트와 잘 작동하는 동형 렌더링의 실제 실행 가능한 유일한 시나리오입니다.

감사합니다!

Google VM에 설치된 razzle을 사용하는 가난한 사람은 최신 js 개발을 이해하고 배우려고 노력합니다.

새로운 VOD Platform Facets Edge에 대해 Untitled Kingdom 에서 Razzle을 사용하고 있습니다.
Facets Edge는 NGO 파트너 Facets를 위한 새로운 서비스입니다.
전 세계의 예술과 독립 영화에 관한 것입니다. 현재 클로즈 베타 단계에 있지만 관심이 있으시면 저에게 연락하여 무료 평가판에 액세스하십시오.

Datnoid 는 최고의 암호

Razzle 및 Docker를 사용하여 GKE에 배포합니다. Google kubernetes 엔진.

Thorgate 는 Razzle을 사용하여 SPA 프로젝트를 구축하고 있습니다.

멋진 것들. 계속해.

razzle 및 afterjs 는 굉장합니다!, 저는 razzle, afterjs, typescript, rematch, react-router로 빌드 된 HackerNews 클론을 범용 렌더링 으로 만듭니다. razzle-hackernews

YOLO Technology는 현재 SAAS 제품에 Razzle을 사용하고 있습니다.

확인 해봐! https://bossjob.ph

https://www.totalmilk.com 우산의 새롭고 예정된 프로젝트는 razzle (node, graphql, mongodb)로 구축되었습니다.

프로덕션 앱
https://payme.totalmilk.com/
https://hauler.totalmilk.com/

베타 앱
https://payroll-beta.totalmilk.com
https://principal-beta.totalmilk.com
https://docs.totalmilk.com/

곧 메인 웹 사이트 https://www.totalmilk.com 도 전환됩니다.

Podchaser는 몇 주 전부터 프로덕션에 razzle을 사용하고 있습니다 : https://www.podchaser.com

우리는 더 나은 코드 분할 및 트리 쉐이킹을 위해 모든 코드를 모듈화하는 프로세스의 일부로 전환하면서 모든 것을 서버 렌더링합니다. 빌드 프로세스를 많이 단순화하는 데 도움이되었습니다!

https://github.com/jaredpalmer/razzle/issues/971 참조

우리는 Grain Discovery에서 반짝이는 새 웹 사이트를 위해 razzle을 사용하고 있습니다 . 지난주에 올라 왔습니다 :

우리는 : https://www.noritex.com/es/

FotonTech 는 https://confy.app 에서 사용하고
내부적으로 수행 한 것과 동일한 접근 방식을 따르는 오픈 소스 저장소가 있습니다. https://github.com/FotonTech/golden-stack

Influence Grid에서 사용하고 있습니다 : https://www.influencegrid.com/

CloudHospital이 방금 사용하기 시작했습니다.
Https://icloudhospital.com
우리는 next.js로 시작했지만 최근에 이것으로 옮겼습니다.

내 모든 프로젝트, 대부분 Docker의 로컬 소규모 웹 페이지에 razzle을 사용합니다.

내가 시작하는 모든 프로젝트의 기본 설정 : https://github.com/fivethreeo/razzle-with-docker-nginx

https://teleport.us 우리는 그것을 사용하고 있습니다

https://www.yespleasemeals.com/ 및 https://www.factor75.com에서 사용

우리는 그것을 사용하고 있습니다, 새로운 소셜 미디어 앱 https://ecency.com

나는 razzle을 nextjs (내 손에 많은 시간을 보냈다)와 비교하면서 결정을 내리는 동안이 노트를 썼습니다. 누군가를 도울 수 있기 때문에 여기에 게시 할 것이라고 생각했습니다. 게시하기에 적절한 장소가되기를 바랍니다.

저는 2 개의 브랜치에서 동시에 https://www.memory.com (중간 크기의 CRA SPA, SEO가 좋지 않고 페이지가 많음)를 리팩토링했습니다.

1) react-router-6-beta (이전 리팩터링 후 고정됨)를 사용한 razzle,
2) nextjs

현재 생산량과 비교하려면 :
v.0) 사용자 정의 사전 렌더링 솔루션 (해커 : 캐시 누락시 요청시 chromedp 인라인 회전, html 제공, 차이로 인해 수화물 대신 렌더링, UA = google / bing 등의 경우에만, 크론이 0.5M 페이지를 사전 렌더링하는 경우) 시계-높은 유지 보수)

앱 개요 :

CRA 바닐라의 총 9MB JS 빌드 (코드 분할 포함-~ 7MB 제외)
프런트 엔드 TSX LOC : 118k
1826 부품
최대 500,000 개의 프런트 엔드 활성 페이지 (대부분 사용자 생성 콘텐츠)
단일 진입 점

내가 찾은 것은 :

1) Razzle
-플러그 앤 플레이, server.tsx 및 client.tsx를 제외하고 코드 재 작성 없음
-쉬운 설정; 하지만 올바른 DOM 조정으로 제대로하기 위해 : 많은 시행 착오-사용자 정의 웹팩 SPA를 실행하는 것과 유사한 어려움
-react-router로 다음보다 훨씬 더 조정 가능
-필요할 때마다 CRA 인 / 아웃으로 쉽게 교체 가능, 동일한 저장소에서 CRA 실행 가능
-@ loadable / server를 사용하여 즉시 코드 분할
-SSR 마크 업을 수화와 쉽게 조정
-제로 잠금
-구성이 흔들리고 깨지기 쉬우 며 고치기 어렵다고 느낍니다.

2) NextJS
-i18n, Link 및 Trans 는 대규모 리팩토링이 필요했습니다.
-/ pages 구조는 꽤 우스꽝스럽고, PHP MVC를 생각 나게합니다.-현재 매개 변수가 작동하려면 많은 해커가 필요했습니다. 나는 많은 일을했지만 지점을 숨길 바래
-아마도 괜찮은 문서이지만 어쨌든 스택 오버플로가 많이 발생합니다.
-경로가 많은 SPA 단일 항목 앱에 대한 열악한 개발 경험, 주문형 페이지 구축은 고통 스럽습니다. dev box에서의 e2e 테스트도 고통 스럽습니다.-아마도 당신은 그것을 미리 구축하도록 구성 할 수 있습니다-나는 그것을 따뜻하게하기 위해 bash로 모든 페이지를 컬링하지 않고는 방법을 찾을 수 없습니다.
-잘못된 코드 분할로 인해 번들이 총 16MB가됩니다.
-SSR과 하이드 레이션을 조화시키는 악몽 (머티리얼 UI)
-하지만, 당신이 신뢰하는 것이 있습니다. 실 시작이 효과가 있다는 것을 알고 있습니다.
-다음에서 꺼내기위한 Codemod는 작성하기가 너무 어렵고, Trans 및 Link 는 자동화하기에는 너무 비효율적입니다. 따라서 수동 찾기-교체 인 유일한 출구에 묶여 있습니다.

전반적으로 "dynamic"이있는 nextjs와 최선의 노력은 @loadable을 사용하는 Razzle에 비해 정말 무거운 앱을 출력하는 것입니다.

나는 nextjs가 홈페이지에서 77의 페이지 속도를 이길 수 없습니다. JS 총 다운로드 525kb, Razzle 98 페이지 속도 332kb (둘 다 공격적인 분할 사용)

Razzle, 나는 내가 좋아하는 방식으로 코드를 분할하고 JS 총 332kb로 98 페이지 속도로 만들 수 있습니다.

일반적으로 next가있는 다른 화면은 탐색과 다음으로 첫 번째 히트를 모두 수행 할 때 훨씬 더 큰 페이로드를 갖습니다.

Nextjs는 기본 구성으로 공유 번들에 많은 쓰레기를 넣습니다.

NextJS-자동 프리 페치는 위험 해 보입니다. 수동으로 비활성화하지 않고 모든 왼쪽 탐색 링크를로드하는 것은 초기 렌더링 후 거대하고 부적절한 페이로드입니다. 또한 / pages 만 프리 페치하며 특정 구성 요소를 프리 페치하도록 지시 할 수 없습니다.

Razzle +로드 가능한 서버 + onMouseEnter = {component.preload} (RAF 콜백 포함) = 우수하지만 유지 관리 부담이 더 큽니다.

기본적으로 razzle은 총알처럼 작동하는 CRA의 대체품이라는 것을 알고 있습니다.

nextjs 브랜치를 삭제하고 Razzle을 프로덕션으로 가져 오기를 희망합니다.

편집-기본적으로 Next로 유용한 모든 작업을 수행하려면 어쨌든 사용자 정의 서버가 필요하므로 Razzle을 사용하면 아직 nextjs에서 요점을 볼 수 없습니다. 독단적 인 API.

Razzle 성공 사례를 들어서 반갑습니다. :) 고도로 구성 가능한 것이 Razzle의 목표입니다. 더 많은 플러그인과 문서가 있어야하지만 더 많은 기여자가 필요합니다. 당분간 모든 것은 나에게 달려 있습니다. 버스 팩터는 1atm입니다.

Razzle과 함께 큰 성공 사례가 있습니다.

우리는 이제 Razzle을 사용하여 App Store, Play Store, Web 및 Web Installable에 있습니다.

Cordova 위에서 실행되는 razzle 내부에 별도의 빌드를 만들었습니다.
https://apps.apple.com/us/app/noritex/id1556098652

우리가 알아 내지 못한 유일한 문제는 다음과 같습니다.

razzle 구성에서 client.js를 변경하여 client.standalone.js를 사용하는 방법이 있습니까?

웹 및 iOS 앱용으로 두 개의 개별 빌드 프로세스를 만들려고합니다.

우리가 한 방법은 다음과 같습니다 : https://nesbtesh.medium.com/pwas-one-code-base-3-app-stores-30cecbee07b7