Iniciar un nuevo proyecto de React

Definitivamente puedes usar React sin un framework; así es como usarías React para una parte de tu página. Sin embargo, si estás creando una nueva aplicación o un sitio completamente con React, te recomendamos que uses un framework.

Aquí esta el porqué.

Incluso si no necesitas enrutamiento u obtención de datos al principio, es probable que desees agregar algunas bibliotecas para ello. A medida que tu paquete de JavaScript crece con cada nueva función, es posible que debas descubrir cómo dividir el código para cada ruta individualmente. A medida que tus necesidades de obtención de datos se vuelven más complejas, es probable que encuentres cascadas de red servidor-cliente que hacen que tu aplicación se sienta muy lenta. A medida que tu audiencia incluye más usuarios con malas condiciones de red y dispositivos de gama baja, es posible que debas generar HTML a partir de tus componentes para mostrar el contenido antes, ya sea en el servidor o durante el tiempo de compilación. Cambiar tu configuración para ejecutar parte de su código en el servidor o durante la compilación puede ser muy complicado.

Estos problemas no son específicos de React. Esta es la razón por la que Svelte tiene SvelteKit, Vue tiene Nuxt, etc. Para resolver estos problemas por tu cuenta, deberás integrar tu paquete con tu enrutador y con tu biblioteca de obtención de datos. No es difícil hacer que funcione una configuración inicial, pero hay muchas sutilezas involucradas en hacer una aplicación que se cargue rápidamente incluso a medida que crece con el tiempo. Querrás enviar la cantidad mínima de código de la aplicación, pero hacerlo en una sola petición de ida y vuelta entre el cliente y el servidor, en paralelo con los datos necesarios para la página. Es probable que desees que la página sea interactiva incluso antes de que se ejecute tu código JavaScript, para admitir la mejora progresiva. Es posible que desees generar una carpeta de archivos HTML completamente estáticos para tus páginas de marketing que se pueden alojar en cualquier lugar y seguir funcionando con JavaScript deshabilitado. Desarrollar estas capacidades por tu cuenta requiere mucho trabajo.

Los frameworks de React en esta página resuelven problemas como estos de forma predeterminada, sin trabajo adicional de tu parte. Te permiten comenzar de manera muy sencilla y luego escalar tu aplicación según tus necesidades. Cada framework de React tiene una comunidad, por lo que es más fácil encontrar respuestas a las preguntas y actualizar las herramientas. Los frameworks también brindan estructura a tu código, ayudándote a ti y a otros a retener el contexto y las habilidades entre diferentes proyectos. Por el contrario, con una configuración personalizada es más fácil quedarte atascado en versiones de dependencia no admitidas, y esencialmente terminarás creando tu propio framework, aunque uno sin comunidad o ruta de actualización (y si es algo como los que hemos hecho en el pasado, diseñado al azar).

Si tu aplicación tiene restricciones inusuales que estos frameworks no cumplen bien o prefieres resolver estos problemas tú mismo, puedes implementar tu propia configuración personalizada con React. Toma react y react-dom de npm, configura tu proceso de compilación personalizado con un paquete como Vite o Parcel y agrega otras herramientas a medida que las necesites para el enrutamiento, la generación estática o el renderizado del lado del servidor, y más.

El paquete App Router de Next.js implementa completamente la especificación oficial de los componentes del servidor React. Esto te permite combinar componentes compilados, solo de servidor e interactivos en un solo árbol de React.

Por ejemplo, puedes escribir un componente React solo para el servidor como una función «asincrónica» que es leída desde una base de datos o desde un archivo. Luego puedes pasar datos desde allí a tus componentes interactivos:

// Este componente se ejecuta *solo* en el servidor (o durante la compilación).
async function Talks({ confId }) {
  // 1. Estás en el servidor, así que puedes hablar con tu capa de datos. No se requiere punto final de API.
  const talks = await db.Talks.findAll({ confId });

  // 2. Agrega cualquier cantidad de lógica de representación. No harás que tu paquete de JavaScript sea más grande.
  const videos = talks.map(talk => talk.video);

  // 3. Pasa los datos a los componentes que se ejecutarán en el navegador.
  return <SearchableVideoList videos={videos} />;
}

El App Router de Next.js también integra obtención de datos con Suspense. Esto te permite especificar un estado de carga (como un esqueleto) para diferentes partes de tu interfaz de usuario directamente en tu árbol React:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Los Componentes del Servidor y Suspense son funcionalidades de React, no funcionalidades de Next.js. Sin embargo, adoptarlos a nivel del framework requiere compromiso y un trabajo de implementación no trivial. Por el momento, el App Router de Next.js es la implementación más completa. El equipo de React está trabajando con los desarrolladores de paquetes para que estas características sean más fáciles de implementar en la próxima generación de frameworks.