NEXT.JS 14: Server Actions, React Server Components, Paginación y MÁS!
El equipo de Next.js ha lanzado la versión 14, que incluye varias características emocionantes para los desarrolladores. Estas nuevas características están diseñadas para mejorar el rendimiento, la escalabilidad y la capacidad de desarrollo de aplicaciones web con Next.js.
Server Actions
Una de las características más destacadas de Next.js 14 es el soporte para Server Actions. Con Server Actions, los desarrolladores pueden ejecutar código del lado del servidor en respuesta a eventos del cliente, como hacer clic en un botón o enviar un formulario. Esto permite realizar operaciones complejas del lado del servidor de forma transparente para el usuario, lo que ayuda a mejorar la experiencia del usuario y el rendimiento de la aplicación.
React Server Components
Otra característica emocionante de Next.js 14 es el soporte para React Server Components. Los componentes del lado del servidor permiten renderizar partes de la interfaz de usuario en el servidor, lo que puede mejorar significativamente el rendimiento de la aplicación al reducir la carga en el cliente. Esta característica es especialmente útil para aplicaciones con una gran cantidad de contenido dinámico y para mejorar la capacidad de respuesta de la aplicación.
Paginación y MÁS!
Además de Server Actions y React Server Components, Next.js 14 también incluye varias mejoras adicionales, como mejoras en la paginación, soporte para la importación dinámica de módulos, y una serie de correcciones de errores y mejoras de rendimiento. Estas características adicionales están diseñadas para hacer que el desarrollo de aplicaciones web con Next.js sea aún más fácil y eficiente.
En resumen, Next.js 14 es una emocionante actualización que introduce varias características nuevas y mejoras significativas para el desarrollo de aplicaciones web. Con soporte para Server Actions, React Server Components, y otras características emocionantes, Next.js 14 está preparado para ayudar a los desarrolladores a crear aplicaciones web de alto rendimiento y escalables de manera más eficiente que nunca.
Buenisimo Midu, gracias. Espero tengas planes de terminar el tutorial de la documentación.
Excelente explicación, muchas gracias por tu esfuerzo compartiendo contenido de calidad!
hey Midu como se llama la extension que usas para el console log en VSCode?
tengo una consulta, despues de realizar el proceso de autenticacion segun la guia, retorna un objeto con los datos del usuario, hay alguna forma de recuperar ese objeto desde cualquier parte de la aplicacion con las configuraciones de next-auth?
como certifico que aprendí next14 con midudev? lo quiero subir a mi cv 🤣
En caso de consumir una API de terceros, creéis que lo recomendable es realizar las peticiones desde una server action o desde el cliente?? por ejemplo, en una paginación de una tabla donde queremos la información actualizada y la info. se consume de un servidor de terceros, no sería más eficiente realizar las peticiones directamente desde el cliente en lugar de hacerlas desde una server action y a continuación pasarle la info al browser del cliente?
Midu, podrías hacer un video sobre integrar plaiceholder con Nextjs 14, realmente estoy teniendo problemas para usar dicha librería con Next… He seguido la doc pero sólo tiene ejemplos con Nextjs 13, por lo que tengo problemas con esta versión de Next asi que agradeceria tu ayuda
Genio midu. Desde Arg!!
Crear prototipos con server actions es una pasada, precisamente porque no tienes que montar una API. ¡Claro, eso supone que te limitas a tener todo empaquetado dentro de la aplicación sin poder comunicarte hacia fuera con la API; Pero vamos!, puedes hacer algo muy rápido, seguro y escalable. Como dice el MIDU, si necesitas una API, simplemente créala.
puedes hacer un custom hook, algo como esto:
import { useSearchParams, useRouter, usePathname } from "next/navigation"
import { useDebouncedCallback } from "use-debounce"
export default function useSearch({keyword, delay=300}) {
const searchParams = useSearchParams()
const { replace } = useRouter()
const pathname = usePathname()
const handleSearch = useDebouncedCallback((term) => {
const params = new URLSearchParams(searchParams)
if (term) {
params.set(keyword, term)
} else {
params.delete(keyword)
}
replace(`${pathname}?${params.toString()}`);
}, delay)
const value = searchParams.get(keyword)?.toString()
return {
value,
handleSearch
}
}
De casualidad el método get de 'searchParams' no devuelve undefined en el primer renderizado ya que al montarse el componente aún las queries del router pueden no estar disponibles?
Esta es la segunda parte?
Server actions deja mucha informacion a los hackers ya que la data se pasa por URL, el cual se rastrea en toda la red y los Apaches o IIS (deben ir por body)
Sin duda alguna, NextJS es hechiceria pura.
Si utilizamos el estado en la url, estamos rerenderizando toda la pagina, es eso optimo?
Excellent este video y tus opiniones de si esta tecnologia es buena , si aplica o no para cada problema como lo dices al final sobre los server actions y server components
Excelente tutorial
Muy bien explicado
para los que no entienden lo de la key del Suspence es porque en la magia de next, lo lleva a client y lo "monta una vez" como todo componente que usualmente creas, si usas un useEffect con dependecia vacia "[]" esto solo se ejecuta una vez o como en classes usabas ComponentDidMount. Para poder ejecutar nuevamente estos "lyfecycles" un truco es cambiar la key dinamicamente tal como lo hace midu. no se recomienda nunca hacer esto porque haces que se renderice por completo todo el componente, lo gracioso es que "en este caso" es lo que deseamos.
Midu en todos tus videos siempre te levantas para acomodarte, supongo por qué te resbalas en tu asiento de piel.
Por qué no usas un cojín o cinturón de seguridad 😅
Me parece que los server action ya si los juntas con arquitectura MVC tienen muchisima potencia con prisma te puedes hacer un controlador validando los datos con zod que midu tiene un tuto genial 😉😉 y en el fichero de actions ya injectas lo que te llegue en el form y al final tienes algo como una 'API' y lo usas en todos los formularios que quieras.