Concepto clave

En SvelteKit, una landing page no es solo un archivo HTML estático, sino un componente dinámico que puede aprovechar tanto el renderizado del lado del servidor (SSR) como la interactividad del cliente. Piensa en ella como la fachada de una tienda: debe ser atractiva al instante (SSR para SEO y carga rápida), pero también permitir que los visitantes interactúen con elementos como formularios o botones (hidratación en el cliente).

La clave está en entender cómo SvelteKit maneja las rutas: cada archivo +page.svelte en el directorio src/routes corresponde a una ruta en tu aplicación. Para una landing page en la raíz, usarías src/routes/+page.svelte. Esto te permite combinar HTML, CSS y lógica de Svelte en un solo lugar, con la ventaja de que SvelteKit optimiza automáticamente el código para rendimiento.

Cómo funciona en la práctica

Vamos a construir una landing page básica paso a paso. Primero, asegúrate de tener un proyecto SvelteKit configurado (puedes crearlo con npm create svelte@latest). Luego, navega a src/routes/+page.svelte—este será el punto de entrada de tu aplicación. Aquí es donde definirás la estructura principal.

Comienza con un diseño simple: un encabezado, una sección hero con un llamado a la acción (CTA), y un pie de página. Usa etiquetas semánticas de HTML5 como <header>, <main>, y <footer> para mejorar la accesibilidad y SEO. En Svelte, puedes añadir estilos directamente en el mismo archivo con una etiqueta <style>, lo que mantiene todo encapsulado.

Código en acción

Aquí tienes un ejemplo funcional de una landing page básica en src/routes/+page.svelte:

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<header>
  <h1>Bienvenido a Mi App</h1>
  <nav>
    <a href="/about">Acerca de</a>
    <a href="/contact">Contacto</a>
  </nav>
</header>

<main>
  <section>
    <h2>Construye algo increíble con SvelteKit</h2>
    <p>Esta landing page usa renderizado del servidor para carga rápida y se hidrata en el cliente para interactividad.</p>
    <button on:click={increment}>
      Clics: {count}
    </button>
    <p>Has hecho clic {count} {count === 1 ? 'vez' : 'veces'}.</p>
  </section>
</main>

<footer>
  <p>© 2023 Mi App. Todos los derechos reservados.</p>
</footer>

<style>
  header {
    background-color: #f0f0f0;
    padding: 1rem;
    text-align: center;
  }
  nav a {
    margin: 0 1rem;
    text-decoration: none;
    color: #333;
  }
  main {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
  }
  button {
    padding: 0.5rem 1rem;
    background-color: #007acc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  footer {
    text-align: center;
    padding: 1rem;
    background-color: #333;
    color: white;
    margin-top: 2rem;
  }
</style>

Ahora, mejoremos esto con un formulario de contacto usando un Server Action para manejar el envío en el servidor. Crea un archivo src/routes/+page.server.js y añade:

export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');
    const message = data.get('message');
    // Aquí procesarías los datos, ej., guardar en una base de datos
    console.log(`Email: ${email}, Mensaje: ${message}`);
    return { success: true };
  }
};

Luego, actualiza la sección hero en +page.svelte para incluir el formulario:

<section>
  <h2>Contáctanos</h2>
  <form method="POST">
    <input type="email" name="email" placeholder="Tu email" required />
    <textarea name="message" placeholder="Tu mensaje" required></textarea>
    <button type="submit">Enviar</button>
  </form>
  {#if form?.success}
    <p>¡Mensaje enviado con éxito!</p>
  {/if}
</section>

Errores comunes

Olvidar el atributo method="POST" en formularios: Sin esto, SvelteKit no activará la Server Action, y el formulario se comportará como una petición GET normal. Siempre verifica que los formularios que envían datos usen POST.
No manejar estados de carga o error en formularios: En una landing page real, los usuarios necesitan feedback. Usa variables reactivas en Svelte para mostrar mensajes como "Enviando..." o "Error al enviar" basado en la respuesta del servidor.
Ignorar la optimización de imágenes y recursos: SvelteKit incluye Vite, que puede optimizar assets, pero si subes imágenes grandes sin comprimir, ralentizarán la carga. Usa formatos modernos como WebP y considera lazy loading para imágenes fuera de la vista inicial.
Confundir +page.svelte con +layout.svelte: El layout es para elementos compartidos (como navegación o pie de página), mientras que la page es para contenido específico de la ruta. Mezclarlos puede llevar a duplicación de código o errores de renderizado.

Checklist de dominio

Creé un archivo +page.svelte en src/routes con estructura semántica HTML5.
Añadí interactividad del cliente usando variables reactivas y eventos (ej., un contador con on:click).
Implementé un formulario con una Server Action en +page.server.js para manejar envíos en el servidor.
Optimicé los estilos con CSS encapsulado en la etiqueta <style> y aseguré que sean responsivos.
Probé la landing page en modo desarrollo y producción (ej., con npm run build y npm run preview).
Verifiqué que la página cargue rápido usando herramientas como Lighthouse en Chrome DevTools.
Documenté cualquier dependencia o configuración extra necesaria para el despliegue.

Crea una landing page interactiva con formulario de suscripción

Sigue estos pasos para construir una landing page funcional que incluya un formulario de suscripción manejado por una Server Action:

Configura el proyecto: Si no tienes uno, crea un nuevo proyecto SvelteKit ejecutando npm create svelte@latest landing-page-practice y selecciona las opciones básicas (puedes usar TypeScript o JavaScript).
Diseña la estructura: En src/routes/+page.svelte, define un encabezado con un logo y menú, una sección hero con un título y descripción, y un pie de página. Usa etiquetas semánticas como <header>, <main>, y <footer>.
Añade interactividad: Incluye un botón que muestre un mensaje emergente al hacer clic. Usa una variable reactiva en Svelte (ej., let showMessage = false) y un evento on:click para alternar su estado.
Implementa el formulario de suscripción: Crea un formulario con un campo para email y un botón de envío. Asegúrate de que use method="POST" y los atributos name correctos.
Crea la Server Action: En src/routes/+page.server.js, exporta un objeto actions con una acción por defecto que capture los datos del formulario y los registre en consola (simulando un guardado). Retorna un objeto con un campo success.
Maneja la respuesta: En +page.svelte, usa la directiva {#if form?.success} para mostrar un mensaje de confirmación después del envío exitoso.
Estiliza la página: Añade CSS en la etiqueta <style> para hacer la página atractiva y responsiva. Prueba en diferentes tamaños de pantalla.
Prueba y optimiza: Ejecuta npm run dev para ver la página en local, luego usa npm run build y npm run preview para simular producción. Verifica el rendimiento con Lighthouse.

Pistas

Recuerda que en SvelteKit, los formularios deben usar POST para activar Server Actions; si usas GET, se comportarán como navegación normal.
Puedes acceder a los datos del formulario en la Server Action usando await request.formData() y luego data.get('nombreDelCampo').
Para mejorar la experiencia de usuario, considera añadir un estado de carga deshabilitando el botón de envío mientras se procesa la acción.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Práctica: Desarrolla una landing page básica