Filtering Data on the Server

[00:00:00]
>> So one of the these you should probably do is say, you know what? Really, we're only showing avatar, and the person's text, and nothing else. But we are now sending the GitHub, the Twitter, and everything else in there. So this is where you can get into kind of this higher level optimization and realize like I'm probably sending too much data to the client, right?

[00:00:21]
Because there is nothing that binds to the GitHub, and the Twitter, and the LinkedIn URL. But because it's a property on an object and that object has also avatar. There's no choice for the system, but to include the whole object, right? Does that make sense what I'm saying?

[00:00:40]
>> Right, so maybe this is the scenario where dataset is maybe smaller, maybe 100 records or something. But if you talk about the real data where we are having thousands or millions of rows.
>> Yes, so you have to implement some kind of pagination, or something like that or lazy fetching of data, etc.

[00:00:59]
That is no different In other frameworks as well, so we can't do magic all the way through. But we did do a whole bunch of things that I think are pretty useful out of the box, right? So many things that we could have done out of the box we already did.

[00:01:13]
So we are only sending the data that you need. We're removing the data that you don't need. We are pre-rendering on a server, we're sending only the JavaScript that's actually needed, right? So in this particular case, known as the amount of JavaScript increase, remember at the beginning, we only had the filter and nothing else.

[00:01:32]
Now, obviously, we send the filter, we send the framework, but now, we also have to send the JSX. Now, we are like, yeah, because you are messing with this filter over here. We have no choice, but to start sending to JSX as well. And so we send the JSX, and then there's some other files which should get tree shaken once the bundler kind of runs through all of it.

[00:01:55]
Actually, I think this is because I need to restart the beat. Yeah, so the number of items gets longer, because you had to do more things. But as a developer, you didn't have to think about it, it was just automatic. And it's still only a tiny portion of the overall application, right?

[00:02:17]
The other thing to keep in mind is this is dev mode. So every single fetch is a separate thing and you could get into waterfall. In production, we're gonna talk about later, we bundle things together. And so the waterfall effect won't happen, and also if it did, the service worker will save you from it.

[00:02:32]
Because it wouldn't be a separate request and we're all to be prefetching becoming out of the cache and so on. So there's a lot of other things to discuss about how this thing works in production. But the thing to understand at this point is that we can lazy fetch everything in a very fine grained thing.

[00:02:49]
So for example, the layout which we talked about earlier, right, this file, never made it to the client. And this file not only this file never made it to the client. But also the QwikCityProvider which is the QwikCity kinda the meta framework also never made it to the client.

[00:03:09]
So many things, many components that are in here, declared and written, never made it to the client. And it's kind of the point and the beauty of Qwik is that as a developer you don't have to think about it. I just write my applications that I've always written and a whole bunch of stuff just never shows up on the client.

[00:03:26]
>> Picking up where we left off, you were talking about, because you did a filter that exposes the object. And then the object has to get in line to the JSON, okay? And so what I wanna understand is, what is the guard against that? Do you map, and then filter, or is there another technique that you use?

[00:03:50]
>> Right, so the problem here is, let's look at myself over here, right? So I'm here, I'm serializing the GitHub URL, the Twitter URL and the LinkedIn URL even though it is not here. And the reason for that is because the object is reachable. And so while it's not in the UI right now, maybe I could change something in the UI and it becomes visible, right?

[00:04:15]
So the system just cannot guess, it knows that it's not used right now. But it could be used in the future when you modify something, right? So as long as an object is reachable somehow, that object has to be fully serialized. And so in this particular case, we have additional information that the system doesn't have.

[00:04:32]
And we know that our UI will never, ever render the GitHub, for example, and so we can do a smaller object. So let's go back to our index.tsx. And so right now, we're just returning contacts. Let's just run a map through that. And so the map is, So what we need to do is, we need the name, right?

[00:05:05]
So it's a c.name, for the next step, we're also gonna need the ID. So I'm just gonna include it here and we also need the avatar, Right? Now, this is gonna come, it should complain, because, I see the problems, the premise here. Now, this is gonna complain, if I can get my semicolons right.

[00:05:36]
Why is it not complaining TypeScript? Why are you not helping me? TypeScript should complain that this is no longer a contact array, this is not a smaller thing. So let's make a smaller object, not sure why the TypeScript is not. Okay, so I have a simpler object, which is the, I'm gonna call it simple context and I'm gonna have a simple contact array.

[00:06:17]
What? Is not assignable? Because avatar is a question, that's weird. Okay, the avatar is optional, okay. So now, it's a subset, right? And so now, the nice thing here, is notice that the endpoint knows that it's of type simple contact, right? And when we get to here, we know that we have array of simple contact, right?

[00:06:46]
And so we can't even access this particular data. So you're kind of getting type safety for free, right? There's other libraries out there like tRPC, which kinda give you this in the existing systems. But it's kind of just for free in quick, because of how everything just flows over.

[00:07:06]
Now, because we filtered it out at the server, if we go and see what's serialized, we see that there's a lot less data, right? We see that we have our name and we have our image URL, but we don't have anything else available, right? So this is how you kind of deal with that.