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
460
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
130
Security is not a feature!
ianaya89
1
330
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
110
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
270
Vue.js, PWA & The Subway Dilemma
ianaya89
0
170
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
120
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
97
Other Decks in Programming
See All in Programming
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
Pulsar2 を雰囲気で使ってみよう
anoken
0
250
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
230
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
490
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
430
Domain-Driven Transformation
hschwentner
2
1.9k
PRレビューのお供にDanger
stoticdev
1
220
Jakarta EE meets AI
ivargrimstad
0
200
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
210
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
900
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
130
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Agile that works and the tools we love
rasmusluckow
328
21k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Unsuck your backbone
ammeep
669
57k
Designing Experiences People Love
moore
140
23k
Visualization
eitanlees
146
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Gamification - CAS2011
davidbonilla
80
5.1k
Rails Girls Zürich Keynote
gr2m
94
13k
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