Por qué debe usar Next.js para obtener los beneficios de React

El desarrollo frontend se ha vuelto muy fácil a lo largo de los años. Tenemos tantas herramientas y marcos que hacen que la codificación sea simple y organizada. Tenemos Vuejs, Angular, jquery, React, etc. Existen tantas opciones que son diferentes en su enfoque.

De todos estos, uno se ha convertido en el más popular: Reactjs. React fue creado en 2013 por un ingeniero de Facebook. Desde entonces, poco a poco ha captado más usuarios cada año. Una de las principales razones de su popularidad es la facilidad de uso. Si conoce javascript, HTML y CSS básicos, no tendrá ningún problema con React.

Puede dividir cada aplicación en diferentes componentes. Cada componente tiene su propia lógica y CSS. Por ejemplo, podría tener una barra de navegación. Puede crear un componente y usarlo a través de su aplicación. Dividir todo en partes más pequeñas es excelente cuando se crean aplicaciones web ricas en UI.

¡Eso no es todo! También obtiene un DOM virtual para una representación rápida, capacidades de prueba sencillas con Jest y capacidades de escalado sencillas. También puede usar React native para crear aplicaciones de Android e IOS fácilmente.

También hay un gran apoyo de la comunidad, e innumerables empresas lo utilizan en su pila de tecnología.

Todo esto suena genial, ¿no? Yo diría que casi todo es perfecto. React usa algo llamado Representación del lado del cliente (CSR). Veamos más de esto en detalle en la siguiente sección.

Representación del lado del cliente

En CSR, la solicitud inicial carga la página, CSS y javascript (sin HTML). La carga inicial de la página es muy lenta, pero se procesa más rápido más adelante. El Javascript luego crea el HTML para que los usuarios vean la página. Esto sucede después de que el navegador ejecuta React. Cuando va a una página diferente, el javascript solicita más información y crea un nuevo HTML. Este HTML se inyecta en el mismo archivo HTML inicial en el div raíz.

Ventajas de la RSE

• Ideal para hacer aplicaciones web. La curva de aprendizaje al principio es excelente para los nuevos desarrolladores.
• Después de la carga inicial, la representación de la página es muy rápida.
• Gran experiencia de usuario.
• Gran apoyo de las bibliotecas. (paquetes NPM)

Contras de la RSE

• Carga inicial muy lenta
• Mal SEO

Representación del lado del servidor

Como sugiere el nombre, el servidor procesa el HTML y lo entrega al navegador. No tienes que esperar tanto tiempo en la carga inicial. Cada página es una llamada separada al servidor.

Dado que toda la página proviene del servidor, los rastreadores de los motores de búsqueda pueden rastrear todo. Cada página puede tener etiquetas meta separadas y palabras clave relacionadas con ella.

Ventajas de RSS

• Carga inicial más rápida
• Muy bueno para sitios estáticos.
• La página inicial es más rápida. El usuario no se preguntará si algo salió mal.

Contras de SSR

• Muchas solicitudes de servidor. Esto también conduce a más costos de servidor.
• CSR tiene una primera carga inicial lenta, pero las posteriores son rápidas. En SSR, las cargas posteriores son las mismas. Porque tienes que hacer nuevas llamadas para cada página.
• Recargas de página completa
• Mala experiencia de usuario en cuanto a interacciones.

¿Entonces, qué debería hacer?

Ambos enfoques tienen sus pros y sus contras, como vimos anteriormente. Si usa CSR, no podrá hacer SEO. Cuando comparte su contenido, obtendrá las mismas etiquetas meta que su página principal. Será casi imposible clasificar sus páginas en Google, incluso con la ayuda de un mapa del sitio.

Si usa SSR, probablemente perderá mucho dinero en los costos del servidor y su usuario tendrá una mala experiencia.

SEO y buena UX son imprescindibles en esta época. El SEO lleva a los usuarios a su sitio web. Una buena UX hará que los usuarios regresen a su sitio web. No deberías tener que sacrificar uno por el otro. Afortunadamente, hay un salvador por ahí.

Siguiente.js

Si conoces React, conoces a NextJS. Esto se debe a que Next es un marco React.

Tienes componentes como en React. CSS tiene una convención de nomenclatura diferente, pero ese es el mayor cambio. La razón por la que Next es tan bueno es porque te da opciones. Si desea que una página tenga un buen SEO, puede usar ServerSideProps. Si desea usar CSR, puede usar UseEffect para llamar a sus API, como React.

Agregar mecanografiado a su proyecto Next también es muy simple. Incluso tiene un enrutador incorporado y no tiene que usar el enrutador React. La opción de elegir entre CSR, SSR y SSG es lo que hace que Next sea el mejor. Incluso obtienes una prueba gratuita en Vercel para su próximo proyecto.

Pasar de React a Next.js

Ahora que está convencido de que debe usar Next.js, es posible que se pregunte cómo cambiar su sitio web existente a Next. Next.js está diseñado para una adopción gradual. Migrar de React a Next es bastante sencillo y se puede hacer lentamente agregando gradualmente más páginas.

Puede configurar su servidor para que todo lo que esté debajo de una subruta específica apunte a la aplicación Next.js. Si su sitio es abc.com, puede configurar abc.com/about para servir una aplicación Next.js. Esto ha sido muy bien explicado en el Documentos de Next.js .

Es posible que desee migrar desde Gatsby para obtener los beneficios mencionados anteriormente, como diferentes estrategias de obtención de datos para diferentes páginas. Puedes usar esto guía para migrar a Next.js desde Gatsby.

Durante la migración, es probable que las cosas salgan mal. CSS podría estropearse en los dispositivos móviles. Algunas rutas pueden no funcionar. Es posible que obtenga errores 404 en páginas esenciales. Es por eso que debe recibir comentarios constantes de sus usuarios mientras realiza la migración. Puedes hacer esto con Discord, DesarrolloRev o Holgura. De esta manera, si hay un problema, puede recibir una notificación directamente del usuario.

Pensamientos finales

Si desea atraer más usuarios a su sitio web de forma orgánica, no puede usar React solo. Los enfoques de SSR sacrifican la experiencia de los usuarios. En su lugar, debe usar Next.js para obtener los beneficios de React con opciones para SSR, SSG y CSR. Pasar a Next.js es simple y se puede hacer de forma incremental.