Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Back in the S.S.R
Search
Ignacio Anaya
December 20, 2017
Programming
0
130
Back in the S.S.R
Back in the S.S.R: An Intro to Nuxt.js, SSR in Vue.js
Ignacio Anaya
December 20, 2017
Tweet
Share
More Decks by Ignacio Anaya
See All by Ignacio Anaya
Security is not a feature‼️
ianaya89
2
440
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
120
Security is not a feature!
ianaya89
1
320
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
100
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
250
Vue.js, PWA & The Subway Dilemma
ianaya89
0
160
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
110
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
90
Other Decks in Programming
See All in Programming
flutterkaigi_2024.pdf
kyoheig3
0
150
Outline View in SwiftUI
1024jp
1
340
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
6
1.5k
Jakarta EE meets AI
ivargrimstad
0
730
CSC509 Lecture 12
javiergs
PRO
0
160
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
Amazon Qを使ってIaCを触ろう!
maruto
0
420
距離関数を極める! / SESSIONS 2024
gam0022
0
290
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
180
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
C++でシェーダを書く
fadis
6
4.1k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Statistics for Hackers
jakevdp
796
220k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Happy Clients
brianwarren
98
6.7k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Ruby is Unlike a Banana
tanoku
97
11k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Transcript
Back in the S.S.R - @ianaya89 1
! Nacho Anaya @ianaya89 • Full Stack Developer, Tech Trainer
& Speaker • Embajador @Auth0 • Organizador @Vuenos_Aires Back in the S.S.R - @ianaya89 2
! Back in the S.S.R - @ianaya89 3
! Historia Back in the S.S.R - @ianaya89 4
Server Side Scrip*ng !""# Back in the S.S.R - @ianaya89
5
XmlHttpRequest !""# Back in the S.S.R - @ianaya89 6
AJAX !""# Back in the S.S.R - @ianaya89 7
SPA !"#" Back in the S.S.R - @ianaya89 8
! Problemas Back in the S.S.R - @ianaya89 9
Back in the S.S.R - @ianaya89 10
Back in the S.S.R - @ianaya89 11
Back in the S.S.R - @ianaya89 12
Server Side Scrip*ng Rendering !"#! Back in the S.S.R -
@ianaya89 13
Back in the S.S.R - @ianaya89 14
! Que es S.S.R.? Back in the S.S.R - @ianaya89
15
! Ventajas • SEO • Menor Tiempo de Carga •
Contenido Más Rapido • Mejor Cacheo • Mas control sobre UX Back in the S.S.R - @ianaya89 16
! Desventajas • Deploy mas complejo • Algunas restricciones •
Mas carga en el servidor Back in the S.S.R - @ianaya89 17
! SSR en Vue.js > Na%vo > Nuxt.js Back in
the S.S.R - @ianaya89 18
Back in the S.S.R - @ianaya89 19
! Numeros 1.0.0-rc11 • ✨ ~8.5K • " 14 Repos
• # Coverage • ⬇ ~85k Descargas Back in the S.S.R - @ianaya89 20
! Dependencia package.json { "name": "ssr-app", "version": "1.0.0", "scripts": {
"dev": "nuxt", "build": "nuxt build", "start": "nuxt start" }, "dependencies": { "nuxt": "^1.0.0-rc11" } } Back in the S.S.R - @ianaya89 21
!" Op$mización Gzip - Code Spli-ng - Preload - HTTP2
Back in the S.S.R - @ianaya89 22
! Estructura Back in the S.S.R - @ianaya89 23
Back in the S.S.R - @ianaya89 24
! Vue Components *.vue Back in the S.S.R - @ianaya89
25
! vue-loader Transpilacion - Bundling - HMR - Preprocesadores -
Linter Back in the S.S.R - @ianaya89 26
! vue-router pages/*.vue Back in the S.S.R - @ianaya89 27
! vue-router <nuxt-link to="/"> Back in the S.S.R - @ianaya89
28
! " " Rutas Está)cas pages/ --| user/ -----| index.vue
-----| one.vue --| index.vue Back in the S.S.R - @ianaya89 29
! " # Rutas Dinámicas pages/ --| _slug/ -----| comments.vue
-----| index.vue --| users/ -----| _id.vue --| index.vue Back in the S.S.R - @ianaya89 30
! " Async Data asyncData(context) Back in the S.S.R -
@ianaya89 31
! Layouts layouts/default.vue Back in the S.S.R - @ianaya89 32
! Layouts layouts/desktop.vue Back in the S.S.R - @ianaya89 33
! Store store/index.js Back in the S.S.R - @ianaya89 34
! Store pages/index.vue Back in the S.S.R - @ianaya89 35
! Middleware middleware/auth.js Back in the S.S.R - @ianaya89 36
! Middleware pages/secret-page.vue Back in the S.S.R - @ianaya89 37
♻ Flujo Back in the S.S.R - @ianaya89 38
! Head head() Back in the S.S.R - @ianaya89 39
⚙ Configuracion nuxt.config.js Back in the S.S.R - @ianaya89 40
! Plugins Liberias - Codigo Isomorfico - Plugins - Filters
- Mixins - Components Back in the S.S.R - @ianaya89 41
! Components components/*.vue Back in the S.S.R - @ianaya89 42
! Deploy npm run build Back in the S.S.R -
@ianaya89 43
! Sta%c Deploy npm run generate Back in the S.S.R
- @ianaya89 44
! Starters Basic - Express - Koa - Adonis -
TS - PWA Back in the S.S.R - @ianaya89 45
! Starters Back in the S.S.R - @ianaya89 46
! Demo Back in the S.S.R - @ianaya89 47
! Mas! • Nuxt API • next-cli ! • Modulos
• Express Back in the S.S.R - @ianaya89 48
! Take Away • ! Aplicaciones Universales • " "Sin"
Configuracion • # SEO • ⏱ Performance • % Ecosistema Completo Back in the S.S.R - @ianaya89 49
! Gracias! @ianaya89 bit.ly/back-ssr Back in the S.S.R - @ianaya89
50