NEXT.JS 14: Server Actions, React Server Components,
NEXT.JS 14: Server Actions, React Server Components, Paginación y MÁS!
#NEXT.JS #Server #Actions #React #Server #Components
“midulive”
Learn Next.JS 14 From URL synchronization to data manipulation and database interaction, this journey will immerse you in the complexities of modern web development. Discover optimization strategies, security practices and participate in the community Transform your understanding of web development now! 🚀💻 ▶ Don’t miss more live shows in: 00:00:00 – Introduction 00:02:11 – Explaining what we have done 00:09:21 – Let’s move our little hands 00:10:25 – Working with Invoices Page 00: 12:31 – Status in the ULR: Information worth millions 00:14:24 – Server Rendering and Initial Loading 00:15:05 – Capturing user input 00:16:05 – Creating a URL to sync with the input and URL 00:16:49 – How to use SearchParams? 00:20:04 – Update the URL 00:21:08 – Test input and URL synchronization 00:21:59 – Synchronize the initial state 00:23:43 – Displaying the information 00:24:38 – Show results according to our search 00:27:47 – Questions from the community 00:28:51 – Explanation of what we did 00:31:42 – Is the Key good practice? 00:32:05 – searchParams on the server and client 00:32:34 – Doing a Debounce 00:37:52 -…
source
To see the full content, share this page by clicking one of the buttons below |
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.
Grande Midu muchas gracias por el video. Me quede pendiente de ver como maneja los errores del Zod >:/,
Muchas gracias por todo lo que haces midu
Cómo han trabajado los roles en sus sistemas ? Todos los tutos que he visto solo hacen referencia a un rol definido hardcorde como admin pero ninguno es dinámico que puedas guardar en la base de datos
Que bien explicas todo, haces parecer que es fácil. Gracias por todo el contenido midu<3
Grande Midu!!!! Todos los días veo tu contenido, no solo que me mantengo al día con avances y chismes, sino que también aprendo mucho… Vivan los server actions!!!!
gracias por la aclaración de los server actions y sus ventajas y desventajas, asi como dejar claro, que son una opción no una obligación
Excelente, muchas gracias. 🤙 ¿Podría hacer un tutorial de NEXT JS 14 con Apollo Client?
Estaba haciendo un buscador y me estaba costando hacerlo , ahora ya puedo terminarlo , muchas gracias midu
Gracias por este video!!!
Nms apenas aprendi next 13
Maldita seaaaaa
midu que recomiendas con next , redux o redux toolkit
Grande midu, en español nadie explica mejor que él 🫡
Helllooo