Fundamentos

Rutas

En Next.js, las rutas estáticas y dinámicas son formas de definir cómo se accede a diferentes páginas en tu aplicación. Aquí tienes una explicación breve y ejemplos de cada tipo:

Rutas Estáticas

Las rutas estáticas son aquellas que tienen una URL fija y predefinida. Estas rutas se definen mediante archivos en la carpeta pages de tu proyecto Next.js.

Ejemplo:

  • Archivo: pages/about.js

  • URL: /about

// pages/about.js
export default function About() {
  return <div>About Page</div>;
}

Rutas Dinámicas

Las rutas dinámicas permiten crear páginas cuyas URLs pueden variar según parámetros. Estas rutas se definen utilizando corchetes [] en el nombre del archivo.

Ejemplo:

  • Archivo: pages/posts/[id].js

  • URL: /posts/1, /posts/2, etc.

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <div>Post ID: {id}</div>;
}

Rutas Dinámicas Anidadas

También puedes tener rutas dinámicas anidadas, donde múltiples segmentos de la URL pueden ser dinámicos.

Ejemplo:

  • Archivo: pages/posts/[category]/[id].js

  • URL: /posts/tech/1, /posts/sports/2, etc.

// pages/posts/[category]/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { category, id } = router.query;

  return <div>Category: {category}, Post ID: {id}</div>;
}

Nota: También se puede obtener el nombre del segmento de ruta dinamica via props

En Next.js, los corchetes con tres puntos ([...categories]) en una ruta dinámica definen un segmento de captura o una ruta dinámica opcional que puede abarcar múltiples partes de la URL.

Características:

  1. Captura múltiple: Acepta una o varias partes de la ruta.

    • Ejemplo: /products/shoes o /products/shoes/nike

  2. Parámetro como array: El valor capturado estará disponible como un array.

    • Ejemplo: Si la URL es /products/shoes/nike, entonces categories será ['shoes', 'nike'].

  3. Ruta opcional: La ruta puede ser sin parámetros adicionales.

    • Ejemplo: /productsEn este caso será resuelta si hay un page.tsx en la pruta products de lo contrario si solo hay el page.tsx en /products/[...categories]/page.tsx , no será resuelta la ruta /products para lograr eso se necesitan los dobles corchetes.

Ejemplo:

/app/products/[...categories]/page.js

  • /products/shoes → categories = ['shoes']

  • /products/shoes/nike → categories = ['shoes', 'nike']

  • /products → categories = undefined (o un array vacío dependiendo de la configuración).

Se utiliza para manejar rutas flexibles o jerárquicas con facilidad.

También se pueden usar los dobles corchetes. En Next.js, [[...categories]] define una ruta dinámica opcional con captura múltiple, lo que significa que el segmento puede estar presente o no.

Diferencias con [...categories]:

  • Opcionalidad: Si no hay segmentos en la URL, la ruta sigue siendo válida.

  • Si la ruta es /products, categories será undefined (en lugar de requerir al menos un segmento).

Ejemplo:

/app/products/[[...categories]]/page.js

  • /products → categories = undefined

  • /products/shoes → categories = ['shoes']

  • /products/shoes/nike → categories = ['shoes', 'nike']

Esto se usa para manejar rutas donde los segmentos adicionales son opcionales.

Layouts

En Next.js 14, los layouts son una característica fundamental que permite estructurar la interfaz de manera más modular y reutilizable. En este contexto, los layouts definen la estructura o el "esqueleto" común de la página, como encabezados, barras laterales o pies de página, y se integran perfectamente con el sistema de enrutamiento de Next.js.

¿Qué son los layouts en Next.js 14?

  1. Layouts anidados: Next.js 14 permite que los layouts sean anidados y específicos para ciertas partes de la aplicación. Por ejemplo, puedes tener un layout general para toda la aplicación y otro layout específico para un área administrativa.

  2. Persistencia entre rutas: Los layouts permanecen montados mientras se navega entre rutas que comparten el mismo layout. Esto mejora el rendimiento y evita la pérdida de estado en componentes como menús abiertos o pestañas seleccionadas.

  3. Server Components: Con el soporte para Server Components, los layouts pueden usarse para renderizar contenido en el servidor y enviar al cliente únicamente lo necesario, optimizando el rendimiento.

Cómo afectan los layouts a las rutas en Next.js 14

En Next.js 14, los layouts se definen en el sistema de directorios bajo la carpeta /app. El lugar donde colocas el archivo layout.js afecta directamente a las rutas que lo utilizan.

  1. Layouts globales:

    • Si colocas un archivo layout.js directamente dentro de la carpeta /app, este se aplicará a todas las rutas de la aplicación.

    • Por ejemplo:

      /app/layout.js

      Se aplica a:

      /home
/about
/dashboard

  2. Layouts específicos por secciones:

    • Si colocas un archivo layout.js dentro de una subcarpeta, este solo se aplicará a las rutas que estén bajo esa carpeta.

    • Por ejemplo:

      /app/dashboard/layout.js

      Se aplica a:

      /dashboard
/dashboard/settings
/dashboard/profile

      Pero no se aplica a rutas como /about o /home.

  3. Layouts anidados:

    • Puedes combinar layouts globales con layouts específicos.

    • Por ejemplo:

      /app/layout.js         -> Layout general
/app/dashboard/layout.js -> Layout para dashboard

      Aquí, una ruta como /dashboard/settings usaría tanto el layout global como el layout específico del dashboard.

  4. Combinación con páginas:

    • Los layouts funcionan en conjunto con archivos page.js. Cada layout renderiza su contenido en un componente children, que incluye la página correspondiente.

Ejemplo práctico

Estructura de carpetas:

/app
  layout.js            // Layout global
  /dashboard
    layout.js          // Layout para el dashboard
    page.js            // Página principal del dashboard
    /settings
      page.js          // Página de configuración dentro del dashboard

Cómo funciona:

  • La página /dashboard/settings:

    • Usará primero layout.js de /app como layout global.

    • Luego, aplicará layout.js de /dashboard como layout específico.

Ventajas de los layouts en Next.js 14

  1. Reutilización: Reduce la duplicación de código al centralizar la estructura común.

  2. Escalabilidad: Facilita la organización en aplicaciones grandes con muchas secciones.

  3. Optimización de rendimiento: Los layouts montados no se descargan innecesariamente al cambiar de ruta, mejorando la experiencia del usuario.

Con estas capacidades, los layouts en Next.js 14 son una herramienta poderosa para construir aplicaciones estructuradas y eficientes.

Componentes

En Next.js 14, los Server Components (componentes del servidor) y los Client Components (componentes del cliente) tienen roles y comportamientos diferentes, optimizados para sus respectivos contextos.

Server Components

  1. Qué son:

    • Se renderizan en el servidor y envían HTML estático al cliente.

    • No incluyen JavaScript en el cliente, por lo que son más livianos y rápidos.

  2. Características:

    • Acceso directo a datos del servidor (bases de datos, APIs, etc.) sin exponer credenciales al cliente.

    • Ideal para contenido que no necesita interactividad.

    • Mejor rendimiento inicial y SEO.

  3. Cuándo usarlos:

    • Para renderizar datos estáticos o dinámicos que no requieren interacción del usuario.

    • Ejemplo: encabezados, pies de página, o listas estáticas de productos.

  4. Cómo declararlos:

    • Son el comportamiento por defecto en la carpeta /app.

    • No necesitan la directiva "use client".

Client Components

  1. Qué son:

    • Se renderizan en el cliente y necesitan JavaScript para funcionar.

    • Permiten manejar estados e interactividad.

  2. Características:

    • Pueden usar hooks de React como useState y useEffect.

    • Adecuados para componentes que dependen de eventos del usuario.

  3. Cuándo usarlos:

    • Para elementos interactivos como formularios, botones o sliders.

    • Ejemplo: un carrito de compras, un botón "me gusta", o un modal dinámico.

  4. Cómo declararlos:

    • Necesitan la directiva "use client" al inicio del archivo.

Comparación: Cuándo usar cada uno

Aspecto

Server Components

Client Components

Renderización

En el servidor, entrega HTML estático.

En el cliente, requiere JavaScript.

Interactividad

No interactivo.

Interactivo (usa eventos, hooks).

Rendimiento

Más rápido para carga inicial.

Más lento debido a JavaScript.

Estado/Side Effects

No maneja estado ni efectos secundarios.

Maneja estado y efectos secundarios.

SEO

Excelente para SEO.

Menos óptimo por depender de JS.

Ejemplo mixto

// Server Component (por defecto en /app)
export default function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

// Client Component
"use client";
import { useState } from "react";

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? "Unlike" : "Like"}
    </button>
  );
}

Aquí, ProductList usa datos estáticos, mientras que LikeButton maneja interactividad en el cliente. Combinar ambos tipos mejora la eficiencia y la experiencia del usuario.

Una buena practica es agregar use client solo a los elementos que lo requieran, recordar que puden combinarse como el ejemplo anterior y si el componente client es cliente todos sus hijos lo serán.

Route Grouping

En Next.js, el grouping (agrupación) es una funcionalidad que permite organizar rutas y estructuras de carpetas sin que estas afecten la URL final de la aplicación. Esto se logra mediante el uso de directorios de grupo de rutas, que se indican colocando el nombre de la carpeta entre paréntesis.

¿Qué es un directorio de grupo de rutas?

Es un directorio que se utiliza únicamente para organizar el código y que no forma parte de la URL. Los directorios de grupo están delimitados por paréntesis ( ).

Características clave:

  1. No afectan la URL:

    • Los directorios con paréntesis no se reflejan en la ruta final.

  2. Organización del código:

    • Facilitan estructurar archivos y componentes de forma lógica, especialmente en aplicaciones grandes.

  3. Compatibilidad:

    • Se pueden combinar con otras características como layouts, páginas y componentes.

Ejemplo: Cómo funciona

Estructura de carpetas:

/app
  /(admin)
    dashboard
      page.js
  /shop
    product
      page.js

URLs resultantes:

  • /dashboard → Renderiza /(admin)/dashboard/page.js.

  • /shop/product → Renderiza /shop/product/page.js.

Aquí, el directorio (admin) es solo organizativo y no aparece en la URL.

Ventajas del grouping:

  1. Organización modular:

    • Divide funcionalidades como áreas administrativas, secciones públicas, o dominios específicos.

  2. Estructuración más clara:

    • Hace que el código sea más mantenible y fácil de navegar sin afectar la experiencia del usuario.

  3. Facilita la reutilización:

    • Puedes agrupar componentes o layouts que comparten lógica o estilo.

Casos comunes de uso

  1. Áreas específicas de la aplicación:

    • Agrupar rutas de administrador, usuario, o clientes sin exponer esa estructura en las URLs.

  2. Reutilización de layouts o middleware:

    • Aplicar un layout específico a todas las rutas dentro de un grupo sin afectar el diseño general de la aplicación.

Esta técnica es muy útil para mantener un balance entre estructura del proyecto y simplicidad en las URLs.

Pages vs App

En Next.js, la introducción de la carpeta app representa un cambio significativo en la forma de estructurar y manejar las aplicaciones. Tradicionalmente, Next.js utilizaba la carpeta pages para definir las rutas y componentes de la aplicación. Sin embargo, con la introducción de la carpeta app, Next.js ofrece una nueva forma de estructurar aplicaciones que proporciona más flexibilidad y características avanzadas.

Carpeta pages

La carpeta pages es la forma tradicional de definir rutas y componentes en Next.js. Cada archivo en la carpeta pages se convierte automáticamente en una ruta accesible en la aplicación.

Ejemplo de Estructura con pages:

/pages
  index.js
  about.js
  /blog
    index.js
    [id].js

Rutas Generadas:

  • /

  • /about

  • /blog

  • /blog/[id]

Carpeta app

La carpeta app es una nueva forma de estructurar aplicaciones en Next.js que ofrece más flexibilidad y características avanzadas, como el uso de React Server Components, layouts anidados, y más.

Ejemplo de Estructura con app:

/app
  layout.js
  page.js
  /about
    page.js
  /blog
    page.js
    /[id]
      page.js

Rutas Generadas:

  • /

  • /about

  • /blog

  • /blog/[id]

Diferencias Clave entre pages y app

  1. React Server Components: La carpeta app permite el uso de React Server Components, lo que puede mejorar el rendimiento y la experiencia del usuario al permitir que partes de la aplicación se rendericen en el servidor.

  2. Layouts Anidados: La carpeta app permite definir layouts anidados de manera más intuitiva. Puedes tener un layout principal y layouts específicos para diferentes secciones de la aplicación.

  3. Estructura de Archivos: La carpeta app utiliza una estructura de archivos más flexible y modular. Por ejemplo, puedes tener archivos layout.js y page.js en cada carpeta para definir layouts y páginas específicas.

  4. Configuración y Personalización: La carpeta app ofrece más opciones de configuración y personalización, lo que permite una mayor flexibilidad en la forma de estructurar y manejar la aplicación.

Conclusión

La introducción de la carpeta app en Next.js ofrece una nueva forma de estructurar aplicaciones que proporciona más flexibilidad y características avanzadas. Mientras que la carpeta pages sigue siendo una opción válida y compatible, la carpeta app permite aprovechar nuevas tecnologías y mejoras en el rendimiento y la experiencia del usuario. La elección entre usar pages o app dependerá de las necesidades específicas de tu proyecto y de las características que desees utilizar.

React Server Components (RSC) y Static Generation (SG)

React Server Components (RSC) y Static Generation (SG) son dos conceptos diferentes en el ecosistema de Next.js y React, y no se sustituyen mutuamente. En cambio, pueden complementarse para ofrecer una experiencia de desarrollo y rendimiento mejorada. Aquí te explico cada uno y cómo pueden trabajar juntos:

React Server Components (RSC)

React Server Components es una nueva característica de React que permite que los componentes se ejecuten en el servidor en lugar de en el cliente. Esto tiene varias ventajas:

  1. Menor Tamaño del Bundle: Al ejecutar componentes en el servidor, se reduce el tamaño del bundle de JavaScript que se envía al cliente, lo que puede mejorar el tiempo de carga inicial.

  2. Mejor Seguridad: Los componentes del servidor no exponen lógica sensible al cliente, lo que puede mejorar la seguridad de la aplicación.

  3. Mejor Rendimiento: Al ejecutar componentes en el servidor, se puede aprovechar la potencia de procesamiento del servidor y reducir la carga en el cliente.

Static Generation (SG)

Static Generation es una característica de Next.js que permite generar páginas HTML estáticas en el momento de la compilación. Estas páginas estáticas pueden ser servidas directamente desde un CDN, lo que puede mejorar significativamente el rendimiento y la escalabilidad de la aplicación.

  1. Mejor Rendimiento: Las páginas estáticas se generan una vez y se sirven rápidamente desde un CDN.

  2. Escalabilidad: Las páginas estáticas no requieren procesamiento en el servidor en cada solicitud, lo que puede manejar un mayor número de usuarios simultáneos.

  3. SEO: Las páginas estáticas son fáciles de rastrear para los motores de búsqueda, lo que puede mejorar el SEO.

Cómo Pueden Complementarse

React Server Components y Static Generation pueden complementarse para ofrecer una experiencia de desarrollo y rendimiento mejorada. Aquí hay algunas formas en que pueden trabajar juntos:

  1. Generación de Páginas Estáticas con RSC: Puedes usar React Server Components para generar páginas estáticas en el momento de la compilación. Esto permite aprovechar las ventajas de RSC (menor tamaño del bundle, mejor seguridad) mientras aún se beneficia del rendimiento y la escalabilidad de las páginas estáticas.

  2. Hibridación: Puedes usar una combinación de React Server Components y Static Generation en diferentes partes de tu aplicación. Por ejemplo, puedes usar RSC para componentes que requieren lógica del servidor y SG para páginas que pueden ser completamente estáticas.

  3. Incremental Static Regeneration (ISR): Next.js también ofrece Incremental Static Regeneration, que permite actualizar páginas estáticas después de la compilación. Esto puede complementar RSC al permitir que las páginas estáticas se actualicen con nuevos datos sin necesidad de una recompilación completa.

Ejemplo de Uso Combinado

// pages/index.js
import { getStaticProps } from 'next';
import ServerComponent from '../components/ServerComponent';

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Home Page</h1>
      <ServerComponent data={data} />
    </div>
  );
};

export const getStaticProps = async () => {
  const data = await fetchData(); // Fetch data from an API or database
  return {
    props: {
      data,
    },
  };
};

export default HomePage;

En este ejemplo, getStaticProps se utiliza para generar una página estática en el momento de la compilación, mientras que ServerComponent puede ser un React Server Component que se ejecuta en el servidor.

Un ejemplo mas completo

Claro, aquí tienes un ejemplo de cómo usar getStaticPaths, getStaticProps y React Server Components en una página de blog dinámica en Next.js. Este ejemplo asume que tienes una API o una base de datos que proporciona los datos del blog.

Estructura de Archivos

/pages
  /blog
    /[id]
      page.tsx
/components
  BlogPost.tsx

pages/blog/[id]/page.tsx

import { GetStaticPaths, GetStaticProps } from 'next';
import BlogPost from '../../../components/BlogPost';

interface BlogPostProps {
  post: {
    id: string;
    title: string;
    content: string;
  };
}

const BlogPostPage: React.FC<BlogPostProps> = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <BlogPost content={post.content} />
    </div>
  );
};

export const getStaticPaths: GetStaticPaths = async () => {
  // Fetch all blog post IDs from an API or database
  const response = await fetch('https://api.example.com/blog-posts');
  const posts = await response.json();

  const paths = posts.map((post: { id: string }) => ({
    params: { id: post.id },
  }));

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { id } = params!;

  // Fetch the blog post data from an API or database
  const response = await fetch(`https://api.example.com/blog-posts/${id}`);
  const post = await response.json();

  return {
    props: {
      post,
    },
  };
};

export default BlogPostPage;

components/BlogPost.tsx

import React from 'react';

interface BlogPostProps {
  content: string;
}

const BlogPost: React.FC<BlogPostProps> = ({ content }) => {
  return (
    <div>
      <p>{content}</p>
    </div>
  );
};

export default BlogPost;

Explicación

  1. getStaticPaths: Esta función se utiliza para generar todas las rutas posibles para las páginas de blog. Fetcha todos los IDs de los posts del blog desde una API o base de datos y devuelve un array de objetos params que contienen los IDs.

  2. getStaticProps: Esta función se utiliza para obtener los datos específicos de un post de blog en función del ID proporcionado por getStaticPaths. Fetcha los datos del post desde una API o base de datos y devuelve los datos como props para la página.

  3. React Server Component: En este ejemplo, BlogPost es un componente que recibe el contenido del post como prop y lo renderiza. Aunque en este ejemplo BlogPost es un componente de cliente, podrías convertirlo en un React Server Component si necesitas ejecutar lógica en el servidor.

Conclusión

Este ejemplo muestra cómo combinar getStaticPaths, getStaticProps y React Server Components para crear una página de blog dinámica en Next.js. Al usar getStaticPaths y getStaticProps, puedes generar páginas estáticas en el momento de la compilación, lo que mejora el rendimiento y la escalabilidad de tu aplicación. Los React Server Components pueden ser utilizados para ejecutar lógica en el servidor y reducir el tamaño del bundle de JavaScript enviado al cliente.

getServerSideProps

En las nuevas versiones de Next.js, especialmente con la introducción de la carpeta /app y React Server Components, el uso de getServerSideProps ha cambiado. Aunque getServerSideProps sigue siendo compatible y útil en la carpeta /pages, su relevancia y uso pueden variar dependiendo de la estructura de tu proyecto y las necesidades específicas de tu aplicación.

getServerSideProps en /pages

getServerSideProps sigue siendo una opción válida y útil en la carpeta /pages. Se utiliza para obtener datos en el servidor en cada solicitud, lo que es útil para páginas que necesitan datos frescos y no pueden ser generadas estáticamente.

Ejemplo en /pages:

// pages/blog/[id].tsx
import { GetServerSideProps } from 'next';
import BlogPost from '../../components/BlogPost';

interface BlogPostProps {
  post: {
    id: string;
    title: string;
    content: string;
  };
}

const BlogPostPage: React.FC<BlogPostProps> = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <BlogPost content={post.content} />
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  const { id } = params!;

  // Fetch the blog post data from an API or database
  const response = await fetch(`https://api.example.com/blog-posts/${id}`);
  const post = await response.json();

  return {
    props: {
      post,
    },
  };
};

export default BlogPostPage;

/app y React Server Components

En la carpeta /app, Next.js introduce una nueva forma de manejar el renderizado del lado del servidor utilizando React Server Components. Esto permite una mayor flexibilidad y mejores capacidades de renderizado del lado del servidor sin necesidad de getServerSideProps.

Ejemplo en /app:

// app/blog/[id]/page.tsx
import BlogPost from '../../../components/BlogPost';

interface BlogPostProps {
  params: {
    id: string;
  };
}

const BlogPostPage: React.FC<BlogPostProps> = async ({ params }) => {
  const { id } = params;

  // Fetch the blog post data from an API or database
  const response = await fetch(`https://api.example.com/blog-posts/${id}`);
  const post = await response.json();

  return (
    <div>
      <h1>{post.title}</h1>
      <BlogPost content={post.content} />
    </div>
  );
};

export default BlogPostPage;

Comparación y Uso

  1. getServerSideProps en /pages:

    • Ventajas: Familiaridad y compatibilidad con versiones anteriores.

    • Desventajas: Menos flexible y puede ser más difícil de manejar en aplicaciones grandes.

  2. React Server Components en /app:

    • Ventajas: Mayor flexibilidad, mejor rendimiento y capacidades avanzadas de renderizado del lado del servidor.

    • Desventajas: Nuevo paradigma que puede requerir un tiempo de aprendizaje.

Conclusión

getServerSideProps sigue siendo útil y relevante en la carpeta /pages, especialmente para proyectos que ya están utilizando esta estructura o que necesitan una solución rápida y compatible. Sin embargo, para nuevos proyectos o para aprovechar las nuevas capacidades de Next.js, la carpeta /app y React Server Components ofrecen una solución más moderna y flexible.

La elección entre usar getServerSideProps en /pages o React Server Components en /app dependerá de las necesidades específicas de tu proyecto y de tu familiaridad con las nuevas características de Next.js.

Server Actions

En Next.js 13+ (incluyendo la versión 14), las Server Actions son una característica que permite manejar lógica del lado del servidor directamente desde componentes React. Esto simplifica la interacción entre el cliente y el servidor al eliminar la necesidad de crear rutas API separadas para realizar acciones del lado del servidor.

¿Qué son las Server Actions?

Las Server Actions son funciones que se ejecutan exclusivamente en el servidor y se pueden invocar directamente desde componentes React. Están diseñadas para manejar tareas como:

  • Enviar formularios.

  • Interactuar con bases de datos.

  • Ejecutar lógica de negocio en el servidor.

Con Server Actions, puedes escribir código del servidor en un entorno controlado sin preocuparte por exponerlo al cliente.

¿Cómo funcionan?

  1. Declaración de una Server Action:

    • Se utiliza la función especial server proporcionada por Next.js para definir una Server Action.

    • Deben ser declaradas como funciones asíncronas.

    Ejemplo de una Server Action:

    "use server";

async function saveData(formData) {
  // Aquí puedes interactuar con la base de datos o APIs del servidor.
  await db.save(formData);
  console.log("Datos guardados:", formData);
}

export default saveData;

  2. Uso en Componentes React:

    • Las Server Actions se pueden invocar directamente desde componentes React.

    • Por ejemplo, se usan comúnmente con formularios.

    Ejemplo con un Formulario:

    import saveData from "./actions/saveData";

export default function MyComponent() {
  async function handleSubmit(formData) {
    await saveData(formData);
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" placeholder="Name" required />
      <button type="submit">Save</button>
    </form>
  );
}

  3. Flujo de Ejecución:

    • Cuando el usuario envía el formulario, el navegador realiza una solicitud POST.

    • Next.js procesa la acción en el servidor usando la función definida en saveData.

Ventajas de las Server Actions

  1. Eliminan la necesidad de rutas API personalizadas:

    • Antes, para guardar datos, necesitabas una ruta en /api.

    • Ahora, puedes manejar esta lógica directamente desde componentes React.

  2. Mantienen la seguridad:

    • El código de las Server Actions solo se ejecuta en el servidor. No se incluye en el bundle del cliente.

  3. Simplifican el desarrollo:

    • Menos pasos para interactuar con el servidor.

    • Mejor integración con formularios y lógica del lado del servidor.

  4. Mejor rendimiento:

    • Reducen la sobrecarga al evitar crear rutas adicionales o manejar respuestas HTTP manualmente.

Limitaciones

  1. Soporte en /app: Las Server Actions funcionan exclusivamente en la carpeta /app.

  2. Compatibilidad con estado del cliente: Las Server Actions no pueden interactuar directamente con librerías que gestionan estado del cliente (como Redux).

  3. No se puede usar con useEffect: No están diseñadas para ser invocadas desde efectos React.

Casos de Uso Común

  • Guardar datos en un formulario.

  • Realizar operaciones CRUD directamente en el servidor.

  • Validar entradas del usuario antes de almacenarlas.

PreviousNext Js

Last updated