El renderizado del lado del servidor (SSR) es una técnica que permite generar HTML en el servidor en lugar de hacerlo en el cliente. Esto puede mejorar significativamente el rendimiento de la aplicación y la optimización para motores de búsqueda (SEO). Nuxt.js es un framework basado en Vue.js que facilita la implementación de SSR.

Nuxt.js es un framework de desarrollo basado en Vue.js que permite crear aplicaciones universales (isomórficas) con renderizado del lado del servidor. Proporciona una estructura de proyecto preconfigurada y una serie de características que simplifican el desarrollo de aplicaciones Vue.js con SSR.

• Renderizado del Lado del Servidor (SSR): Genera HTML en el servidor para mejorar el rendimiento y SEO.
• Generación de Sitios Estáticos: Permite generar sitios estáticos a partir de una aplicación Vue.js.
• Enrutamiento Automático: Basado en la estructura de archivos del proyecto.
• Gestión de Estado Integrada: Soporte para Vuex.
• Modularidad: Extensible mediante módulos y plugins.

Para comenzar a trabajar con Nuxt.js, primero necesitas configurar tu entorno de desarrollo. A continuación, se detallan los pasos para crear un nuevo proyecto Nuxt.js.

1. Instala Node.js y npm: Asegúrate de tener Node.js y npm instalados en tu sistema. Puedes descargarlos desde nodejs.org.

2. Crea un nuevo proyecto Nuxt.js:

   npx create-nuxt-app my-nuxt-app
   

   Sigue las instrucciones en pantalla para configurar tu proyecto.

3. Navega al directorio del proyecto:

   cd my-nuxt-app
   

4. Inicia el servidor de desarrollo:

   npm run dev
   

Un proyecto Nuxt.js tiene una estructura de directorios específica que facilita la organización del código. A continuación se muestra una estructura típica:

• assets: Archivos estáticos como imágenes y estilos CSS.
• components: Componentes Vue reutilizables.
• layouts: Plantillas de diseño para las páginas.
• middleware: Funciones que se ejecutan antes de cargar una página o ruta.
• pages: Componentes de página que se utilizan para el enrutamiento.
• plugins: Archivos JavaScript que se ejecutan antes de instanciar la aplicación.
• static: Archivos estáticos que se sirven directamente.
• store: Archivos de Vuex para la gestión del estado.

Nuxt.js utiliza la estructura de archivos en el directorio pages para generar automáticamente las rutas de la aplicación.

Crea un archivo index.vue en el directorio pages:

Nuxt.js generará automáticamente una ruta para esta página (/). Puedes crear más páginas simplemente añadiendo archivos .vue en el directorio pages.

El SSR en Nuxt.js se habilita por defecto. Cuando inicias el servidor de desarrollo con npm run dev, Nuxt.js renderiza las páginas en el servidor y envía el HTML generado al cliente.

• Mejora del Rendimiento: Las páginas se cargan más rápido porque el HTML ya está generado.
• Mejor SEO: Los motores de búsqueda pueden indexar el contenido más fácilmente.
• Mejor Experiencia de Usuario: La aplicación parece más rápida y receptiva.

Para desplegar una aplicación Nuxt.js con SSR, necesitas construir la aplicación y luego ejecutarla en un servidor Node.js.

1. Construye la aplicación:

   npm run build
   

2. Inicia la aplicación en modo producción:

   npm run start
   

Puedes desplegar tu aplicación en cualquier servidor que soporte Node.js. A continuación se muestra un ejemplo de despliegue en Heroku:

1. Instala el CLI de Heroku:

   npm install -g heroku
   

2. Inicia sesión en Heroku:

   heroku login
   

3. Crea una nueva aplicación en Heroku:

   heroku create my-nuxt-app
   

4. Empuja el código a Heroku:

   git push heroku main
   

5. Abre la aplicación en el navegador:

   heroku open
   

Crear una aplicación Nuxt.js simple con una página de inicio y una página de contacto, y desplegarla en un servidor.

1. Crea un nuevo proyecto Nuxt.js.
2. Añade una página de contacto (contact.vue) en el directorio pages.
3. Configura el enrutamiento automático.
4. Construye y despliega la aplicación en un servidor de tu elección.

1. Crea un nuevo proyecto Nuxt.js:

   npx create-nuxt-app my-nuxt-app
   cd my-nuxt-app
   

2. Añade una página de contacto (contact.vue):

   <!-- pages/contact.vue -->
   <template>
     <div>
       <h1>Contacto</h1>
       <p>Esta es la página de contacto.</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'ContactPage'
   }
   </script>
   
   <style scoped>
   h1 {
     color: #2c3e50;
   }
   </style>
   

3. Construye y despliega la aplicación:

   npm run build
   npm run start
   

   Sigue los pasos de despliegue en un servidor de tu elección (por ejemplo, Heroku).

En esta sección, hemos aprendido sobre el renderizado del lado del servidor (SSR) con Nuxt.js, cómo configurar un proyecto Nuxt.js, crear páginas y rutas, y desplegar la aplicación en un servidor. Nuxt.js simplifica el desarrollo de aplicaciones Vue.js con SSR, mejorando el rendimiento y la optimización para motores de búsqueda. En el próximo módulo, exploraremos más conceptos avanzados de Vue.js.