Razzle: Iniciar una nueva aplicación

Creo que todos estarían de acuerdo en que la respuesta correcta sería que esto depende de lo que usted y su nuevo proyecto necesiten.

Hasta donde sé, Next.js es un marco completo que se puede usar opcionalmente como parte del ecosistema ZEIT. o plataforma?. Mientras que Razzle es mucho más minimalista. Por lo tanto, no incluye funciones que quizás no necesite, pero también es cierto que no incluye funciones que puede necesitar o que eventualmente necesitará.

También había considerado usar Next.js antes, pero había algunos pequeños detalles que me irritaban. Por ejemplo, Next.js no minimiza la salida HTML correctamente (sé que esto no es tan importante en absoluto, pero fue un factor decisivo para mí). También usa styled-jsx y CSS-in-JS, pero prefiero Styled Components . Además, para mi nuevo proyecto no necesitaba enrutamiento (todavía 😄).

Finalmente y afortunadamente después de probar un montón de proyectos de ejemplo, terminé encontrando y usando Razzle. En realidad, comencé con la creación de un proyecto de ejemplo llamado Razzle Material UI Styled Example que incluye algunos módulos y funciones que necesito. Así que ahora puedo trabajar en mi nuevo proyecto casi sin vergüenza. Siéntase libre de usar el repositorio mencionado si necesita las mismas características o algunas de ellas.

Gracias @knipferrc

Una experiencia similar me llevó a crear Razzle.

Hace aproximadamente 6 meses, comencé una gran aplicación con Next.js justo después de que salió y la rotación fue demasiado para mí. Literalmente envié el PR para el ejemplo de enrutamiento parametrizado (es decir /user/:id ). Recuerdo que perdí una semana entera de trabajo debido a un extraño error relacionado con activar getInitialProps en los cambios de ruta . Al final del día, Next.js toma muchas decisiones muy importantes para usted (es decir, enrutamiento, obtención de datos, estructura de carpetas y estilo). Si estos son buenos o malos depende completamente del tipo de aplicación que esté creando. Al final resultó que, en realidad no necesitaba que el servidor renderizara cada ruta (solo como 2), quería estados de carga del cliente en lugar de recargas de página completa, y no quería destruir el árbol de estado global entre cambios de ruta. Eso, junto con mi opinión de que React-Router 4 es lo mejor desde el pan rebanado, significaba que Next.js no era la opción adecuada para el proyecto.

Buscando algo más estable, me mudé al proyecto kyt de NYT. Esto fue suficiente durante aproximadamente ~2 meses, pero 1) los tiempos de compilación se volvieron increíblemente lentos (>45 s) a medida que la aplicación crecía, 2) las reglas SCSS de kyt no eran las adecuadas para el proyecto y 3) encontré el registro de kyt (con la increíble cantidad de emoji) bastante molesto. Así que decidí comenzar a trabajar en un reemplazo más delgado y rápido para kyt, pero con HMR universal y una API de configuración similar a Next.js create-react-app-ssr , por así decirlo.

Una vez que todo estuvo dicho y hecho, me di cuenta de que había creado un sistema de compilación casi independiente del marco y que este nivel de abstracción era más adecuado para las necesidades de mi proyecto. Por "marco agnóstico", me refiero a que Razzle funcionará al 100 % con Angular, Vue, Rax, Preact, Inferno, React-XP, RN-Web, Reason-React y, _lo más importante para mí_, lo que venga después. En mi humilde opinión, la adaptabilidad es el diferenciador clave entre Razzle y casi todo lo demás que he visto. Con Razzle, puede leer sobre algo en una publicación de blog, crear una bifurcación, agregar un sistema de compilación paralelo/configuración de paquete web/transformación de babel y simplemente intentarlo . ¿Por qué? Porque, a diferencia de Next, Razzle no es un marco y, a diferencia de CRA, Razzle le permite aumentar la configuración subyacente sin bifurcarla. Eso es enorme para la forma en que aprendo, enseño, experimento y hago negocios.

La flexibilidad y el agnosticismo de Razzle ya han valido la pena para mí y para mi equipo:

• Cambiamos gradualmente nuestra aplicación de flujo parcial a 100 % TypeScript al cambiar menos de 10 líneas de código en razzle.config.js .
• Sin siquiera intentarlo, Razzle se ha convertido en la forma más rápida de iniciar un proyecto ReasonReact (SSR o SPA).

En cuanto al futuro de Razzle. Hace dos días, "agregar compatibilidad con SSR a CRA" se mencionó como una de las 15 tareas principales en la hoja de ruta del equipo de React Core. Si se agrega compatibilidad con SSR a CRA, es posible que Razzle ya no necesite existir... _y estoy totalmente de acuerdo con eso_. Sin embargo, hasta que eso suceda, Razzle avanzará como una herramienta de construcción independiente del marco para JavaScript universal renderizado por servidor.

¡¡Guau!! Muchas gracias chicos por las increíbles respuestas.

Hola Jared, no tengo muy claro cómo usar Razzle para convertir un proyecto SPA Angular en SSR.
¿Me puede dar una pista o una guía sobre cómo hacer eso? Muchas gracias.

+1 para una solución Razzle Angular. https://github.com/jaredpalmer/razzle/issues/1109