VueConf US 2018


1. State of Vue

Evan You

2. How We Do Vue At GitLab

Jacob Schatz

3. Vue in Motion

Rachel Nabors

4. Testing Vue apps

Edd Yerburgh

5. Serverless Functions and Vue.js

Sarah Drasner

6. vue-rx

John Lindquist

7. Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper

8. 7 secret patterns Vue consultants don't want you to know

Chris Fritz

9. Agile Design Systems in Vue

Miriam Suzanne

10. Vue & TypeScript: Up and Running

Daniel Rosenwasser

11. A React Point of Vue

Divya Sasidharan

12. Vue & SSR: The best practices

Sebastien Chopin

13. A Short Synopsis of Vue Storybook

Peter Finn

14. Prototyping with Vue Single File Component

Pine Wu

15. 5 Libraries You Should Know About

Adam Jahr

16. Update an Existing Application to Vue

Michael Bennett

17. Vue and Vuex for Complex Application State

Patrick Seda

18. Top 5 Must-Have UI Animation Patterns

Rachel Nabors

19. The Dream: A Full Rewrite

Seth White

20. Start Your Own Vue.js Meetup

Ben Hong

21. Reusability - Is It Worth It?

Shelton Clinard

22. Reactivity - Learning by Accident

Jeff Schenck

23. Quick Publishing of Redistributable SFC on NPM

Mike Dodge

24. OverVue of Vuetify.js


25. Ionic and Vue

Mike Hartington

26. Dynamic Store Modules with Vuex

Adam Bradford

27. Build a MiniFlix Clone with Vue Contest

Dan Zeitman

28. Beyond HTML with Vue

Eduardo San Martin Morote

29. Vue with AWS Lambda

Matt Biilmann

30. 40 Hour Plan For UX Proficiency

Jacob Covey

31. Code Splitting Patterns with Vue

Sean Thomas Larkin
Notify me when new talks are available.

Vue & SSR: The best practices

Vue & SSR: The best practices

Sebastien Chopin

Sebastian Chopin is the co-author of Nuxt.js and has extensive experience using node.js, Backbone.js, and doing server-side rendering.

What is Server-side rendering (SSR)?

Classic SSR is when your dynamic HTML pages are created all on the server-side before sending to the client (browser). A classic Single Page Application (SPA) is when your application code is loaded into the front-end and the browser requests the data (often using an API) and generates the dynamic page.

With Universal Application flow, the node server (on the serverside) does the data API request, generates the dynamic page, and sends HTML content back into the browser.

Then the browser downloads the JavaScript (5), and then the client hydrates (6) effectively activating the JavaScript (Vue). Then the page becomes reactive like a single page application, calling the API server when needed.

Thus, it’s a good balance between typical SSR and SPA.

Why Universal Application Flow?

  1. For SEO & Social sharing, as crawlers will directly see the fully rendered page.
  2. Faster time-to-content. Server-rendered markup doesn’t need to wait until all JavaScript has been downloaded and executed to be displayed.
  3. Saves server resources, as the server is working only one time per user to server-render the HTML, then the user has client-side rendering (except if they reload the page).

It also allows the creation of a better user experience (UX) and has more security improvements.

Sebastian shows a demo in the video where he builds a Universal rendering engine step by step eventually showing how Nuxt tries to simplify things.

Nuxt Gives You Lots of Features

  1. Vue Server Renderer using Node.js server
  2. Integrated meta tags management with vue-meta
  3. Automatic code splitting
  4. Routing based on file structure (/pages)
  5. No webpack config to maintain, which leaves you more time to focus on coding Vue.
  6. Extendable with modular architecture, including modules for Progressive Web Apps, Axios, Google Analytics, Vue-Apollo, and more.

Nuxt 2

Right now nuxt-edge is coming. It has Weppack 4 integration, no more vendors, full control over chunk splitting, Vue Loader 15, ES Modules, CLI improvments, and many other features.

To manage all the Nuxt issues and questions in the community they’re now using They found that on github it’s hard to sift through questions/bugs/feature requests, so they needed a better way. This is why he helped created, a nuxt project that any open source projects can sign up to use.