Vue 2 Internal Features from the Ground Up

Q&A: SSR and Vue Custom Element

Evan You

Evan You

Creator of Vue.js
Vue 2 Internal Features from the Ground Up

Check out a free preview of the full Vue 2 Internal Features from the Ground Up course

The "Q&A: SSR and Vue Custom Element" Lesson is part of the full, Vue 2 Internal Features from the Ground Up course featured in this preview video. Here's what you'd learn in this lesson:

Evan reviews the benefits of Server Side Rendering (SSR), Vue Custom Element, and future of Vue.js.


Transcript from the "Q&A: SSR and Vue Custom Element" Lesson

>> Speaker 1: When should we consider using server side rendering with knocks? Is it purely performance, or SEO, or where exactly would the line be?
>> Evan You: So, if you go to, the first page literally talks about why services are rendering. And I think it would be better off to just read that page, than me to just read over it here [LAUGH] But to sum up, yes, better SEO, better time to content.

There are trade offs, obviously. You will have a more complex build set up and deployment requirements. And your code will also have some restrictions. You cannot just access the DOM anywhere you want, but the benefit is that your app will be able to render the first content faster.

And this really only matters when your business model depends on time to content, right? So, let's say you're building a back end dashboard, that's used internally. Nobody cares how fast it loads, as long as it loads within a second or two. Right, unless it's taking five seconds, that's probably too long.

But most view apps would definitely render within a second. So, in those cases, server-side rendering is completely unnecessary. So it's really identifying the product you're trying to build and whether time to content, and SEO are that important, and then weigh it against the trade offs of the extra deployment requirement.

The benefits of pure client side app is that deployment is extremely simple, everything is just static assets. You can throw it up on a CDN and have very good performance. But if you have server side rendering, you have pretty significant server side cost, because now you have to run Node.js servers to render stuff on every request.

So, you have to weigh the pros and cons, yeah. So, last question is how safe it will be to use Vue Custom Element as long as it's not maintained anymore by Vue official? So I haven't really been following along with the latest development of that library that much.

Our original implementation was really just a proof of concept. But the author of the new view custom element library actually does a very good job. He's very dedicated. Filling out the gap in that way. But honestly, I haven't been paying close enough attention to that library lately, so I'm afraid I cannot really say you should or should not use it.

But think just the same way as you evaluate any library. Just look at its maintenance record. How fast does the author respond to issues or push new commits. You would be able to get a general sense of how stable or reliable the library is.
>> Speaker 3: What are you excited about that's upcoming?

>> Evan You: Upcoming? One of the things we are gonna do is, the next big thing in you is probably a rewrite a build that only runs on latest modern browsers. Currently we have a lot of code that's dealing with legacy browsers, IE9 or stuff. Which sort of [COUGH] [INAUDIBLE] Library itself and places a lot of restrictions, because we cannot use any of the latest ES features.

And it's kind of a pain, because when you know ESS set on map would be better suited for this case, but you cannot use it, so you have to [INAUDIBLE] Yourself, or use a less capable alternative in the library. So, I am pretty looking forward to the day where IE is just completely dead, so that I can drop everything about them.

And then we'll rewrite the reactivity system using ES 2015 proxies, which will be able to get rid of some of the gotchas we currently have in Vue, for example, adding new properties. I'm gonna have to call vue.set if you were using properties, and you can also directly assign to indices into arrays without having to use Vue set again and you can delete properties.

And observation will be lazy by default, so there will be a lot of benefits if we are able to sort of both drop a lot of weight, and also improve the current system even more.
>> Speaker 3: And will that be side-by-side modern?
>> Evan You: Yes.
>> Speaker 3: Okay.
>> Evan You: Yes.
>> Speaker 4: What's the last year and a half been like for you?

>> Evan You: Last year and a half, it's been pretty amazing. So, it's a big transition, going from working for companies to going to work for yourself. But it's good because this is something I'm really passionate about, so. When I'm working on Vue, I'm solving all these problems, it doesn't really feel I'm being forced to work on it, it's I wanna work it.

So, I feel that this alone is very liberating, and probably worth a lot of utility to me, I'm willing to earn less money, but in fact, I've been earning more or less the same or even more than before I started to work on this full time. So, I'm pretty happy about where I am right now.

My tutor description says, I'm living the dream just working full time on open source. It's pretty amazing, yeah.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now