Un título un poco prolijo, ¿eh? ¿Qué es la representación del lado del servidor? ¿Qué tiene que ver con el enrutamiento y las transiciones de página? ¿Qué diablos es Nuxt.js? Curiosamente, aunque suene complejo, trabajar con Nuxt.js y explorar los beneficios de no es demasiado difícil. ¡Empecemos!
Representación del lado del servidor
Es posible que haya escuchado a personas hablar sobre la renderización del lado del servidor últimamente. Recientemente, analizamos un método para hacer eso con React. Un aspecto particularmente convincente son los beneficios de rendimiento. Cuando representamos nuestro HTML, CSS y JavaScript en el servidor, a menudo tenemos menos JavaScript para analizar tanto inicialmente como en actualizaciones posteriores. Este artículo es muy bueno para profundizar más en el tema. Mi comida para llevar favorita es:
Al renderizar en el servidor, puede almacenar en caché la forma final de sus datos.
En lugar de tomar JSON u otra información del servidor, analizarla y luego usar JavaScript para crear diseños de esa información, estamos haciendo muchos de esos cálculos por adelantado y solo enviamos el HTML, CSS y JavaScript que necesitamos. . Esto puede generar muchos beneficios con el almacenamiento en caché, SEO y acelerar nuestras aplicaciones y sitios.
¿Qué es Nuxt.js?
La representación del lado del servidor suena bastante bien, pero probablemente se esté preguntando si es difícil de configurar. Últimamente he estado usando Nuxt.js para mis aplicaciones de Vue y me pareció sorprendentemente sencillo trabajar con él. Para ser claros: no necesita usar Nuxt.js en particular para hacer la renderización del lado del servidor. Solo soy un fanático de esta herramienta por muchas razones. Hice algunas pruebas el mes pasado y descubrí que Nuxt.js tenía puntajes de faro aún más altos que la plantilla PWA de Vue, lo que pensé que era impresionante.
Nuxt.js es un marco de trabajo de nivel superior que puede usar con un comando CLI que puede usar para crear aplicaciones universales de Vue. Estos son algunos de los beneficios, no todos:
- Representación del lado del servidor
- División automática de código
- Potente sistema de enrutamiento
- Gran faro sale de la puerta 🐎
- Servicio de archivos estáticos
- Transpilación ES6 / ES7
- Recarga en caliente en desarrollo
- Preprocesadores: SASS, LESS, Stylus, etc.
- ¡Escribe archivos Vue para crear tus páginas y diseños!
- Mi favorito personal: agregue fácilmente transiciones a sus páginas
Configuremos una aplicación básica con algunas rutas para ver los beneficios por nosotros mismos.
Preparándose
Lo primero que debemos hacer si aún no lo ha hecho es descargar la CLI de Vue. Puede hacerlo globalmente con este comando:
npm install -g vue-cli
# ... or ...
yarn add global vue-cliSolo necesitará hacer esto una vez, no cada vez que lo use.
A continuación, usaremos la CLI para crear un proyecto nuevo, pero usaremos Nuxt.js como plantilla:
vue init nuxt/starter my-project
cd my-project
yarn # or... npm install
npm run devVerá el progreso de la construcción de la aplicación y le dará un servidor de desarrollo dedicado para verificar: http://127.0.0.1:3000/. Esto es lo que verá de inmediato (con una pequeña animación bastante interesante):
Echemos un vistazo a lo que está creando esta vista inicial de nuestra aplicación en este momento. Podemos ir al directorio `pages`, y dentro vemos que tenemos una página` index.vue`. Si lo abrimos, veremos todo el marcado que se necesitó para crear esa página. También veremos que es un archivo `.vue`, que usa componentes de un solo archivo como cualquier archivo` vue` ordinario, con una etiqueta de plantilla para el HTML, una etiqueta de secuencia de comandos para nuestras secuencias de comandos, donde estamos importando un componente, y algunos estilos en una etiqueta de estilo. (Si no está familiarizado con estos, hay más información sobre cuáles son aquí). La mejor parte de todo esto es que este archivo `.vue` no requiere ninguna configuración especial. Se coloca en el directorio `pages` y Nuxt.js hará automáticamente esta página renderizada del lado del servidor.
Creemos una nueva página y configuremos algunas rutas entre ellos. En `pages / index.vue`, descargue el contenido que ya está allí y reemplácelo con:
<template>
<div class="container">
<h1>Welcome!</h1>
<p><nuxt-link to="/product">Product page</nuxt-link></p>
</div>
</template>
<style>
.container {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
padding: 60px;
}
</style>Luego, creemos otra página en el directorio de páginas, la llamaremos `product.vue` y colocaremos este contenido dentro de ella:
<template>
<div class="container">
<h1>This is the product page</h1>
<p><nuxt-link to="https://css-tricks.com/">Home page</nuxt-link></p>
</div>
</template>De inmediato, verá esto:
¡Ta-da! 🏆
De inmediato, tenemos renderizado del lado del servidor, enrutamiento entre páginas (si revisa la URL, puede ver que va entre la página de índice y la página del producto), e incluso tenemos un pequeño y dulce cargador verde que cruza la parte superior. No tuvimos que hacer mucho para conseguirlo.
Puede que hayas notado que aquí hay un pequeño elemento especial: <nuxt-link to="https://css-tricks.com/">. Esta etiqueta se puede utilizar como a , donde envuelve un poco de contenido, y configurará un enlace de enrutamiento interno entre nuestras páginas. Usaremos to="/page-title-here" en lugar de un href.
Ahora, agreguemos algunas transiciones. Haremos esto en algunas etapas: simple a complejo.
Crear transiciones de página
Ya tenemos una barra de progreso realmente genial que se ejecuta en la parte superior de la pantalla a medida que avanzamos y hace que todo se sienta muy rápido. (Ese es un término técnico). Si bien me gusta mucho, realmente no encaja en la dirección en la que nos dirigimos, así que eliminémoslo por ahora.
Vamos a ir a nuestro archivo `nuxt.config.js` y cambiar las líneas:
/*
** Customize the progress-bar color
*/
loading: { color: '#3B8070' },a
loading: false,También notará algunas otras cosas en este nuxt.config.js Archivo. Verás nuestras metaetiquetas y head tags, así como el contenido que se renderizará dentro de ellas. Esto se debe a que no tendremos un archivo `index.html` tradicional como lo hacemos en nuestra compilación CLI normal, Nuxt.js analizará y compilará nuestro archivo` index.vue` junto con estas etiquetas y luego renderizará el contenido para nosotros, en el servidor. Si necesita agregar archivos CSS, fuentes o similares, usaríamos este archivo de configuración Nuxt.js para hacerlo.
Ahora que tenemos todo eso abajo, entendamos qué tenemos disponible para crear transiciones de página. Para comprender qué está sucediendo en la página a la que nos estamos conectando, debemos revisar cómo funciona el componente de transición en Vue. He escrito un artículo sobre esto aquí, por lo que si desea un conocimiento más profundo sobre el tema, puede consultarlo. Pero lo que realmente necesita saber es esto: bajo el capó, Nuxt.js se conectará a la funcionalidad de Vue transition componente, y nos da algunos valores predeterminados y ganchos con los que trabajar:
Puedes ver aquí que tenemos un gancho para lo que queremos que suceda. justo antes de comienza la animación enter, durante la animación / transición enter-active, y cuando acabados. Tenemos estos mismos ganchos para cuando algo se está yendo, precedidos de leave en lugar de. Podemos hacer transiciones simples que simplemente se interpolan entre estados, o podemos conectar una animación completa de CSS o JavaScript en ellos.
Por lo general, en una aplicación de Vue, envolveríamos un componente o elemento en <transition> para usar esta pequeña y hábil funcionalidad, pero Nuxt.js nos la proporcionará desde el principio. Nuestro gancho para la página comenzará, afortunadamente: page. Todo lo que tenemos que hacer para crear una animación entre páginas es agregar un poco de CSS que se conecta a los ganchos:
.page-enter-active, .page-leave-active {
transition: all .25s ease-out;
}
.page-enter, .page-leave-active {
opacity: 0;
transform-origin: 50% 50%;
}También voy a agregar un poco más de estilo aquí para que pueda ver las transiciones de página un poco más fácilmente:
html, body {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
background: #222;
color: white;
width: 100vw;
height: 100vh;
}
a, a:visited {
color: #3edada;
text-decoration: none;
}
.container {
padding: 60px;
width: 100vw;
height: 100vh;
background: #444;
}Ahora mismo estamos usando una transición CSS. Esto solo nos da la capacidad de designar qué hacer en medio de dos estados. Podríamos hacer algo un poco más interesante ajustando una animación de una manera que sugiera de dónde viene y hacia dónde va algo. Para que eso suceda, podríamos separar las transiciones para las clases de entrada de página y de salida de página activa, pero es un poco más SECO usar una animación CSS y especificar de dónde vienen y hacia dónde van las cosas, y conectarlas a cada una para .page-enter-active, y .page-leave-active:
.page-enter-active {
animation: acrossIn .45s ease-out both;
}
.page-leave-active {
animation: acrossOut .65s ease-in both;
}
@keyframes acrossIn {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes acrossOut {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}También agreguemos un poco de estilo especial a la página del producto para que podamos ver la diferencia entre estas dos páginas:
<style scoped>
.container {
background: #222;
}
</style>Esta etiqueta de ámbito es bastante buena porque aplicará los estilos para esta página / archivo vue solamente. Si ha oído hablar de los módulos CSS, estará familiarizado con este concepto.
Veríamos esto (esta página es solo para fines de demostración, probablemente sea demasiado movimiento para una transición de página típica):
Ahora, digamos que tenemos una página con una interacción totalmente diferente. Para esta página, el movimiento hacia arriba y hacia abajo fue demasiado, solo queremos un desvanecimiento simple. Para este caso, necesitaríamos cambiar el nombre de nuestro gancho de transición para separarlo.
Creemos otra página, la llamaremos página de contacto y la crearemos en el directorio de páginas.
<template>
<div class="container">
<h1>This is the contact page</h1>
<p><nuxt-link to="https://css-tricks.com/">Home page</nuxt-link></p>
</div>
</template>
<script>
export default {
transition: 'fadeOpacity'
}
</script>
<style>
.fadeOpacity-enter-active, .fadeOpacity-leave-active {
transition: opacity .35s ease-out;
}
.fadeOpacity-enter, .fadeOpacity-leave-active {
opacity: 0;
}
</style>Ahora podemos tener transiciones de dos páginas:
Puede ver cómo podríamos seguir construyendo sobre estos y crear animaciones CSS cada vez más optimizadas por página. Pero a partir de aquí, profundicemos en mis animaciones JavaScript favoritas y creemos transiciones de página con un poco más de potencia.
Ganchos de JavaScript
Vue’s <transition> El componente también ofrece algunos ganchos para usar la animación de JavaScript en lugar de CSS. Son los siguientes y cada gancho es opcional. El :css="false" El enlace le permite a Vue saber que usaremos JS para esta animación:
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-Leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
:css="false">
</transition>La otra cosa que tenemos a nuestra disposición son los modos de transición. Soy un gran admirador de estos, ya que puedes afirmar que una animación esperará a que la otra animación termine de salir antes de hacer la transición. El modo de transición con el que trabajaremos se llamará de entrada.
Podemos hacer algo realmente salvaje con JavaScript y el modo de transición, nuevamente, nos estamos volviendo un poco locos aquí para propósitos de demostración, normalmente haríamos algo mucho más sutil:
Para hacer algo como esto, he corrido yarn add gsap porque estoy usando GreenSock para esta animación. En mi página `index.vue`, puedo eliminar la animación CSS existente y agregar esto al <script> etiquetas:
import { TweenMax, Back } from 'gsap'
export default {
transition: {
mode: 'out-in',
css: false,
beforeEnter (el) {
TweenMax.set(el, {
transformPerspective: 600,
perspective: 300,
transformStyle: 'preserve-3d'
})
},
enter (el, done) {
TweenMax.to(el, 1, {
rotationY: 360,
transformOrigin: '50% 50%',
ease: Back.easeOut
})
done()
},
leave (el, done) {
TweenMax.to(el, 1, {
rotationY: 0,
transformOrigin: '50% 50%',
ease: Back.easeIn
})
done()
}
}
}Todo el código para estas demostraciones existe en mi repositorio Intro to Vue para materiales de inicio si está mejorando el aprendizaje de Vue.
Una cosa que quiero señalar aquí es que actualmente hay un error para los modos de transición en Nuxt.js. Este error se corrigió, pero el lanzamiento aún no ha salido. Todo debería estar arreglado y actualizado en la próxima versión 1.0, pero mientras tanto, aquí hay una demostración de muestra simple y funcional, y el problema a rastrear.
Con este código de trabajo y esos ganchos de JavaScript, podemos comenzar a ser mucho más elegantes y crear efectos únicos, con diferentes transiciones en cada página:
Aquí está el sitio en el que se implementó la demostración si desea verla en vivo: https://nuxt-type.now.sh/, así como el repositorio que contiene el código: https://github.com / sdras / nuxt-type
Navegación
En esa última demostración, es posible que haya notado que teníamos una navegación común en todas las páginas que enrutamos. Para crear esto, podemos ir al directorio `layouts`, y veremos un archivo llamado` default.vue`. Este directorio albergará los diseños base para todas nuestras páginas, siendo “predeterminado” el, uhm, predeterminado 🙂
Inmediatamente verá esto:
<template>
<div>
<nuxt/>
</div>
</template>Que especial <nuxt/> será donde se insertarán nuestros archivos de páginas `.vue`, por lo que para crear una navegación, podríamos insertar un componente de navegación como este:
<template>
<div>
<img class="moon" src="https://css-tricks.com/simple-server-side-rendering-routing-page-transitions-nuxt-js/~assets/FullMoon2010.png" />
<Navigation />
<nuxt/>
</div>
</template>
<script>
import Navigation from '~components/Navigation.vue'
export default {
components: {
Navigation
}
}
</script>Me encanta esto porque todo se mantiene bien y organizado entre nuestras necesidades globales y locales.
Luego tengo un componente llamado Navigation en un directorio que he llamado `components` (esta es una tarifa bastante estándar para una aplicación Vue). En este archivo, verá un montón de enlaces a las diferentes páginas:
<nav>
<div class="title">
<nuxt-link to="/rufina">Rufina</nuxt-link>
<nuxt-link to="/prata">Prata</nuxt-link>
<nuxt-link exact to="https://css-tricks.com/">Playfair</nuxt-link>
</div>
</nav>Notarás que estoy usando eso <nuxt-link> etiqueta de nuevo aunque esté en otro directorio, y el enrutamiento seguirá funcionando. Pero esa última página tiene un atributo adicional, el atributo exacto: <nuxt-link exact to="https://css-tricks.com/">Playfair</nuxt-link> Esto se debe a que hay muchas rutas que coinciden solo con el directorio `/`, de hecho, todas lo hacen. Entonces, si especificamos exact, Nuxt sabrá que solo nos referimos a la página de índice en particular.
Recursos adicionales
Si desea obtener más información sobre Nuxt, su documentación es bastante agradable y tiene muchos ejemplos para comenzar. Si desea obtener más información sobre Vue, acabo de hacer un curso sobre Frontend Masters y todos los materiales son de código abierto aquí, o puede consultar nuestra Guía de Vue, o puede ir a los documentos que son extremadamente bien escrito. ¡Feliz codificación!