Hydration & New Frameworks Like Qwik

Where you could you could think of it as the server side app is a sponge, what do they call it? They call it Resumable.

run your client side JavaScript, accept Where do you see that? the same way from the jump. The server side code is usable, and it doesn't have to reinstantiate And, you know, that to me is is great. Those are free wins. So So there's a lot of really neat stuff here. I highly recommend checking out. There's a bunch of quick specific things, like they have their own life cycle hooks, like use mountain, If you sign up today using the coupon code tasty treats, all lowercase and all one word, you'll get 2 months for free. Thank you so much to Century. This is a product that I use every single day. Let's talk about Sanity. Sanity has this idea of,

So in the HTML and JavaScript framework world, many times what you had was a client side JavaScript based app in the past. When that client side JavaScript Loads up, basically, just JavaScript to render your website on the client.

that's coming in client side with the server side rendered HTML.

That's it.

the client side app with the server side app, and that's a process that's frequently referred to as hydration fundamentals coming in here, so we're not just hitting everything with a it. Fetch a custom fetch on a JavaScript thing. We're actually using forms. We're actually using based.

You're you're typically writing all that stuff in React, so or Svelte or Vue or whatever, And then you also have the component tree. So how does that component tree relate to the HTML?

SSR based apps, which we just talked about a bit ago.

that available if the bots aren't able to are doing such a good job

people who run their sites without JavaScript Or for SEO even having, for quick. So, basically, you think Next. Js to React, SvelteKit to Svelte,

and the client side app is the water, And you're hydrating that sponge with the client side app. So you're kind of combining the client side app with the server side app where you're you're combining your component a tree with the HTML that is existing.

And with server side based apps that are coming from JavaScript Frameworks, you you run into the issue of, okay. We have the server side based app. We're pushing out the client as HTML, As almost 2 separate apps. The server side app runs, it spits out something, then the client side app kinda sits on top of that. This is more of like The thing that we're giving you is an interactive Quick's approach is to not do hydration So who knows what what the next gen of the stuff is or who knows what these these, you it. You know, the end result would be I think the thing that I'm looking forward to the most is the fact that most of these frameworks and meta frameworks are all having I know a lot of, you know, Astro uses a JSX like syntax.

That's React like just to do that one trick. Right? Is there is there something that could come along in in in React and it has Use callback. No. How about use,

It it's one of those things where I I I I totally don't like that it's in JSX, but I'm I'm sure I'm the minority opinion of that.

handler. We're using

So shout out to, fundamentals.

Quick's got it all, folks. I'm gonna delete the part That I said missing from quick in our notes here, and I'm gonna say missing from quick. Nothing. It's not missing anything. No. It looks it looks honestly great, and, And it is a framework reimagined for, quote, unquote, the edge.

Like an like a next gen framework thing

for a compiler to

conventions,

React suspense?

It. I think this is a new,

It. Peace. Peace.

the memoization

Wow. What? Like, what

pretty pretty cool. I think we're on, like, a a verge of,

a new thing in in frameworks that you're going to see more often. Now

Or it's just like Next. Js, but slightly different. I think, why can't Next. Js take some of those tools or fix those problems themselves, a much faster time to interact. I don't I don't get right now, and I think we've probably said that before. But I think people are are saying that That hydration is a big enough thing where you could consider, like, the next gen of frameworks to the to re I you know, there's conference talks being authored to say, alright. We have these hydration based frameworks, and now we're past that now with these new ones. But at the end of the day, I think most of those conference talks are coming from people who are working on frameworks that don't have hydration Welcome to Syntax on this Monday, hasty treat. We're gonna be talking about quick a single

like Svelte is that compiles to JavaScript.

I think it's really cool to see all of these different frameworks And then it has your prefetching in your head and your middlewares and all that, so

or you know you know what I mean? and obviously a Node one as well. I'm imagining that we'll see

Head on over to syntax.fm HTTP requests and doing things the way that the browser likes to be doing things.

Cool.

basics. We're using the platform as we just did a show about,

Yeah.

Having to completely rewrite the framework from scratch or honestly, I'm not smart enough to know the answer to that. But every time I see something like this that is like, oh, it's just like React

they basically, I think, are admitting now that,

are there's a whole lot of stuff in here. That's there's a lot of stuff in React like that.

Or drop a review if you like this show.

To do that trick to fix hydration in a different way or Svelte or Nuxt or whatever, can those frameworks themselves fix that without So HTML page from the jump without having to, their their big whole thing is that it makes the site,

Well, that was a quick hasty treat.

in a different way. I I don't know if you saw this because that was a whole thing with Svelte and React is is, React is now looking into doing a compiler. Did you see that? No.

or it's its own spec, I guess, in that instead of being use

A part of React. It's its own thing so that it can be used on other things. I think there's a fair amount of people who probably might not even realize that. Yeah. JSX

to the user.

server side rendered, it uses hooks. It uses JSX. It has It's a very similar function component base for creating components, you how about you call me back, meta stuff. So It. There are that HTML's really important for things like accessibility It's not having to re reattach essentially client side framework into the server side HTML.

JSX is its own project

Rick was just using JSX because so I I don't know too many people that are writing They react to code without JSX, but you can. You know, it's a thing you can do. Yeah. There was a for a while, we had people using, like, h or something. What was that? and then we have the client side app. And now what we need to do is kind of reconcile Div is not, yeah. I I don't really mind having a compiler. So to me, that's not, Like a huge, huge thing, and now the compilers are very fast. Ever since ES build and showed up, we don't have to worry about, like, compiler speed being, like, a huge thing anymore. So It's it's not a huge concern for me. Either way, QUIC is JSX based. It's SSR by default, so you get SSR by default. That's great. It's what does SSR mean? SSR, Analyzing going on of which modules are commonly used so that way it can bundle them efficiently.

the the node server do we need a whole new framework So with hydration, you have to wait until that client side code has initialized before you can do anything with it. Where with QUIC, from JavaScript that kind of really goes along with a lot of how I've been feeling about some front end frameworks lately where it's like, as SvelteKit is to Quick City.

that a server Yeah. They're resuming things. So they It is Vite based, so it uses

HTML run the client side app and the server side app They serialize cannot be found as the same as div error that you get in React when working with server side React code, and the client side JS and the server side JS it. Match up. So, basically, what you're doing is having to combine the JavaScript So, basically, they eliminate the need to execute any code to restore the page's Yeah. Because they They Sentry at century.i0.

Yeah. That would that would look a function. Gnarly. Because you you didn't need to transform for it. You didn't need to bundle it all. It's just a function calling it. So that was, like, the thing. I I personally

because

CSX is ideal if you like it. Yeah. That's true.

And it it's coming the the the HTML is generated from your template code that is in JavaScript,

It. It's it says it looks at it looks at a webpack launch, and it says, give me that. It just goes ahead and takes it. So, Vite has now kind of taken over everything, and I gotta Yeah. I love it because I I do love Veed. It's very fast. It's very lovely, and the tooling is great.

So the user's getting HTML side rendering thing. Is that is that right? Like, does more need to happen on the server now? I I would imagine if it's saying it has to it. The entire I would imagine that means more has to happen on the server, but servers are fast, and they're good at this kind of stuff. So,

You know, typically, that I think that's a good thing. You know, the client gets less JavaScript. The client gets less things they have to, I I guess the the a definition I found, hydration is adding client side JavaScript and application stage to server rendered HTML

You also get, like, baked in lazy loading,

load themselves, But they also get, like I said, that faster time to interactive because you don't have to wait for the client side to to to dehydrate.

easily and completely take control over the situation.

You can say, oh, this, file system based routing, it. Authoring content, static site generation,

You know you know, finding bugs is hard enough already, but fixing bugs is hard, and assigning bugs is hard, and making sure they they were fixed The next release, all that stuff isn't a lot of fun, and so that's why it really helps to have a wonderful tool like Sentry out there that can Really help you grapple with all of that. Give that to you in a big table and give you all the features that you know and want where you can it. Attach them quickly to users' releases.

that picture of it all. But there is, for a full archive of all of our shows. And don't forget to subscribe in your podcast player

Process and Remix. I think SvelteKit Remix you know, when when these new frameworks come out, for them to do interactivity.

of is not a part of React, and it is its own thing.

Use cleanup and use client effect. There there's a lot. Like, we did we didn't really talk about the quick specific, With a with the hydration approach, you're having to, like, essentially Quick city to quick or remix to big browser based,

a server, something novel or something interesting, something to gain people's attention. They have to take a slightly different approach in many ways. So, You know, QUIC is the latest of these, and, Vite behind the scenes, which 5.4.

code in this episode. I I kinda wanted to have a little bit more about, Yeah. You know, what what sets it apart? Because, you know, the syntax for these things at the end of the day is just pushing pushing pixels around in terms of, like, what's different if you do the same things. Yeah. You can do most of the same stuff on any of these things.

is I didn't see any sort of, like, And Veet just kinda said, you know what that market share that Webpack has? I'm just gonna go ahead and eat that lunch. I'm just gonna go ahead and eat all of that.

if you go to routing And then retrieving data. So they have, like, a serverless function, Which means, that they are distributed around the world to make them nice and fast. So check it out. Sanity.i0forward/

Some JavaScript to rerender all of that HTML

like, reparse the site so that you can do things like Click handlers,

Client extract

and the JavaScript to handle. Okay. So it's it's skipping the whole

Like, how does it how does it work? I don't get it. It serializes And, yeah, 2 years later, we don't have any of it. So take it with a grain of salt. Remember up raw on device,

but this just says it doesn't do that.

HTML,

on top of that

JavaScript attached So we got server side, JavaScript,

So it's just ship it's like kind of like Angular one was where it ships

So what it's not having to do is not having to

HTML and some JavaScript

the application state.

instead of

Yeah. Without having to, like, rebuild it all, essentially.

to do a handler.

and that will asynchronously

Quick City is a meta framework like, I'm so deep into compilers for the web that at the end of the day, HTML, JavaScript, and CSS,

And then they show how to Beautiful. Alright. Thanks everybody for tuning in. We'll catch you on Wednesday.

In the docs. On the quick docs, routing and then retrieving data. So you can you have a a request handler. That's the incoming.

that's neat. And that's probably what most people will be using because you want routing, like, city data loading and everything like that.

actual

So what you're seeing is Quick City, which is Quick City.

Yeah. So there's an on get

So it's very similar To a lot of these frameworks that do file based routing is that you

Yeah. It has right. It has data loading. It has at all.

Function that needs to be exported from your endpoint,

yeah. That makes sense. Here's what I'm missing. Here's what I was missing. So I quick

it. Inside of a component on the

on get And then inside of your

react or, you know, by doing, So I think What I wanted to talk a little bit about in this episode beyond like, I don't want this to just be like, hey. This is quick. Check it out.

in the, I don't wanna say client side now, but on the in the JSX could still call it. Call the client. Okay. You know, the client is, I think, consuming it. Right? I mean, it doesn't client doesn't just always refer to the browser.

So they have very, very, Quick is to Svelte JavaScript Hydration is slow.

it seems like JSX is definitely turning into one of those,

which more and more nowadays, you know, I'm gonna save my thoughts on that right now, but, being the perfect place to see all of it. Your errors and exceptions happen in your website in a way that allows you to renders your It allows QUIC to minimize the rendering code, so it's not rerendering your entire component tree like React is, which to me, that was always a thing I didn't like very much.

bluntly on their website. If you know React, you know quick because

It.

some other time, and I'm not gonna pick up the phone? How about how about that? data loading or data actions type of stuff, which if if you know like, I've been using the SvelteKit,

BUN,

Deno, and it looks kind of similar to Remix is that they have middleware for rendering it out. So they have one for Cloudflare Pages, which is

Yeah. All the other edge providers out there eventually as well. It's kinda neat. How's felt works too, and I love that. Right? Yeah. You're you're separating where you're deploying or how you're deploying would take PHP code and ship out HTML

I'm just looking at the middleware on QUIC, and

this is another thing we've talked about this is that on our Edge show is that a lot of these new frameworks are gonna be Edge first,

Edge functions, Netlify Edge,

at the end of the day, Sanity is where your content goes, and it lives in the lake. And how do you get that out? Well, you can get it out.

We've talked about them a 1000000 times, and you probably know that they are a place to put the content for your website or for your app or something like that. They have this idea of the content lake, which I I love. That's such a great way,

it. You could just don't do that. Use San Jose. Strip it.

Strip it out. Just don't do that. They all go through a, global CDN, You've got your

I haven't seen that one, but I saw another one, and I know the whole story. Like, how they found him was be a like a journalist took a photo with an iPhone, And then they just posted that

It's much more powerful than GraphQL, and you can get things much more fine grain.

syntax. That will get you double the free usage tier. Thank you, Sanity, for sponsoring. Cool. So,

They have this thing called datasets, which is you can have multiple

Quick. Quick is a new web framework that many people have been talking about lately. I it. I think sometimes it's good in these hasty treats to, like, focus on some projects like this that are, you know, cutting edge or gaining traction or just Existing that are taking a different approach to things. Like, you know, we had React as being, you know, the big big boy for a long time, the big dog.

And then they have an asset pipeline,

query language. Honestly, if you get anything out of this ad read, go check out what Grok is. It's their own query language that is Super powerful. And at first, I was like, well, what's the difference between that and GraphQL?

had all the exif data in it. Yeah.

who's the John McAfee. Have you watched that documentary?

photo run. And inside of there, you can do database calls.

sort of databases Sort of coming out where it's like you got routing.

We've been running with the big dog for a little bit here, but, to send data To the server to the server back and forth from server to client. A form or something like that? Yes. Submitting a form, grabbing data from the database, Whatever. I don't see anything about that in here, so I'm pretty sure it's not doing that. If I if I'm wrong about that, please reach out to me. But I you know, I Honestly, I've talked through these docs, and I couldn't find anything about that, And one's coming out every single day. My name is Scott Talinski. I'm a developer from Denver. And with me as always is Wes Bos.

the the data if you want. You know? Like, we've all heard these horror stories of somebody uploading a iPhone photo, and that has. I was watching the documentary on, They do also do have an entire GraphQL API, if that's what you'd prefer, to pull your data into your app or to your website.

So like, sometimes we'll, like, spearhead an episode, And this is the one that Scott has spearheaded. And then I'd like before the episode, I was like, so what is quick? And he's like, well, I'm like, hold on. This is the podcast. Don't let's not do it.

to make some content private and some content public. You can query it with Grok, which is their

a great way to put it because,

We can't use it yet because the client side code that's doing all of the functionality

And quick what Quick says here is Quick says

It reduces the time to interactive because what you're having to do before the site is interactive at all is you're having to hydrate the site. So, therefore, you're having to wait for that client side JavaScript to then load. Even though we're getting that initial first paint as HTML, And in this case, JSX.

hydration

hasn't been rehydrated into the app.

stinks.

Yeah. And it says code once. You can use the same code for your client and your server. So you know what? I I think it's really interesting.

And what I I think is really It's really interesting here is that the entire approach behind QUIC is there's a blog post that they talk about this where it says don't blame the developer for what the framework did. And that kind of, How how do you interact with the server, One thing I didn't see in here at all

based on real user metrics to understand the optimal way to bundle commonly used modules so that there's, like, some in terms of using all of those things, which is basically where you have to you have to basically reconcile the application state, the event handlers. Right? Because event handlers are often in front end frameworks.

There's also, like, this really interesting optimizer tool they have. They have something called quick optimizer that generates, or for, So it says reduced rendering upon user interaction.

the application state and framework state into HTML It's not having to then say, alright. We have like, you

Resumable.

it. The site is usable

upon rendering the application.

it. A hydration, it needs to download the JavaScript and then, like,

which the the code from Then everybody started saying, well, you know, we're kinda missing a lot of that server side speed. Right? The node servers are really fast at generating HTML.

Their whole approach is to say, we wanna eliminate hydration Vite really you know, Vite showed up, for better or for worse, And that component tree step and hydration is frequently where you get this l, No server side JavaScript whatsoever.

And the coach should should be fast enough, you know, unless I'm doing something stupid like an infinite loop. Yeah. I shouldn't I shouldn't be worrying about optimizing the framework. I shouldn't be worrying about memoizing At least has this HTML to back it up. Right? And that HTML is easily parsable.

thing. Yeah. I never want to have to use the word memoize in my friend's office. Say it. Yeah. Yeah.

you know what? the code itself. Right? I I just wanna throw in that adapter, that middleware, whatever to say. Alright. Now you can run-in this context or with this JavaScript runtime.

so you don't have to worry about or think about, like, a chunking or lazy loading your code.

QUIC is surgical about which components

it rerenders. This is done through reactivity.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest,

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

the craziest,

And what hydration is within web frameworks

Tomlinski.

Hey, everybody. I am stoked to hear about Quick. It's funny. Sometimes, which is you put your images in the pipe pipeline. You can transform them. You can resize them. You can

Monday. Monday. Monday.

Boss, and Scott, El Toro Loco,

and why it matters and how that relates to new modern frameworks HTML fundamentals We are also going to it. Hash out 2 amazing companies here that are sponsoring this episode, Sanity and Sentry. Sentry, Because I I'm not a huge fan. So but yeah. Well, that's ideal because that's why stuff is a a big deal. Let's see. Don't quote And that I swear I saw a discussion about this the other day, but the React RFCs Maybe, maybe we should hash this out on air.

Wait a second.

And this is a new framework that is JSX

QUIC comes from, Mishko, Not like a standard, but it's definitely a format that a lot of people are choosing to use, whether we've seen that with Fresh is the Deno based. Yeah. Yeah. JSX based framework that's like island architecture.

Mishko, I apologize if I mispronounced your last name here, but, he's the inventor of Angular, so he has a pedigree in front end frameworks.

Havery.

I I I think I wanna talk a little bit about, like, hydration and how, hydration is a thing in front end frameworks, especially server side rendered frameworks.

It uses Veedest and Playwright for testing, I I don't want to have to optimize the framework. The framework should optimize itself, and I should just write the code,

You push up that new version, and you can click the check to say, hey. This was fixed. And then you can be very satisfied as that bug never ever shows its head ever again because we we all know that bugs don't come back once you fix them. Right? Right, folks. We fixed them right the first time. So React, obviously,

this this bug is actually kind of a big deal. Let me attach this to a GitHub issue, And that GitHub issue can then be tracked separately and connected to this issue. Then maybe this bug can be assigned to a specific release and said, hey. This was fixed in version

Preact. There there's a ton of JSX based frameworks out there. And that's that's ideal that's ideal