Funciones nuevas en Next.js 12
El 26 de octubre de 2021, Next js anunció la versión 12. Fue más impresionante que los nuevos anuncios de MacBook de Apple, que son bastante alucinantes teniendo en cuenta que es solo un marco de JavaScript gratuito.
Están poniendo el listón muy alto para lo que se espera que haga un marco JavaScript de pila completa, como ahora se envía con un compilador oxidado en lugar de JavaScript para brindarle compilaciones 5 veces más rápidas.
Lo bueno es que no necesitas saber mucho. Simplemente, hace que next sea más rápido bajo el capó al reemplazar a babel, lo cual es importante porque las aplicaciones grandes y complejas tienden a tener tiempos de compilación lentos. Echemos un vistazo a todas las funciones nuevas próximas 12 y, lo que es más importante, por qué querría usarlas.
Middleware
La primera característica de la que quiero hablar es el middleware. El middleware no es un marco de concepto nuevo, ya que express js usa middleware para interceptar una solicitud HTTP y procesarla de alguna manera antes de que vaya a su controlador de ruta real.
Con algo como next js, aunque las cosas son un poco más complicadas. Por un lado, desea que su sitio web sea realmente rápido y la mejor manera de lograrlo es almacenar en caché las páginas HTML preconstruidas en un CDN.
Pero cuando haces eso, pierdes la capacidad de hacer que tus páginas sean dinámicas.
Entonces, en el otro extremo del espectro, tiene una representación del lado del servidor que usa un servidor de nodo para obtener datos de una base de datos o API cuando llega una solicitud entrante, pero eso es lento e ineficiente en un mundo perfecto, aunque los desarrolladores tendrían tanto velocidad como contenido dinámico al mismo tiempo.
Y next realmente está liderando el camino para que eso suceda Vercel La compañía detrás de next tiene un producto llamado funciones de borde. Estas son funciones sin servidor como AWS lambda o las funciones de la nube de Google, excepto que se implementan en el borde como un CDN para que sus usuarios finales obtengan una ejecución extremadamente rápida sin arranques en frío. Ahora aquí es donde entra el middleware.
En su proyecto, cree un archivo llamado _middleware en el directorio de páginas desde dentro. Puede exportar una función llamada middleware. Esta función le dará acceso a la solicitud entrante y le permitirá modificarla y se ejecutará antes de que se realice la representación para cada página en el directorio de páginas.
También puede abarcar el middleware a subdirectorios si solo desea que se ejecute en un subconjunto de páginas. Lo increíble del middleware es que hace que su código sea eficiente.
Soporte para React Concurrent Mode
Next 12 brinda soporte para el modo concurrente React como suspenso. Si no está familiarizado con el suspenso, es básicamente un componente que le permite esperar datos asincrónicos antes de representar a sus hijos a partir de hoy, todavía es experimental en React. Pero todavía se usa en producción en algunos sitios web como Facebook.
Sin embargo, si intenta usarlo a continuación, se producirán errores porque no funciona bien en el servidor. En los próximos 12, puede optar por funciones concurrentes experimentales. Para que estas funciones funcionen con la representación del lado del servidor, también es compatible con React Lazy para importar dinámicamente módulos ES que pueden reducir el tamaño de su paquete de JavaScript del lado del cliente.
React Server Component
Ahora bien, esta característica podría ser la que más me entusiasme con los componentes del servidor React, los componentes del servidor le permiten renderizar HTML de forma nativa desde los componentes React en el servidor.
Sin embargo, lo loco de esto es que usa transmisión HTTP para renderizar progresivamente una página web en un servidor, lo que significa que si necesita datos para un componente y luego otro componente, después de eso, no tiene que esperar uno tras otro, se renderizará el primero, luego el siguiente después de ese, lo que realmente abre un mundo completamente nuevo de posibilidades cuando se trata de diseñar aplicaciones web de pila completa.
Para usar un componente de servidor en su aplicación, puede cambiar la página o el nombre del archivo a. server.js para decirle al marco que es un componente de servidor cuando este componente se procesa, no requiere JavaScript del lado del cliente, lo que significa menos KB para el final. Usuario para descargar.
Además, puede obtener datos directamente dentro del componente sin tener que usar funciones como obtener accesorios estáticos u obtener accesorios del lado del servidor. Es una forma realmente ergonómica de construir una aplicación. Utiliza patrones de reacción de principio a fin o de servidor a cliente. Ahora querrá algo de JavaScript interactivo para el cliente, de modo que también pueda importar componentes regulares del cliente y se procesarán universalmente tanto en el servidor como en el cliente.
URL Import
Hay una característica interesante más que querrá conocer: ahora puede importar módulos usando URL en lugar de NPM. Esto funciona para los módulos de JavaScript que importaría desde un CDN, pero también puede usar URL remotas en su CSS o para importar imágenes directamente en su JavaScript. código.
