Cómo usar las acciones del servidor Next.js

La versión 13.4 de Next.js vino con un enrutador de aplicaciones estable y la capacidad de realizar mutaciones de datos con acciones del servidor. Esta característica es un cambio de juego absoluto porque le permite realizar mutaciones de datos completamente desde los componentes del servidor. Esto genera una gran cantidad de beneficios en áreas como la velocidad, la seguridad y el rendimiento general de la aplicación.

Aprenda qué son las acciones del servidor y cómo usar esta nueva función en su aplicación Next.js.

¿Qué son las acciones del servidor?

Las acciones del servidor le permiten escribir funciones únicas del lado del servidor junto con los componentes de su servidor. Esto es enorme porque ya no necesita escribir rutas API al enviar formularios o realizar cualquier otro tipo de mutación de datos, incluido Mutaciones de datos de GraphQL.

Puede tener funciones que se ejecutan en su servidor y luego puede llamarlas desde los componentes del cliente o del servidor. Esta es una función alfa en Next.js 13.4 y está construida sobre React Actions. El uso de acciones del servidor conduce a una reducción del JavaScript del lado del cliente y puede ayudarlo a crear formularios mejorados progresivamente.

Ejemplo de acciones del servidor

Con las acciones del servidor, puede realizar mutaciones dentro de Next.js, en el servidor. Eche un vistazo a esta nueva función con una página de ejemplo de Next.js que muestra un formulario que le permite crear una publicación.

Estas son las importaciones:

importar Enlace de"siguiente/enlace"
importar Grupo de formularios de"@/componentes/FormGroup"
importar { revalidar etiqueta } de"siguiente/caché"
importar { redirigir } de"siguiente/navegación"

Ahora el código para crear la publicación. Esta función es una acción del servidor; se ejecuta en el servidor y envía el título y el cuerpo de la publicación a la API (que crea la publicación en la base de datos):

asíncronofuncióncrearPublicar(datos) {
"usar servidor"
constante titulo = datos.get("título")
constante cuerpo = datos.obtener("cuerpo")
esperar buscar(" http://127.0.0.1/posts", {
 encabezado: {"Tipo de contenido": "aplicación/json"},
 método: POST,
 cuerpo: JSON.stringify({título, cuerpo})
 })
 revalidarTag("publicaciones")
 redirigir ("/")
}

Esta función obtiene el título y el cuerpo de la publicación que luego envía al /posts punto final a través de una solicitud POST. Luego obliga al caché a actualizar el contenido asociado con la etiqueta "publicaciones" y lo redirige a la página de inicio.

Aquí hay un formulario para recopilar el título y el cuerpo de la nueva publicación:

exportarpor defecto NuevoPostForm() {
devolver (





"título">Título</label>
"texto" nombre="título" identificación ="título" />
 </FormGroup>
 </div>




"título">Cuerpo</label>
"texto" name=<span>"cuerpo"</span> id=<span>"cuerpo"</span>> <span><span><<span>área de texto</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Guardar <<span>/button></span><br> <<span>/div></span><br> <<span>/formulario></span><br> )<br>}<br>  <p>Puedes ver que el formulario no contiene ninguna lógica relacionada con la creación de la publicación, solo una acción de formulario: la función <strong>createPost()</strong>. Recuerde que la función createPost tiene la directiva "usar servidor" que declara que todo en ese debe ejecutarse en el servidor.</p> <p>Todo el código se ejecuta en el servidor y su cliente no sabe nada sobre eso Esto se debe a que el formulario es un componente del servidor y no hay nada que se represente dinámicamente en el cliente.</p> <p>Cuando hace clic en el botón <strong>Guardar</strong>, Next.js llama a <strong>createPost()</strong> función. Esto envía el título y el cuerpo como datos de formulario, que se publican en la API local para guardar la información.</p> <h2 id="revalidating-the-post"> Revalidación de la publicación </h2> <p>En la parte inferior de la función <strong>createPost()</strong> se encuentra la siguiente línea de código:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /código> </code></pre> <p>Para entender lo que hace esa función, imagina que tienes una página de publicaciones. Dentro del componente de publicaciones, llamarías a una función llamada <strong>getPosts()</strong> para obtener todas las publicaciones de tu base de datos y presentarlas para que el usuario las vea:</p> <pre> <code><span>exportar</span> <span>predeterminado</span> <span>async</span> <span><span>función</span> <span>Publicaciones</span>() span>{<br> <span>const</span> publicaciones = <span>esperar</span> getPosts()</span></code><p><code> <span>return</span> (<br> <div>
<br> {posts.map(<span><span>post</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>La función <strong>getPosts()</strong> se vería así:</p> <pre> <code><span>async</span> <span><span>función</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>esperar</span> buscar (<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> siguiente: {<span>etiquetas</span>: [<span>"publicaciones"</span>], <span>revalidar</span>: <span>3600</span> }<br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Esta función pasa la opción <strong>siguiente</strong> a buscar, lo que le permite establecer un período de revalidación. De forma predeterminada, cada solicitud de recuperación que realiza dentro del componente del servidor se almacena en caché para siempre. Hacer un seguimiento de la memoria caché y actualizarla cuando sea necesario es una parte importante de <span>la obtención de datos en Next.js</span>.</p> <p>El código anterior le dice a Next.js que almacene en caché los datos de <strong>publicaciones</strong> durante hasta una hora (3.600 segundos). Después de una hora, los datos se vuelven obsoletos y Next.js los actualiza para obtener los datos más recientes de la base de datos.</p> <p>Recuerde que la función <strong>createPost()</strong> llama a <strong>revalidateTag("posts")</strong> una vez que ha terminado el resto de su trabajo. Esto obliga a Next.js a recuperar esos datos que deberían incluir la nueva publicación que acaba de crear la aplicación.</p> <h2 id="prueba-de-que-su-código-se-ejecuta-en-el-servidor"> Prueba de que su código se está ejecutando en el servidor </h2> <p>Para estar seguro de que todo el código se está ejecutando en el servidor, puede agregar la siguiente declaración de registro de la consola dentro del Función <strong>createPost()</strong>:</p> <pre> <code><span>consola</span>.log(<span>"Ejecutándose en el servidor"</span>)</code> </pre> <p>Luego, intente crear una nueva publicación haciendo clic en el botón Enviar. Si su código se está ejecutando en el servidor, ese mensaje de registro aparecerá en su terminal. Pero si se está ejecutando en el cliente, el registro se mostrará en la consola del navegador.</p> <p>Esto hace que sea seguro poner datos confidenciales información como variables ambientales, conexiones de base de datos y contraseñas en el servidor sin temor a que quede expuesto a la cliente. Luego puede <span>leer las cadenas de su archivo .env</span> en su aplicación Next.js.</p> <p>Puede desea reservar el uso de acciones del servidor para versiones de Next.js posteriores a la 13.4, especialmente en producción. Pero aún es muy emocionante ver a dónde va esta función, ya que está constantemente impulsando lo que puede hacer al mover más y más cosas al servidor. Debería hacer que sus aplicaciones de cliente sean más fáciles de escribir y que el proceso de desarrollarlas sea mucho más agradable.</p> <h2 id="aprender-más-sobre-migrar-a-next-js"> Más información sobre migrar a Next .js</h2> <p>Muchos desarrolladores front-end usan React para el desarrollo de UI. Pero gracias a funciones como la representación del lado del servidor y la generación de sitios estáticos, muchos de estos desarrolladores están migrando sus aplicaciones para usar Next.js. Esta migración es muy sencilla, ya que React es bastante similar a la sintaxis de Next.js.</p> <p>El rendimiento adicional y la mejora de la seguridad requieren aún más la migración. La capacidad de tener componentes del lado del servidor, junto con las nuevas acciones del servidor que acabamos de cubrir, hace que Next.js sea una opción más segura y eficaz en comparación con React simple. Como desarrollador de React, debe aprender a migrar su aplicación a Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>