Cómo crear aplicaciones Svelte renderizadas en el lado del servidor (SSR) con SvelteKit

 

 

 

  • Taller de diseño conductual, con Susan y Guthrie Weinschenk
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. SvelteKit simplifica el proceso
    2. SvelteKit en acción: bolsa de trabajo
    3. Primero, inicialice el proyecto SvelteKit
      1. ¿Es SvelteKit una dependencia?
    4. Creando los datos
    5. Agregar modelo TypeScript
    6. La página principal de la bolsa de trabajo
    7. Ejecute la aplicación
    8. El componente de elemento de trabajo
    9. Obteniendo datos del trabajo
    10. Acceso a datos desde la bolsa de trabajo
    11. Implementación de la aplicación
      1. Más configuraciones específicas de Netlify
    12. Conclusión
      1. Lecturas adicionales sobre SmashingMag

    SvelteKit es un marco para crear aplicaciones utilizando Svelte. Puede utilizar SvelteKit para crear una variedad de aplicaciones que pueden variar desde una aplicación de página única (SPA) hasta una aplicación renderizada del lado del servidor (SSR) y más. En este artículo, Sriram le muestra cómo crear una aplicación SvelteKit renderizada del lado del servidor e implementarla en Netlify siguiendo esta guía paso a paso.

     

    No estoy interesado en iniciar una guerra territorial entre el renderizado del lado del servidor y el renderizado del lado del cliente. El hecho es que SvelteKit admite ambos, que es una de las muchas ventajas que ofrece desde el primer momento. El paradigma de renderizado del lado del servidor no es un concepto nuevo. Significa que el cliente (es decir, el navegador del usuario) envía una solicitud al servidor, y el servidor responde con los datos y el marcado de esa página en particular, que luego se representa en el navegador del usuario.

    ( Vista previa grande )

    Para crear una aplicación SSR utilizando el marco principal de Svelte , necesitaría mantener dos bases de código, una con el servidor ejecutándose en Node, junto con algún motor de plantillas, como Manillar o Moustache . La otra aplicación es una aplicación Svelte del lado del cliente que obtiene datos del servidor.

    El enfoque que estamos analizando en el párrafo anterior no está exento de desventajas. Dos que inmediatamente te vienen a la mente y que estoy seguro que pensaste después de leer el último párrafo:

    1. La aplicación es más compleja porque efectivamente mantenemos dos sistemas.
    2. Compartir lógica y datos entre el código del cliente y del servidor es más difícil que obtener datos de una API en el lado del cliente.

    SvelteKit simplifica el proceso

    SvelteKit agiliza las cosas al manejar la complejidad del servidor y del cliente por sí solo, lo que le permite concentrarse directamente en el desarrollo de la aplicación. No es necesario mantener dos aplicaciones ni hacer un paseo por la cuerda floja compartiendo datos entre las dos.

    Así es cómo:

    • Cada ruta puede tener un page.server.tsarchivo que se utiliza para ejecutar código en el servidor y devolver datos sin problemas al código de su cliente.
    • Si usa TypeScript, SvelteKit genera automáticamente tipos que se comparten entre el cliente y el servidor.
    • SvelteKit ofrece una opción para seleccionar su enfoque de renderizado según la ruta. Puede elegir SSR para algunas rutas y CSR para otras, como quizás las rutas de su página de administración.
    • SvelteKit también admite enrutamiento basado en un sistema de archivos, lo que hace que sea mucho más fácil definir nuevas rutas que tener que crearlas usted mismo.

    SvelteKit en acción: bolsa de trabajo

    Quiero mostrarles cuán simplificado es el enfoque de SvelteKit con respecto a la forma tradicional en que hemos estado bailando entre los mundos SSR y CSR, y creo que no hay mejor manera de hacerlo que usar un ejemplo del mundo real. Entonces, lo que vamos a hacer es crear una bolsa de trabajo (básicamente una lista de elementos de trabajo) mientras detallamos el papel de SvelteKit en la aplicación.

     

    ( Vista previa grande )

    Cuando terminemos, lo que tendremos es una aplicación donde SvelteKit obtiene los datos de un archivo JSON y los representa en el lado del servidor. Iremos paso a paso.

    Primero, inicialice el proyecto SvelteKit

    Los documentos oficiales de SvelteKit ya hacen un gran trabajo al explicar cómo configurar un nuevo proyecto. Pero, en general, iniciamos cualquier proyecto de SvelteKit en la línea de comando con este comando:

    npm create svelte@latest job-list-ssr-sveltekit

    Este comando crea una nueva carpeta de proyecto llamada job-list-ssr-sveltekiten su máquina e inicializa Svelte y SvelteKit para que podamos usarlos. Pero no nos detenemos ahí: se nos solicitan algunas opciones para configurar el proyecto:

    1. Primero, seleccionamos una plantilla SvelteKit. Seguiremos utilizando la plantilla básica de Skeleton Project.
    2. A continuación, podemos habilitar la verificación de tipos si te gusta. La verificación de tipos brinda asistencia al escribir código al detectar errores en los tipos de datos de la aplicación. Voy a usar la opción "Sintaxis de TypeScript", pero no es necesario que la uses y puedes elegir la opción "Ninguno".

    Hay opciones adicionales a partir de ahí que son más una cuestión de preferencia personal:

    • ESLint para hacer cumplir la coherencia del código,
    • Es más bonito limpiar el formato del código,
    • Dramaturgo para pruebas de navegador localmente,
    • Vitest para pruebas unitarias.

    ( Vista previa grande )

    Si está familiarizado con alguno de estos, puede agregarlo al proyecto. Lo mantendremos simple y no seleccionaremos nada de la lista, ya que lo que realmente quiero mostrar es la arquitectura de la aplicación y cómo funciona todo en conjunto para obtener datos representados por la aplicación.

    Ahora que tenemos la plantilla para nuestro proyecto lista, hagamos la última parte de la configuración instalando las dependencias para que Svelte y SvelteKit hagan lo suyo:

     

    cd job-listing-ssr-sveltekitnpm install

    Hay algo interesante sucediendo bajo el capó que creo que vale la pena mencionar:

    ¿Es SvelteKit una dependencia?

    Si es nuevo en Svelte o SvelteKit, se sorprenderá gratamente cuando abra el package.jsonarchivo del proyecto. Observe que SvelteKit aparece en la devDependenciessección. La razón de esto es que Svelte (y, a su vez, SvelteKit) actúa como un compilador que toma todos sus .jsarchivos .sveltey los convierte en código JavaScript optimizado que se representa en el navegador.

    Esto significa que el paquete Svelte en realidad es innecesario cuando lo implementamos en el servidor. Es por eso que no aparece como una dependencia en el archivo del paquete. El paquete final de nuestra aplicación de bolsa de trabajo contendrá solo el código de la aplicación, lo que significa que el tamaño del paquete es mucho más pequeño y se carga más rápido que la arquitectura normal basada en Svelte .

    ¡Mira lo pequeño y legible package-jsonque es el archivo!

    { "name": "job-listing-ssr-sveltekit", "version": "0.0.1", "private": true, "scripts": { "dev": "vite dev", "build": "vite build", "preview": "vite preview", "check": "svelte-kit sync svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync svelte-check --tsconfig ./tsconfig.json --watch" }, "devDependencies": { "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/kit": "^1.5.0", "svelte": "^3.54.0", "svelte-check": "^3.0.1", "tslib": "^2.4.1", "typescript": "^4.9.3", "vite": "^4.0.0" }, "type": "module"}

    Realmente encuentro esto refrescante y espero que a ti también. Ver una gran lista de paquetes tiende a ponerme nervioso porque todas esas piezas en movimiento hacen que toda la arquitectura de la aplicación se sienta frágil y vulnerable. El resultado conciso de SvelteKit, por el contrario, me da mucha más confianza.

    Creando los datos

    Necesitamos datos provenientes de algún lugar que puedan informar a la aplicación sobre lo que se debe representar. Mencioné anteriormente que colocaríamos datos y los extraeríamos de un archivo JSON. Ese sigue siendo el plan.

    En lo que respecta a los datos estructurados, lo que debemos definir son propiedades para un elemento de la bolsa de trabajo. Dependiendo de sus necesidades exactas, puede haber muchos campos o solo unos pocos. Voy a proceder con lo siguiente:

    • Título profesional,
    • Descripción del trabajo,
    • Nombre de empresa,
    • Compensación.

    Así es como se ve en JSON:

    [{ "job_title": "Job 1", "job_description": "Very good job", "company_name": "ABC Software Company", "compensation_per_year": "$40000 per year"}, { "job_title": "Job 2", "job_description": "Better job", "company_name": "XYZ Software Company", "compensation_per_year": "$60000 per year"}]

    Ahora que hemos definido algunos datos, abramos la carpeta principal del proyecto. Hay un subdirectorio allí llamado src. Podemos abrirlo y crear una nueva carpeta llamada datay agregarle el archivo JSON que acabamos de crear. Volveremos al archivo JSON cuando trabajemos en la obtención de datos para la bolsa de trabajo.

     

    ( Vista previa grande )

    Agregar modelo TypeScript

    Nuevamente, TypeScript es completamente opcional. Pero como es tan utilizado, creo que vale la pena mostrar cómo configurarlo en un marco SvelteKit.

    Comenzamos creando un nuevo models.tsarchivo en la carpeta del proyecto src. Este es el archivo donde definimos todos los tipos de datos que pueden ser importados y utilizados por otros componentes y páginas, y TypeScript los verificará por nosotros.

    Aquí está el código del models.tsarchivo:

    export type JobsList = JobItem[]export interface JobItem { job_title: string job_description: string company_name: string compensation_per_year: string}

    Hay dos tipos de datos definidos en el código:

    1. JobListcontiene la matriz de elementos de trabajo.
    2. JobItemcontiene los detalles del trabajo (o propiedades) que definimos anteriormente.

    La página principal de la bolsa de trabajo

    Comenzaremos desarrollando el código para la página principal de la bolsa de trabajo que muestra una lista de elementos de trabajo disponibles. Abra el src/routes/+page.sveltearchivo, que es la bolsa de trabajo principal. ¿Observas cómo existe en la /src/routescarpeta? Ese es el sistema de enrutamiento basado en archivos al que me referí antes cuando hablé de los beneficios de SvelteKit. El nombre del archivo se genera automáticamente en una ruta. Esta es una verdadera joya de DX, ya que nos ahorra tiempo al tener que codificar las rutas nosotros mismos y mantener más código. Aprender a programar con ejemplos

    Si bien +page.sveltees la página principal de la aplicación, también es la plantilla para cualquier página genérica de la aplicación. Pero podemos crear una separación de preocupaciones agregando más estructura en el /scr/routesdirectorio con más carpetas y subcarpetas que resulten en diferentes rutas. Los documentos de SvelteKit tienen toda la información que necesita para el enrutamiento y las convenciones de enrutamiento .

    Este es el marcado y los estilos que usaremos para la bolsa de trabajo principal:

    div h1Job Listing Home page/h1/divstyle .home-page { padding: 2rem 4rem; display: flex; align-items: center; flex-direction: column; justify-content: center; }/style

    Sí, esto es súper simple. Todo lo que estamos agregando a la página es una h1etiqueta para el título de la página y un estilo CSS ligero para asegurarnos de que el contenido esté centrado y tenga un buen relleno para facilitar la legibilidad. No quiero enturbiar las aguas de este ejemplo con un montón de marcas y estilos obstinados que de otro modo serían una distracción de la arquitectura de la aplicación.

    Ejecute la aplicación

    Estamos en un punto en el que podemos ejecutar la aplicación usando lo siguiente en la línea de comando:

    npm run dev -- --open

    El -- --openargumento abre automáticamente la página de la bolsa de trabajo en el navegador. Esta es sólo una pequeña pero agradable comodidad. También puede navegar a la URL que genera la línea de comando.

     

    ( Vista previa grande )

    El componente de elemento de trabajo

    Bien, entonces tenemos una página principal de bolsa de trabajo que se usará para enumerar elementos de trabajo a partir de los datos obtenidos por la aplicación. Lo que necesitamos es un nuevo componente específico para los propios puestos de trabajo. De lo contrario, todo lo que tenemos es un montón de datos sin instrucciones sobre cómo se representan.

    Empecemos por abrir la srccarpeta en el proyecto y crear una nueva subcarpeta llamada components. Y en esa nueva /src/componentscarpeta, agreguemos un nuevo archivo Svelte llamado JobDisplay.svelte.

    Podemos usar esto para el marcado y los estilos del componente:

    script import type { JobItem } from "../models"; export let job: JobItem;/scriptdiv pJob Title: b{job.job_title}/b/p pDescription: b{job.job_description}/b/p div spanCompany Name : b{job.company_name}/b/span spanCompensation per year: b{job.compensation_per_year}/b/span /div/divstyle .job-item { border: 1px solid grey; padding: 2rem; width: 50%; margin: 1rem; border-radius: 10px; } .job-details { display: flex; justify-content: space-between; }/style

    Analicemos eso para saber qué está sucediendo:

    1. En la parte superior, importamos el JobItemmodelo TypeScript.
    2. Luego, definimos un jobaccesorio con un tipo de JobItem. Este accesorio es responsable de obtener los datos de su componente principal para que podamos pasar esos datos a este componente para su representación.
    3. A continuación, el HTML proporciona el marcado de este componente.
    4. El último es el CSS para un estilo ligero. Nuevamente, mantendré esto súper simple con nada más que un poco de relleno y detalles menores para estructura y legibilidad. Por ejemplo, justify-content: space-betweenagrega una pequeña separación visual entre elementos de trabajo.

    ( Vista previa grande )

    Obteniendo datos del trabajo

    Ahora que tenemos el JobDisplaycomponente listo, estamos listos para pasarle datos para completar todos los campos que se mostrarán en cada JobDisplayrenderizado en la bolsa de trabajo principal.

    Dado que se trata de una aplicación SSR, los datos deben recuperarse del lado del servidor. SvelteKit facilita esto al tener una loadfunción separada que se puede usar para recuperar datos y como enlace para otras acciones en el servidor cuando se carga la página.

    Para recuperarlo, creemos otro archivo TypeScript nuevo, esta vez llamado +page.server.ts, en el directorio del proyecto routes. Al igual que el +page.sveltearchivo, esto también tiene un significado especial que hará que este archivo se ejecute en el servidor cuando se cargue la ruta. Como queremos esto en la página principal de la bolsa de trabajo, crearemos este archivo en el routesdirectorio e incluiremos este código en él:

    import jobs from ’../data/job-listing.json’import type { JobsList } from ’../models’;const job_list: JobsList = jobs;export const load = (() = { return { job_list };})

    Esto es lo que estamos haciendo con este código:

     

    1. Importamos datos del archivo JSON. Esto es por motivos de simplicidad. En la aplicación real, probablemente obtendrías estos datos de una base de datos realizando una llamada API.
    2. Luego, importamos el modelo TypeScript que creamos para JobsList.
    3. A continuación, creamos una nueva job_listvariable y le asignamos los datos importados.
    4. Por último, definimos una loadfunción que devolverá un objeto con los datos asignados. SvelteKit llamará automáticamente a esta función cuando se solicite la página. Entonces, la magia del código SSR ocurre aquí cuando recuperamos los datos en el servidor y construimos el HTML con los datos que obtenemos.

    Acceso a datos desde la bolsa de trabajo

    SvelteKit hace que el acceso a los datos sea relativamente fácil al pasarlos a la página principal de la bolsa de trabajo de una manera que verifica los tipos en busca de errores en el proceso. Podemos importar un tipo llamado PageServerDataen el +page.sveltearchivo. Este tipo se genera automáticamente y el archivo devolverá los datos +page.server.ts. Esto es fantástico, ya que no tenemos que volver a definir tipos cuando utilizamos los datos que recibimos.

    Actualicemos el código en el +page.sveltearchivo, como el siguiente:

    script import JobDisplay from ’../components/JobDisplay.svelte’; import type { PageServerData } from ’./$types’; export let data: PageServerData;/scriptdiv h1Job Listing Home page/h1 {#each data.job_list as job} JobDisplay job={job}/ {/each}/divstyle..../style

    Esto es genial porque:

    1. La #eachsintaxis es una ventaja de Svelte que se puede utilizar para repetir el JobDisplaycomponente en todos los trabajos para los que existen datos.
    2. En la parte superior, estamos importando tanto el componente JobDisplay como PageServerDatael tipo de ./$types, que SvelteKit genera automáticamente.

    ( Vista previa grande )

    Implementación de la aplicación

    ¡Estamos listos para compilar y agrupar este proyecto en preparación para su implementación! Podemos usar el mismo comando en la Terminal que la mayoría de los otros frameworks, por lo que debería resultarnos bastante familiar:

    npm run build

    ( Vista previa grande )

    Nota : Es posible que reciba la siguiente advertencia al ejecutar ese comando: "No se pudo detectar un entorno de producción compatible". Arreglaremos eso en un momento, así que quédate conmigo.

    Desde aquí, podemos usar el npm run previewcomando para verificar la última versión integrada de la aplicación:

    npm run preview

    Este proceso es una nueva forma de ganar confianza en la compilación local antes de implementarla en un entorno de producción.

    El siguiente paso es implementar la aplicación en el servidor. Estoy usando Netlify, pero eso es puramente por ejemplo, así que siéntete libre de elegir otra opción. SvelteKit ofrece adaptadores que implementarán la aplicación en diferentes entornos de servidor. Puede obtener la lista completa de adaptadores en los documentos , por supuesto.

     

    La verdadera razón por la que estoy usando Netlify es que implementarlo allí es muy conveniente para este tutorial, gracias al adapter-netlifycomplemento que se puede instalar con este comando:

    npm i -D @sveltejs/adapter-netlify

    De hecho, esto introduce una nueva dependencia en el package.jsonarchivo. Lo menciono porque sabes cuánto me gusta que la lista sea breve.

    Después de la instalación, podemos actualizar el svelte.config.jsarchivo para consumir el adaptador:

    import adapter from ’@sveltejs/adapter-netlify’;import { vitePreprocess } from ’@sveltejs/kit/vite’;/** @type {import(’@sveltejs/kit’).Config} */const config = { preprocess: vitePreprocess(), kit: { adapter: adapter({ edge: false, split: false }) }};export default config;

    Muy rápido, esto es lo que está pasando:

    1. El adapteres importado de adapter-netlify.
    2. El nuevo adaptador se pasa a la adapterpropiedad dentro del archivo kit.
    3. El edgevalor booleano se puede utilizar para configurar la implementación en una función perimetral de Netlify.
    4. El splitvalor booleano se utiliza para controlar si queremos dividir cada ruta en funciones de borde separadas.

    Más configuraciones específicas de Netlify

    Todo de ahora en adelante es específico de Netlify, por lo que quería dividirlo en su propia sección para mantener las cosas claras.

    Podemos agregar un nuevo archivo llamado netlify.tomlen el nivel superior de la carpeta del proyecto y agregar el siguiente código:

    [build] command = "npm run build" publish = "build"

    Apuesto a que sabes lo que esto hace, pero ahora tenemos un nuevo alias para implementar la aplicación en Netlify. También nos permite controlar la implementación desde una cuenta de Netlify, lo que podría ser un beneficio para usted. Para hacer esto, tenemos que:

    1. Crea un nuevo proyecto en Netlify,
    2. Seleccione la opción "Importar un proyecto existente" y
    3. Proporcione permiso para que Netlify acceda al repositorio del proyecto. Puedes elegir dónde deseas almacenar tu repositorio, ya sea en GitHub o algún otro servicio.

    ( Vista previa grande )

    Como hemos configurado el netlify.tomlarchivo, podemos dejar la configuración predeterminada y hacer clic en el botón "Implementar" directamente desde Netlify.

    Una vez que se completa la implementación, puede navegar al sitio utilizando la URL proporcionada en Netlify. Este debería ser el resultado final:

    ( Vista previa grande )

    Aquí hay algo divertido. Abra DevTools cuando vea la aplicación en el navegador y observe que el HTML contiene los datos reales que obtuvimos del archivo JSON. De esta manera, sabemos con certeza que se representan los datos correctos y que todo está funcionando.

    ( Vista previa grande )

    Nota : El código fuente de todo el proyecto está disponible en GitHub . Todos los pasos que cubrimos en este artículo se dividen como confirmaciones separadas en la mainrama para su referencia.

    Conclusión

    En este artículo, aprendimos los conceptos básicos de las aplicaciones renderizadas del lado del servidor y los pasos para crear e implementar una aplicación de la vida real utilizando SvelteKit como marco. No dudes en compartir tus comentarios y perspectivas sobre este tema, especialmente si estás considerando elegir SvelteKit para tu próximo proyecto.

    Lecturas adicionales sobre SmashingMag

    • Diferencias entre sitios generados estáticos y aplicaciones renderizadas del lado del servidor , Timi Omoyeni
    • Cómo utilizar Google CrUX para analizar y comparar el rendimiento de JS Frameworks , Dan Shappir
    • Una mirada al Remix y las diferencias con Next.js , Facundo Giuliani
    • Creación de una aplicación del lado del servidor con funciones asíncronas y Koa 2

    (gg, yk, il)Explora más en

    • Marcos
    • Aplicaciones
    • Codificación
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo crear aplicaciones Svelte renderizadas en el lado del servidor (SSR) con SvelteKit

    Cómo crear aplicaciones Svelte renderizadas en el lado del servidor (SSR) con SvelteKit

    SvelteKit simplifica el procesoSvelteKit en acción: bolsa de trabajoPrimero, inicialice el proyecto SvelteKitCreando los datosAgregar modelo TypeScriptLa pág

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-crear-aplicaciones-svelte-renderizadas-en-el-lado-del-servidor-ssr-con-sveltekit-1175-0.jpg

    2024-07-01

     

    Cómo crear aplicaciones Svelte renderizadas en el lado del servidor (SSR) con SvelteKit
    Cómo crear aplicaciones Svelte renderizadas en el lado del servidor (SSR) con SvelteKit

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences