Real server-side rendering with Vue

Real server-side rendering with Vue.js

Vitalii Savchuk vitalii.savchuk@eliftech.com

Коротко

CSR

SSR

Плюси SSR

Краще SEO
Контент, який можна поширити у соціальних мережах
Короткий час до відображення контенту

Мінуси SSR

Обмеження в розробці
Суворіші вимоги до розгортання додатку
Більше навантаження на сервер

Pre-rendering

Вміє

гаряча заміна
SASS, LESS, Stylus, ...
мініфікація JS & CSS
сервер статики

Розмір min+gzip

57Кб

Як почати?

Встановлюємо vue-cli глобально

			npm install -g vue-cli

Створюємо новий проект зі шаблону

			vue init nuxt-community/starter-template <project-name>

Layouts

			<template>
			   <h1>Admin Page</h1>
			</template>
			<script>
			export default {
			   layout: 'admin-layout'
			};
			</script>

Вкладені маршрути

			<template>
			    <div>
			    <nuxt />
			    </div>
			</template>

Параметри в URL

/products/_product_id.vue

			<template>{{ $route.params.product_id }}</template>
			<script>
			export default {
				  validate ({ params }) {
				     return return /^\d+$/.test(params.product_id);

Supercharged компоненти

AsyncData

			export default {
			   data () {
			      return { project: 'default' }
			   }
			   asyncData (context) {
			      return { project: 'nuxt' }
			   }
			}

Fetch

			export default {
			   fetch ({ store, params }) {
			      return axios.get('https://.../stars')
			      	.then((res) => {
			      		store.commit('setStars', res.data)
			      	})
			   }
			}

nuxt-link

			<a href="/about">Про нас</a> <!-- Перевантажить сторінку -->

			<nuxt-link to="/about">Про нас</nuxt-link> <!-- чікі-пікі -->

Plugins

			// nuxt.config.js
			module.exports = {
			   plugins: [
			      { src: '~/plugins/vue-notifications', ssr: false }
			   ]
			};

Plugins

			// plugins/vue-notifications.js
			import Vue from 'vue';
			import VueNotifications from 'vue-notifications';
			 
			Vue.use(VueNotifications);

Modules

			module.exports = function (moduleOptions) {
			   this.addServerMiddleware({
			      path: 'robots.txt',
			      handler(req, res) {
			         res.setHeader('Content-Type', 'text/plain');
			         res.end('Kill all humans');
			      },
			   });
			};

Deploy

			npm run build
			npm start

Deploy (Pre Rendered)

			npm run generate

Deploy (SPA)

			// nuxt.config.js
			module.exports = {
			   mode: 'spa'
			};

			npm run build