El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Renderització del costat del servidor (SSR) amb Nuxt.js

Següent ►
►

Introducció

La renderització del costat del servidor (SSR) és una tècnica que permet generar el contingut HTML d'una aplicació al servidor en lloc de fer-ho al client. Això pot millorar significativament el rendiment i l'optimització per a motors de cerca (SEO). Nuxt.js és un framework basat en Vue.js que facilita la implementació de SSR.

Objectius

En aquesta secció, aprendràs:

  • Què és Nuxt.js i com s'integra amb Vue.js.
  • Com configurar un projecte Nuxt.js.
  • Com implementar SSR amb Nuxt.js.
  • Avantatges i desavantatges de l'ús de SSR.

Què és Nuxt.js?

Nuxt.js és un framework de codi obert basat en Vue.js que simplifica la creació d'aplicacions universals (isomòrfiques) amb SSR. Proporciona una estructura de projecte ben definida i eines per gestionar rutes, estats, i molt més.

Característiques clau de Nuxt.js

  • Renderització del costat del servidor (SSR): Genera HTML al servidor per millorar el rendiment i el SEO.
  • Generació estàtica: Permet generar llocs web estàtics.
  • Gestió de rutes automàtica: Les rutes es generen automàticament basant-se en l'estructura de les carpetes.
  • Integració amb Vuex: Facilita la gestió de l'estat de l'aplicació.
  • Plugins i mòduls: Extensió fàcil de les funcionalitats de l'aplicació.

Configuració d'un projecte Nuxt.js

Instal·lació de Nuxt.js

Per començar, necessitaràs Node.js i npm instal·lats al teu sistema. Pots crear un nou projecte Nuxt.js utilitzant el següent comandament:

npx create-nuxt-app my-nuxt-app

Segueix les instruccions per configurar el projecte segons les teves necessitats.

Estructura del projecte

Un cop creat el projecte, tindràs una estructura de carpetes similar a aquesta:

my-nuxt-app/
├── assets/
├── components/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── static/
├── store/
├── nuxt.config.js
└── package.json
  • assets/: Recursos com ara CSS, imatges, etc.
  • components/: Components Vue reutilitzables.
  • layouts/: Plantilles de disseny per a les pàgines.
  • middleware/: Funcions que s'executen abans de renderitzar una pàgina.
  • pages/: Pàgines de l'aplicació. Cada fitxer aquí es converteix en una ruta.
  • plugins/: Plugins de Vue.js.
  • static/: Fitxers estàtics que es serviran tal qual.
  • store/: Fitxers per a la gestió de l'estat amb Vuex.
  • nuxt.config.js: Fitxer de configuració de Nuxt.js.

Implementació de SSR amb Nuxt.js

Configuració bàsica

Nuxt.js ve configurat per defecte per utilitzar SSR. No obstant això, pots personalitzar la configuració al fitxer nuxt.config.js.

export default {
  // Mode de renderització
  mode: 'universal', // 'universal' per SSR, 'spa' per aplicacions d'una sola pàgina

  // Configuració de les rutes
  router: {
    base: '/'
  },

  // Altres configuracions
  head: {
    title: 'My Nuxt.js App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'My Nuxt.js project' }
    ]
  }
}

Creació de pàgines

Les pàgines es creen a la carpeta pages/. Per exemple, pots crear una pàgina d'inici index.vue:

<template>
  <div>
    <h1>Benvingut a la meva aplicació Nuxt.js</h1>
  </div>
</template>

<script>
export default {
  asyncData() {
    return {
      message: 'Hola, món!'
    }
  }
}
</script>

<style>
/* Estils CSS */
</style>

Utilització de asyncData

La funció asyncData permet obtenir dades abans de renderitzar la pàgina, la qual cosa és útil per a SSR.

export default {
  asyncData({ params }) {
    return axios.get(`https://api.example.com/data/${params.id}`)
      .then((res) => {
        return { data: res.data }
      })
  }
}

Avantatges i desavantatges de SSR

Avantatges

  • Millora del SEO: Els motors de cerca poden indexar millor el contingut generat al servidor.
  • Millor rendiment inicial: Els usuaris reben una pàgina completament renderitzada des del servidor.
  • Millor experiència d'usuari: Redueix el temps de càrrega percebut.

Desavantatges

  • Complexitat: La configuració i el desplegament poden ser més complexos.
  • Cost del servidor: Pot requerir més recursos del servidor per generar les pàgines.

Exercici pràctic

Objectiu

Crear una aplicació Nuxt.js que mostri una llista de tasques obtingudes d'una API.

Passos

  1. Configura un nou projecte Nuxt.js.
  2. Crea una pàgina tasks.vue a la carpeta pages/.
  3. Utilitza asyncData per obtenir les tasques d'una API.
  4. Mostra les tasques a la pàgina.

Solució

<!-- pages/tasks.vue -->
<template>
  <div>
    <h1>Llista de tasques</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  asyncData() {
    return axios.get('https://jsonplaceholder.typicode.com/todos')
      .then((res) => {
        return { tasks: res.data }
      })
  }
}
</script>

<style>
/* Estils CSS */
</style>

Conclusió

En aquesta secció, has après els conceptes bàsics de la renderització del costat del servidor (SSR) amb Nuxt.js. Has configurat un projecte Nuxt.js, creat pàgines i utilitzat asyncData per obtenir dades abans de la renderització. També has explorat els avantatges i desavantatges de l'ús de SSR. Amb aquests coneixements, estàs preparat per crear aplicacions Vue.js més ràpides i optimitzades per a SEO utilitzant Nuxt.js.

◄ Anterior
◄
Següent ►
►

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats