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
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
NIKKEI Tech Talk#38
cipepser
0
180
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
260
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.3k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
440
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
CSC305 Lecture 09
javiergs
PRO
0
310
ALL CODE BASE ARE BELONG TO STUDY
uzulla
27
6.7k
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
710
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
500
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
29
4k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How to Ace a Technical Interview
jacobian
280
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
KATA
mclloyd
PRO
32
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Become a Pro
speakerdeck
PRO
29
5.6k
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