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
500
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
140
Security is not a feature!
ianaya89
1
360
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
130
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
290
Vue.js, PWA & The Subway Dilemma
ianaya89
0
200
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
140
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
120
Other Decks in Programming
See All in Programming
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
14k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
Developer Joy - The New Paradigm
hollycummins
1
360
Go言語はstack overflowの夢を見るか?
logica0419
0
520
Ktorで簡単AIアプリケーション
tsukakei
0
100
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
440
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
490
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
360
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
A designer walks into a library…
pauljervisheath
209
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Music & Morning Musume
bryan
46
6.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Building Applications with DynamoDB
mza
96
6.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
How to Ace a Technical Interview
jacobian
280
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
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