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
430
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
99
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
89
Other Decks in Programming
See All in Programming
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
290
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.4k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
310
Amazon Qを使ってIaCを触ろう!
maruto
0
350
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1.1k
CSC509 Lecture 09
javiergs
PRO
0
130
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
290
Outline View in SwiftUI
1024jp
1
260
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.4k
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
480
Java ジェネリクス入門 2024
nagise
0
670
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
160
Featured
See All Featured
Faster Mobile Websites
deanohume
305
30k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
A better future with KSS
kneath
238
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Speed Design
sergeychernyshev
24
580
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
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