Razzle: 새 앱 시작

나는 이것이 당신과 당신의 새로운 프로젝트에 필요한 것에 달려 있다는 것이 정답이라는 데 모두가 동의할 것이라고 생각합니다.

내가 아는 한 Next.js는 ZEIT 생태계의 일부로 선택적으로 사용할 수 있는 완전한 프레임워크입니다. 또는 플랫폼?. 반면 Razzle은 훨씬 더 미니멀합니다. 따라서 여기에는 필요하지 않은 기능이 포함되어 있지 않지만 필요할 수도 있고 결국에는 필요할 수도 있는 기능이 포함되어 있지 않은 것도 사실입니다.

나는 또한 Next.js를 사용하는 것을 고려했지만 나를 짜증나게 하는 몇 가지 작은 세부 사항이 있었습니다. 예를 들어 Next.js는 HTML 출력을 적절하게 축소하지 않습니다. 또한 styled-jsx CSS-in-JS를 사용하지만 저는 Styled Components 를 선호합니다. 게다가 내 새 프로젝트의 경우 라우팅이 필요하지 않았습니다(아직 😄).

마지막으로 운 좋게도 많은 예제 프로젝트를 테스트한 후 Razzle을 찾아 사용하게 되었습니다. 실제로 저는 필요한 몇 가지 모듈과 기능을 포함하는 Razzle Material UI Styled Example 이라는 예제 프로젝트를 만드는 것으로 시작했습니다. 이제 거의 뻔뻔하게 새 프로젝트를 진행할 수 있습니다. 동일한 기능 또는 그 중 일부가 필요한 경우 언급된 저장소를 자유롭게 사용하십시오.

@knipferrc 감사합니다

비슷한 경험을 통해 Razzle을 만들게 되었습니다.

약 6개월 전에 Next.js가 나온 직후 거대한 앱을 시작했는데 앱 이탈이 너무 커서 감당하기 어려웠습니다. 말 그대로 매개변수화된 라우팅 예제(예: /user/:id )에 대한 PR을 제출했습니다. 경로 변경 시 getInitialProps를 실행하는 것과 관련된 이상한 버그로 인해 일주일 내내 작업을 잃었다는 것을 기억합니다. 하루가 끝나면 Next.js는 라우팅, 데이터 가져오기, 폴더 구조 및 스타일 지정과 같은 매우 중요한 결정을 많이 내립니다. 이것들이 좋은지 나쁜지는 전적으로 당신이 구축하는 애플리케이션의 종류에 달려 있습니다. 결과적으로 저는 실제로 모든 단일 경로(2개만)를 서버 렌더링할 필요가 없었고 전체 페이지를 다시 로드하는 대신 클라이언트 로드 상태를 원했으며 경로 변경 사이에 전역 상태 트리를 파괴하고 싶지 않았습니다. 그것은 React-Router 4가 얇게 썬 빵 이후로 최고라는 제 의견과 함께 Next.js가 프로젝트에 적합하지 않다는 것을 의미했습니다.

더 안정적인 것을 찾다가 NYT의 kyt 프로젝트로 옮겼습니다. 이것은 약 2개월 동안 충분했지만 1) 앱이 성장함에 따라 빌드 시간이 엄청나게 느려졌고(>45초), 2) kyt의 SCSS 규칙이 프로젝트에 적합하지 않았고, 3) kyt의 로깅을 찾았습니다. 미친 양의 이모티콘) 꽤 짜증납니다. 그래서 나는 kyt에 대한 더 얇고 빠른 대체 작업을 시작하기로 결정했지만, 범용 HMR과 Next.js-- create-react-app-ssr 와 유사한 구성 API를 사용합니다.

모든 것을 말하고 완료하고 나면 거의 프레임워크에 구애받지 않는 빌드 시스템을 만들었으며 이 수준의 추상화가 내 프로젝트의 요구 사항에 더 적합하다는 것을 깨달았습니다. "프레임워크에 구애받지 않는"이라는 말은 Razzle이 Angular, Vue, Rax, Preact, Inferno, React-XP, RN-Web, Reason-React 및 _가장 중요한 것은_ 다음에 나오는 모든 미친 것들이 100% 작동한다는 것을 의미합니다. IMHO, 적응성은 Razzle과 내가 본 거의 모든 것 사이의 주요 차별화 요소입니다. Razzle을 사용하면 블로그 게시물에서 무언가에 대해 읽고, 포크를 만들고, babel-transform/webpack config/parallel 빌드 시스템을 추가 하고 시도해볼 수 있습니다. 왜요? Next와 달리 Razzle은 프레임워크가 아니며 CRA와 달리 Razzle을 사용하면 분기하지 않고 기본 구성을 보강할 수 있습니다. 그것은 내가 배우고, 가르치고, 실험하고, 사업을 하는 방식에 있어서 매우 중요합니다.

Razzle의 유연성과 불가지론은 이미 나와 내 팀에 도움이 되었습니다.

• razzle.config.js 에서 10줄 미만의 코드를 변경하여 부분적으로 흐름에서 100% TypeScript로 앱을 점진적으로 옮겼습니다.
• 시도조차 하지 않고 Razzle은 ReasonReact 프로젝트(SSR 또는 SPA)를 부트스트랩하는 가장 빠른 방법이 되었습니다.

Razzle의 미래에 관해서. 이틀 전 "CRA에 SSR 지원 추가"가 React Core 팀의 로드맵에서 상위 15개 할 일에 언급되었습니다. SSR 지원이 CRA에 추가되면 Razzle이 더 이상 존재할 필요가 없을 수도 있습니다..._그리고 나는 그것에 대해 완전히 멋집니다_. 하지만 그렇게 될 때까지 Razzle은 서버에서 렌더링된 범용 JavaScript를 위한 프레임워크에 구애받지 않는 빌드 도구로 앞으로 나아갈 것입니다.

와!! 멋진 답변들 정말 감사합니다.

안녕하세요 Jared, 저는 Razzle을 사용하여 SPA Angular 프로젝트를 SSR로 변환하는 방법을 잘 모르겠습니다.
어떻게 하는지 힌트나 지침을 주시겠습니까? 정말 고맙습니다.

Razzle Angular 솔루션의 경우 +1입니다. https://github.com/jaredpalmer/razzle/issues/1109