009: The Jamstack Can Do That - Rendering
Maybe the world just got a little more complex ٩ʕ◕౪◕ʔ.
Welcome to Remotely Interesting brought to you by Netlify.People who were remotely interesting:People have long referred to the Jamstack as an architecture for static websites. But, dynamic data and content? Guess what, the Jamstack can do that. We try to help unravel the long, winding road of rendering terminology on the way to talking about dynamic content in the Jamstack. Hope we help clarify something, anything, let's just say we hope we didn't confuse you more!
The word "render"
TRANSCRIPT:
Cassidy Williams: [00:00:00] Previously, on Remotely Interesting.
Phil Hawksworth: [00:00:04] This could easily spiral into an entirely different episode.
Cassidy Williams: [00:00:09] Hello and welcome to Remotely interesting.
Phil Hawksworth: [00:00:12] This is Remotely Interesting.
Divya Tagtachian: [00:00:14] Well, that seems a little presumptuous.
Sarah Drasner: [00:00:16] No, no. That's the name of the show?
Tara Z. Manicsic: [00:00:26] welcome everybody to another episode of remotely. Interesting. We are very excited to have you here we are today going to talk about the Jamstack and our most long running segment that we've ever had. Because it was on one other episode,
Whoa,
called the Jamstack can do that.
Phil Hawksworth: [00:00:49] Oh, that's fun. Favorite.
Everyone loves
Tara Z. Manicsic: [00:00:51] them
Phil Hawksworth: [00:00:52] so many letters. It's
Tara Z. Manicsic: [00:00:54] so funny. All that snail mail coming in with requests for more can the Jamstack do that.
So
Tara Z. Manicsic: [00:01:02] anybody else call it snail mail?
Phil Hawksworth: [00:01:03] Yeah, my thoughts on father he's
Cassidy Williams: [00:01:08] usually I say it and someone's like, wait, you need real mail. And
then that's a whole thing.
Tara Z. Manicsic: [00:01:17] Um, and rendering on the Jamstack,
which is what we'll be talking about today.
Tara Z. Manicsic: [00:01:23] Um, I think this is a really important topic because people are so used to talking about the Jamstack being a static site, that when they think about dynamic data or hydration, It's a bit of a, nobody really understands how, I mean, people understand how it has in the damn stack, but not everybody.
There's a lot of fun around this
one as
Phil Hawksworth: [00:01:43] well.
Tara Z. Manicsic: [00:01:44] So I thought, Hey Tara,
Cassidy Williams: [00:01:45] what's fun.
Tara Z. Manicsic: [00:01:46] It's fun with a D
Ben Hong: [00:01:47] nice.
Phil Hawksworth: [00:01:50] I don't think that's quite
Ben Hong: [00:01:52] right.
Phil Hawksworth: [00:01:55] I'm heartbroken hook in that. You'll have to learn that that's not what it is now. It's really sad to me,
Tara Z. Manicsic: [00:02:01] but you know, this is the first time I heard it in the real world this week. So it's fear, not misunderstanding, fear, uncertainty, and doubt, fear, uncertainty, and doubt. And it's the first time I've ever, I just heard it this week.
We won't talk about all the things going on this past week, but like that was the first time I heard it in the non-tech world. And I was like, Oh, that's not just a techie thing.
Phil Hawksworth: [00:02:26] It's
Cassidy Williams: [00:02:26] not just something Sarah Drasner made up. Huh.
Tara Z. Manicsic: [00:02:33] So yes, fear, uncertainty and doubt, and the Jamstack community and the tech community in general, about how, how possibly could the Jamstack actually give you, render your dynamic data?
Phil Hawksworth: [00:02:46] How there, you know, I'm, I'm more troubled by the word render rendering is, Oh, what a minefield? Um,
Tara Z. Manicsic: [00:02:57] layered dessert.
Phil Hawksworth: [00:02:58] Yeah.
Lay a dessert. But it does, like, it was one of those words that once upon a time I understood and it had one definition and one meaning and everyone was happy. And then, and then I don't know things happened and it's just been, been reused. And I don't know, kind of reappropriated so many times. And I suppose really just the way that we render I should I air quotes the way we render.
Um, it's just got more complicated and they're more options now. So maybe it isn't just about. Confusion or misunderstanding, maybe just the world got a little bit more complex, but I do remember you think so? Well, I do, I do. I recall the first time I ever, um, said to someone in a conversation, um, Oh yeah, because then the server can render, uh, then it results in no server render.
And the person looked at me with kind of raised eyebrows and said, you mean the server returns HTML, like. Web server does. And I felt like I was just like bringing, um, bringing some silly buzzword into the conversation where I had no business, but it does feel like the situation just got more
Tara Z. Manicsic: [00:04:07] complicated and you felt smart.
You were like so brilliant. No,
Phil Hawksworth: [00:04:11] I, I felt like I was going to sound smart and then,
Tara Z. Manicsic: [00:04:16] well, it's funny too, because, so, uh, There are. So some we have, we do actually have written agendas for these podcasts that sometimes we look at and someone in this, in this group has helpfully put the various subtypes of rendering in the document for us to talk about.
And I'm very happy because, so I've just been doing a lot of research on rendering. And the thing that I read had the differentiator between server rendering. And server-side rendering to put server-side rendering under universal rendering, which made my brain go. I don't want to,
um,
Ben Hong: [00:04:54] yeah,
Phil Hawksworth: [00:04:55] sorry. I don't know if it was just because you said the word rendering so many times, but it started, it's already started to lose meaning for me in just that one sentence we're in such trouble in this episode.
Tara Z. Manicsic: [00:05:06] It's agreed. Let's just quit while we're ahead.
Thanks everybody.
Tara Z. Manicsic: [00:05:13] Bye. Have a good one. So, so one that we're really familiar with is pre rendering. Can somebody give me a seven word answer to what pre rendering is?
Phil Hawksworth: [00:05:27] This is making it harder. People can't see this, but it's, it's a real delight to see Cassidy counting.
If she had, if she had to count to 11, her socks would be off.
Ben Hong: [00:05:40] Now,
Phil Hawksworth: [00:05:43] I know I don't want anyone to save her and this might make for a really terrible listening, but it's just fun watching her work this through. When you build a
Cassidy Williams: [00:05:51] page before serving.
Phil Hawksworth: [00:06:03] No, we won't go down that, that road.
Tara Z. Manicsic: [00:06:05] We could do five building pages at build time. Right?
Phil Hawksworth: [00:06:09] This seems like it might be a good exercise. Cause that's, that's about the most concise and clear definition of that. I think I might ever have heard, see the
Cassidy Williams: [00:06:18] counting works count on your fingers before you do any work tasks.
Phil Hawksworth: [00:06:22] This is, this is going to be excruciating to listen to this episode.
Tara Z. Manicsic: [00:06:31] But this is what a lot of Jamstack sites do. Right. Building it build time.
Phil Hawksworth: [00:06:36] Yeah. And for me, that's, that's that at the heart of Jamstack. I mean, I know there's other things there's JavaScript that can happen in the client. That's using API APIs for me, the thing that attracted me to the Jamstack in the first place, and I think it's still really core is doing as much work upfront as possible so that your web server doesn't have to, so yeah.
Building. And I've got to get my fingers out now as well. Building the, I can't, I can't speak in counts at the same time. I can't, I can't do it. Um, but yeah, building the page ahead of time is, is pre rendering, right? So generating the view, generating the HTML, doing it, doing it at a time
Tara Z. Manicsic: [00:07:12] and it's not to add even more jargon and buzzwords, but then it makes you think about those rendering concepts of like time to first byte, time to first paint, time to first.
Uh,
Tara Z. Manicsic: [00:07:25] I think I have some here. Yeah. First Contentful paint, time to interaction. So these are all things that we use in order to kind of like give us numbers to know. Which ways are, it's like our big O notation for rendering.
Cassidy Williams: [00:07:47] That's a good way to put it, because if you think of, for example, with client side renderings. So I feel like there's a lot of confusion there because. Single-page applications were so popular for so long.
Tara Z. Manicsic: [00:07:58] Um,
Cassidy Williams: [00:07:59] a lot of times people are just like, well, client-side rendering is kind of similar because you're just putting all of that JavaScript on the page.
And so when it's loaded, it, it runs, but it is different. Uh,
and. It
Cassidy Williams: [00:08:11] differentiating between those can be confusing, but I think very key to understanding the difference between the pre rendering concept and the client side rendering concept, where client side, meaning all of the JavaScript is put on the page, meaning even the JavaScripts that does build everything and put on the page is served there.
But you cut some of that JavaScript away when you pre-render, because you did the build part to put it on the page earlier.
Tara Z. Manicsic: [00:08:36] And so, I mean, that's going to be quite fast if you're pre rendering everything. You're just serving static content. So that's going to be quite fast and you're able to cash it.
It's a little easier to understand with caching, whereas like client side rendering, you're doing the, client's doing everything right? The rendering, the data fetching all the templating and routing. So you can like, once it starts to get bigger than a simple. Single page app, you're going to have to do a lot of like codes, wedding, and lazy loading and all those other buzzwords that hurt my brain.
Phil Hawksworth: [00:09:10] Yeah. And that's the, that's the key difference, right? The, uh, between something happening on the server and happening in the client, you're then having to do all of that work in the client. So, and we all know that the. Your, your browser might be different to my browser, to the next browser is the most hostile environment for any code to run is like a web browser because they're all different and the devices are all different.
So, um, so yeah, th the client side thing is going off and fetching all of that, those resources, and then using the browser to render those, uh, on demand in their clients. And I can tell that my internet connection is failing me because even though I can feel. See you and I can hear the words coming out of my own mouth.
You don't just giggling at me cause I've frozen in an amusing pose, which no one who's listening to this or will ever be able to see, unless one of you does something horrific, um, which I trust you not to do. I
Tara Z. Manicsic: [00:10:05] tried very hard not to make any, any facial action. So we have, we have pre rendering where we're building.
We're building our assets at build time. We have client side rendering where all of that work is happening on the client. Then we have server rendering, which is all of that HTML is being built on the server and then being served up. And then we have hybrid or universal.
Phil Hawksworth: [00:10:30] So I think before we go into hybrid, I think we need to put that last qualifier on the server render, which is it's it's as you say, it's all being rendered on the server, generated on the server.
The view has been generated in the server, but it's happening on demand. Right. And that's the thing I've, I've heard, um, server render being used to describe both on demand or in advance. Um, which is for me is where a lot of confusion has come in. Cause people talk about server into, and yes, it's happening on the server rather than on the client.
But. Um, server render typically means happening per request on the server. So, uh, when a request comes in, it does, it does what it needs to do to generate that, that view.
Ben Hong: [00:11:12] They're just like, I, I know that we've just talked a lot about how rendering is such a charged term. Right. But really we're thinking about where the page is being generated.
Right. So like pre rendering is basically saying we're generating it in advance and then we'll just dropping it on the server. Whereas we're saying like where the server rendered is really the servers generating the thing. When it's being like called upon. Right? So that's like two different points of time when the thing is being generated versus client side, which is like, it is being generated, like not only on the fly, but on the client's browser.
And maybe that's another way of thinking of it instead of the rendering
Phil Hawksworth: [00:11:44] term was supercharged in our industry. Yeah. And actually you, you did something there, which has never occurred to me before, which is actually introduced a third place. Um, I cause cause when you said pre-generated and then put it on the server.
That's a suggest two different places, which he calls it is which Oh, where w th there's potential that will muddy the waters here for a second. But I think there's clearer, cleaner stuff ahead as a result, because yeah, there's rendering on the client and there's rendering on this, the web server, and then there's rendering on.
Build environment. Right? So those are the, those are the three things, but no. And how are we introducing more, more language, but it definitely does describe what you were talking about.
Tara Z. Manicsic: [00:12:26] So when we talk about then hybrid, we're talking about the,
Phil Hawksworth: [00:12:33] okay.
Tara Z. Manicsic: [00:12:34] The server is basically we're combining client side rendering and server rendering.
Right. And so we're saying that like the server is going to render that HTML plus the JavaScript that then the client side uses that JavaScript.
Ben Hong: [00:12:52] Yeah. I mean, that's what I understand. It's sort of like hydration is also tossed around a lot, I think with this particular mode, because when you're, you're getting that sort of, when we, you know, hybrid, like you're getting both the approaches of like when the frame, the frame was, we'll try to like serve up whatever is already static, whatever it doesn't need to be dynamic should already should be generated by the server.
But then anything else that, you know, basically we can't predict ahead of time that is then left up to the client to do so that's at least my. Tentative understanding of it.
Tara Z. Manicsic: [00:13:21] I was just going to say, I just always heard hydration when people want to put it simply they're like filling an object with data, but then I ran another definition that I have here.
Cause there's no way that I would memorize this. Just I could sound, try to sound cool and act like I memorized it, but it's once the HTML is rendered, hydration will process inline Jason state stored client side for data in the page and attach dumb event listeners. Which is way more complicated than just saying like, yeah, fill an object with data.
Cassidy Williams: [00:13:58] And the more I use next JS, the more I realized
Phil Hawksworth: [00:14:01] that it's
Cassidy Williams: [00:14:03] kind of. They called themselves a server side rendering framework for a very long time, but really it's a hybrid rendering framework because of stuff like this, because they they're all of the routing. They have some Jason object kind of like what, what you just described w with all that.
Put the data in a place. They have this Jason object that is loaded with the server side rendering stuff. So you can do client side transitions between pages and everything. So technically it's server side rendering, but also some of it is kind of client side rendering, but then you can also statically export it.
And so it's, it's a very funky combo framework that does all of those
Tara Z. Manicsic: [00:14:42] naming thing again, cause angular universal also does hybrid, but it's like the touting is like server side rendering. For angular and it's like, technically it's universal or hybrid rendering, but nobody can tell the difference between any of these words.
So we're just going to put the words that get a lot of attention
Phil Hawksworth: [00:15:02] in some ways. I think one of the things that's made this all harder and I don't, and I mean, I don't know if we've necessarily made it simpler so far in this conversation, but one of the things I think there's made it harder is. Uh, as more frameworks come up that try and tackle some of this and try and try and do a lot of this for us and kind of introduce some magic for this.
Um, that kind of, I don't know, makes the mental model a little bit less clear because the frameworks are doing a lot of the heavy lifting for you, which is wonderful in many ways. But I think also it puts a bit of distance between the people using the frameworks and the understanding of the fundamentals that happening.
Behind it. Um, I felt like I had a much clearer image in my head of all of the different ways that rendering happened bef like when I cobbled together something myself that years ago, you know, I, I made something with, I think I made it with Jekyll actually, which was, I took some data and I had some templates.
And at build time, I turned that into HTML and every page on my site had a view and that was done great. But then I also, um, Uh, used a bit of JavaScript to progressively enhance all of the, the links on my page to request the same bit of data that I was using at build time to populate my templates. So, so then I would just be caught in that bit of a JavaScript in as Jason and then client side, I would be doing a client render instead of a whole request and response, and that felt nice because I could, I could do.
In page transitions. I was sending more, so anything less data down the wire, but there weren't that many moving parts. I ultimately had templates that I use both as client side and server side. I had content stored as Jason objects, which was used client side and server side. And I had a really small amount of JavaScript to just kind of hijack the links and say, Oh no, if I'm I'm JavaScript doing this so I can go and do stuff with JavaScript.
So get the, get the. Jason for the view rather than just the link for the, the, the page itself. And that felt really. Clear to me when I was putting that together. And that's where I stumbled into this term isomorphic rendering, which was another example of me going look at this. I'm going to sound clever in a minute.
When I used this term and it had lots of people going, well, you're an idiot, I'd you saying things like that because it just sounds like a grandiose term for us. It's the same bit of code happening here or there. But I think the point I'm kind of dancing around a little bit is. Since I made that and I've kind of figured that model out.
Um, it didn't feel like I myself was abstracting away from the mental model of what the rendering was. Um, but I don't think I necessarily had very convenient kind of brandable terms for it. And I think that's what the frameworks kind of introduced. It's like we branding those terms so we can talk about them intelligently, but.
If we don't all agree on the same terms at the same time, then it can just get a little bit tricky.
Cassidy Williams: [00:18:03] Yeah. Same term, same time and same approaches to, to getting to those terms, because then that becomes a whole other animal
Tara Z. Manicsic: [00:18:11] because in itself, like hybrid rendering, I mean, it can like. When you get into the nitty gritty of it, the technology behind it can get pretty complicated and cumbersome, let alone the user interaction because yeah, you'll have a quicker, first time to paint, but you won't necessarily have a quicker, first time to interaction.
So you'll get that HTML page with no interaction yet. And I'm like, I've run into this so many times where I go to a website and I'm like, yeah, that one. That, that one click
Ben Hong: [00:18:41] that one.
Tara Z. Manicsic: [00:18:43] It doesn't have any of those event listeners yet, so it's not responding to my interaction with the page so I can see it.
And, yeah, that's great. But then it can be a little, even more confusing for the user because you're, it's, you're not getting that feedback.
Phil Hawksworth: [00:18:58] Yeah.
You know, if JavaScript isn't there, then all you'll get is a pre-made page that was rendered at bill time. Um, and so really there should never be a position where, well, my JavaScript is here to change the behavior of the links, but nothing else that I need. Um, and I guess different frameworks handle this stuff differently.
I mean, Ben, you've done loads of stuff with view and lots of things in the view family. Um, Does, um, I'm thinking about Nextel, I guess in particular doesn't that does not regenerate, uh, uh, a view of every page in the site, or is that something you have to tell it to do? Or is it impossible?
Ben Hong: [00:20:03] So one of the modes, right next tries to be flexible because it knows that's not always what you want, but, um, yeah, you're able to generate like, basically an HTML page for every view basically, as you would normally expect to.
And then to your point of progressively enhancing them, um, as you have them, um, that's been my experience with nuts so far.
Tara Z. Manicsic: [00:20:20] So how do we, so how do we see as done in the Jamstack? Um, as far as like getting data in. Um, and so we already talked about the fact that we pre-render a lot of pages, but so if we want that dynamic content in the damp.
And
the Dean of
Ben Hong: [00:20:38] the database
Phil Hawksworth: [00:20:47] I'll be right back. I'm just, I'm just registering a domain name.
Tara Z. Manicsic: [00:20:53] Oh, geez.
Um, so yeah, data dynamic.
Tara Z. Manicsic: [00:20:58] Jam staff.
Oh,
Phil Hawksworth: [00:21:02] whatever in front of me before we started recording, you were mostly in front of me.
Ben Hong: [00:21:07] I think felt
Phil Hawksworth: [00:21:08] a little unfairly that I was stumbling over my words. I mean, admittedly, I couldn't say my own name.
Tara Z. Manicsic: [00:21:14] Mockery.
Phil Hawksworth: [00:21:15] Yeah.
Cassidy Williams: [00:21:16] Well, you did say we wanted more bloopers in the show, so
Phil Hawksworth: [00:21:20] there
you go.
Phil Hawksworth: [00:21:23] I'm sorry, Terry. I'm sorry. I interrupted you horribly. No,
Tara Z. Manicsic: [00:21:26] it's fine. Yeah. Our coworker Jason Lang store, um, he decided he didn't want to be on the show today. He had absolutely no interest. Yeah. He wasn't sad at all that he was missing it. Uh,
but, um,
Tara Z. Manicsic: [00:21:41] yeah. Actually quite disappointed that he couldn't join us out today, but he's got a lot of really great content on how the Jamstack does this, especially with, uh, working with the Stripe API, um, and being able to do dynamic and gated content, uh, using serverless functions and Netlify functions for this kind of dynamic capability on the jam stack.
Um, and this is how we usually see it done in the Jamstack right.
Phil Hawksworth: [00:22:08] The nice thing, but again, sometimes the confusing thing about the Jamstack is that you can do, you can use so many approaches, but yeah, absolutely. You can, you can call out to API APIs and then change what's rendered on the page right there in the client through JavaScript.
So you're doing kind of client side rendering. Um, or, or you could be, um, making requests. So what you would sometimes think of as a server, but it's a serverless function that you were just mentioning there. So, and you can, you can match things, things together, which again makes the definitions of them a little bit blurry, but it's because we've got all of these tools in our toolbox now.
Um, I, I really liked the fact that, um, We can start to bring serverless functions into the equation as well. So that even though we don't have a server involved, we don't have a server to manage. We can start making requests. With almost like the mental model of, well, what if a server was there to be able to dynamically generate the response that I need and serve it up to us.
Um, and yeah, as you say, Jason's got all kinds of good examples of, of doing that with all the different API APIs or some, you know, rolling different services with, uh, with serverless functions to do that. Um, it gets
Cassidy Williams: [00:23:21] man and speaking of things, being named weirdly serverless functions. Oh,
Oh,
Tara Z. Manicsic: [00:23:28] I know
Cassidy Williams: [00:23:29] it drives me crazy that they're called that
Phil Hawksworth: [00:23:31] fine with it.
I'm fine with it.
Tara Z. Manicsic: [00:23:34] I think we see you biting your lip
Phil Hawksworth: [00:23:37] and talked about it is like, well, what about wireless charging? I have a wireless charger that my phone sits on. There's a wire in it that goes to the wall. Um, but that's okay because that was there at installation type that's infrastructure. But when I deal, when I interact with it, I don't care.
I don't, I, as the consumer of it, don't need to worry about the wires. That's someone else's problem. I pop it down there and the wireless charger does its thing. No. Why is it in my, in my problem space? Uh, I can't believe I just wasted that sentence.
Cassidy Williams: [00:24:13] That's that is a bed is a good way. To word it. I am less annoyed at the term now.
So thank
Phil Hawksworth: [00:24:19] you. Your face is still saying skeptical to me. That's just,
Cassidy Williams: [00:24:23] that's just my reaction to you, Phil.
Tara Z. Manicsic: [00:24:30] When we say server less worry less, because then you have the infrastructure provider getting everything set up for you. So you still have servers. You just have to. But I used to also say serverless worry list, pay more. Okay.
But then they did serverless functions and I'm like, well, then that just doesn't work because now you added a word at the end to make it even more confusing. So, I mean, all you basically have to say is like serverless means their servers.
Ben Hong: [00:24:58] They're just not your servers.
Phil Hawksworth: [00:25:01] You
Cassidy Williams: [00:25:02] are serverless.
Phil Hawksworth: [00:25:03] Yes, yes. Yeah.
Tara Z. Manicsic: [00:25:07] Nacho servers.
Phil Hawksworth: [00:25:08] Yeah.
Cassidy Williams: [00:25:10] That was cheesy Tara.
Phil Hawksworth: [00:25:11] Oh. Oh,
Ben Hong: [00:25:13] got registered that domain
Phil Hawksworth: [00:25:14] now.
Ben Hong: [00:25:15] Mm.
Yeah, I think,
Tara Z. Manicsic: [00:25:19] um, what, so what I like about Netlify functions is it serverless functions. It's basically a wrapper for the Atrius Lambda functions, but then you don't have to do all that, like computing and set up and stuff that makes it it's like one, it's like a few less levels of complication. In my eyes, like you just make the function that you want, you pass it through to Netlify functions, and then you have that serverless functions and then you never really have to say serverless functions.
You can just say. That's my Netlify function.
Phil Hawksworth: [00:25:51] That's some clever branding judo, but I do. I love that too. I love, I love, um, getting the capabilities that you would normally expect to have to maintain some server or some infrastructure for by writing code and. Pushing it, when you deploy and not caring about infrastructure, not parent caring about provisioning, anything, just like, well, I've got some functions that will be executed at some time time.
I'll put them here and I'll deploy it with the site and, you know, Done happy dance. Um, so yeah, I really liked that model and I think it's gradually expanding. Isn't it? The more, this, this kind of, part of the, uh, ecosystem like matures, uh, you know, when we're seeing serverless functions and now kind of edge handlers, kind of again, to throw another thing in there, just these, um, these capabilities are just growing all the time and it's.
It doesn't make it any simpler for naming things or describing things, but it certainly makes it simpler for the model of building things. I think, where you can write code and push it and it executes where it needs to execute.
Cassidy Williams: [00:26:56] Yeah. There's less need for on-call rotations, which I really like.
Phil Hawksworth: [00:27:01] Oh yeah.
You don't want to do any more PagerDuty. You don't miss your pager PagerDuty rotation.
Tara Z. Manicsic: [00:27:08] It's like I got rid of pagers. I don't want an app that does the same annoying thing to me
through the
Phil Hawksworth: [00:27:13] night. Did you ever have a pager to anyone on this course?
Tara Z. Manicsic: [00:27:17] I had a pager. I know how to do so many messages in only numeric form.
I won't tell you the top
Tara Z. Manicsic: [00:27:27] three that I remember.
Phil Hawksworth: [00:27:30] That's probably wise in the director's cut of this episode. That's the premium content that people have to pay hard cash.
Tara Z. Manicsic: [00:27:39] I remember going to the pager store and like going to the case of pagers and being like, Oh, there's a crystal blue one now
Ben Hong: [00:27:49] I'm,
Phil Hawksworth: [00:27:50] I'm honestly still stuck on the, going to the pages store.
Tara Z. Manicsic: [00:27:56] What's cool to me. So I mostly, this is going to sound like a plug disclaimer, because this is the ones that these are the ones that I have the most interaction with. But like, so as far as like having dynamic, are there things like, um,
the
Tara Z. Manicsic: [00:28:11] Netlify identity widget, which also uses serverless functions in the background?
So again like your, so you have a pre-rendered page that's pooling up. Uh, that's like loading up the JavaScript and the template that you need for there to be off, but it's doing it with a serverless function. I think Azzurro has stuff like this as well. Um, yeah. And so there's like, so like thinking about how people, how I don't want to just put app, it's not apples to apples whatsoever, but thinking as far as like having dynamic data by doing like hybrid rendering or universal rendering, And then having that Jamstack approach of like having that dynamic data, but using utilities and kind of delegating that workload
to
Tara Z. Manicsic: [00:29:01] a different technology that will give you serverless functions.
That path for me was just so much better,
like even
Tara Z. Manicsic: [00:29:10] forms, like doing dynamic information with forms, like to use Netlify forms to do that, that just. That I liked it didn't feel like magic. But it felt as good as magic feels.
Phil Hawksworth: [00:29:25] I can't believe we even bother having a marketing department at NFR. Just record your words and write them on the page.
Tara Z. Manicsic: [00:29:34] Do you know that I'm a business school dropout? I tried to go to school for marketing, but I was so horrible that I just went to math class and pottery.
Is there anything
Phil Hawksworth: [00:29:48] else? W is there anything else? They can't be any more types of rendering. There's so much to discuss around it, but it's so hard to just add clarity. I was, well, I'm sorry, this is rude while you're talking. I was just browsing.
I wasn't just like shopping or anything, but I, I w
Ben Hong: [00:30:08] I thought I'll
Phil Hawksworth: [00:30:09] just pop over to Jamstack.org. And we, you know, cause they've got a bit of a rescan recently and one of the things we've started to add was a glossary, which is only small at the moment, but it's a community site that will expand over time.
And I thought, well, maybe between us, we've already done some effort to define this, these things and. I'm sorry to say that. Well, I'm very happy to say there are definitions for client render for pre-render pre-generated server render and many of the things beside none of them though. I'm very sorry to say, can do it in seven words.
So
Cassidy Williams: [00:30:44] bring out the fingers.
Tara Z. Manicsic: [00:30:53] We got to cast it by it. Classify
Phil Hawksworth: [00:30:55] it. So, yeah, since they have more than seven words, I'm not going to read them out, but we'll link them in the show notes because these are these, a little definitions in here as well. That that might, might be less wordy than some of our efforts, but wordier than Cassidy's slam dunk.
Tara Z. Manicsic: [00:31:11] I think that we have to start wrapping up this episode because it could get out of hand. But, um, I just want to say also, like you can always reach any of us, um, online or tweet at us at the Netlify account. If there's something that you want us to even delve deeper into. So if you just want an episode about, uh, serverless functions or you just want an episode about how to do off.
What did you
Cassidy Williams: [00:31:41] say?
Phil Hawksworth: [00:31:46] Well, you, were you making fun of terror or was that a genuine request? Cause it looks like she's writing an agenda for the next episode.
Ben Hong: [00:31:54] It's
Phil Hawksworth: [00:31:55] the new thing.
Cassidy Williams: [00:31:57] It was people trying to replace that between like PagerDuty, but also remember yo when Yoko came out,
Tara Z. Manicsic: [00:32:02] that was
all it
Cassidy Williams: [00:32:04] was, was you send the yo to each other.
That was, that was a big hit for awhile.
Tara Z. Manicsic: [00:32:09] We'll see. I thought you said depers like, we'll dig deeper in this something, but like jeepers, but deeper
Phil Hawksworth: [00:32:17] differs. That's going to be our new, regular section of the show. Now it's time for our deepest deepest.
Tara Z. Manicsic: [00:32:28] Uh, so I was like, that's why I was confused. Cause I was like, I like that.
Cassidy Williams: [00:32:33] You're branding mind.
Perfect.
Tara Z. Manicsic: [00:32:37] So we're always happy to talk about any of these things, um, more in depth. Um, but there is a, there's a series segment of the show that, uh, we call tidbits and thought things where we ask one question to kind of wrap up the show, um, kind of around what we talked about.
So just like a serious, um, Kind of inquisition about if you had your own physical, local storage or cash that you could access at any time from anywhere. What's one thing you would put in there.
Phil Hawksworth: [00:33:12] Okay. Palmer, ham. Next question. Move on.
Tara Z. Manicsic: [00:33:15] Really? Isn't really food. Mine is totally food. It's got
Phil Hawksworth: [00:33:18] a cost it's food and it's yeah.
It's delicious. Cured meats. I don't understand what we're even debating
Cassidy Williams: [00:33:24] him, him, him, him, him, him
Tara Z. Manicsic: [00:33:26] minus totally food. It would totally be like nachos, but like perfect bites of Natchez so that I could just dip in a perfect bite. Has every ingredient on it. And the ship is still crispy. Obviously
Cassidy Williams: [00:33:40] it's just outside the, like nucleus of the plate of nachos, because it's got everything, but it's not integral to the integrity of the pile.
Phil Hawksworth: [00:33:49] I like that. Right. And it has the right amount of, of kind of stodginess, but you can still pick it up without bringing the rest of the plate with it. The
Tara Z. Manicsic: [00:33:58] perfect, I mean, I don't need stodginess to be honest.
Phil Hawksworth: [00:34:05] Do you want any melted cheese on there? I feel like we're going slightly deeper into what maybe anyone was expecting.
Cassidy Williams: [00:34:15] Mine would be bubble tea.
Tara Z. Manicsic: [00:34:17] Oh, that's a good
Phil Hawksworth: [00:34:18] one.
Cassidy Williams: [00:34:18] If I could just have instant access to just Boba at any time. Oh, that would be
Tara Z. Manicsic: [00:34:23] great. Even if you make it at home, that Boba only lasts for a day. So you can't just have a massive amount of Boba.
Cassidy Williams: [00:34:28] Right? Exactly. And so if I had a physical cash that I could access at any time with some fresh bubble
Phil Hawksworth: [00:34:33] tea,
Tara Z. Manicsic: [00:34:34] Yeah, that's a good one.
Gosh,
Ben Hong: [00:34:36] I went, I don't know if it's just like all like the zombie shows, like I literally went survival mode. I was like, I want an ax. I want like a metal ax at, I can like start fires. I can chop wood.
Cassidy Williams: [00:34:51] I definitely was thinking that way until filler terror wet. And I was just like, actually, yeah, but it would be much better, but like, I was thinking, what if I just had like a wrench, just some kind of tool that I
Phil Hawksworth: [00:35:04] could use. Wait, in many ways Ben wins here because he has an act. So since he has his acts, he also has terrorist nachos because she can't defend that.
well, I mean, I don't want to surrender my power, my ham, the diver. I've got, but if Ben comes with his acts, then,
well,
Cassidy Williams: [00:35:26] bye
Phil Hawksworth: [00:35:29] bye.
It's a good, that is a good point.
Cassidy Williams: [00:35:33] It'd be very convenient for chopping him.
Tara Z. Manicsic: [00:35:35] Oh yeah. I want to chop a Hamlin, an ax.
That sounds fun.
Cassidy Williams: [00:35:40] It does some pretty fun.
Tara Z. Manicsic: [00:35:42] I cut a watermelon with a sword that was fun.
Ben Hong: [00:35:52] The real life
Cassidy Williams: [00:35:54] next time on remotely. Interesting. We made an awesome thing to help you learn the Jamstack introducing Jamstack explorers the guts. And when we say guts, we mean like the internal organs of this project that we made an internal organs are not actual body parts, but the inner workings of the code and the frameworks that we use and stuff, I promise it's going to be good.
Well, we'll at least try and. My name is Cassidy optimist, loser Williams.
Ben Hong: [00:36:21] My name is Ben laser jam hall,
Phil Hawksworth: [00:36:24] art and Phil bumblebee.
Tara Z. Manicsic: [00:36:26] And I'm Tara Magnus, Jasmine Nixon. Thank you all so much for joining us today on remotely. Interesting.
Cassidy Williams: [00:36:48] Oh, we, we missed that, Phil. I'm
Phil Hawksworth: [00:36:50] sorry,
Tara Z. Manicsic: [00:36:52] Chris. Got it.
Phil Hawksworth: [00:36:54] Good. When Chris is listening to this, I sound fine. And you all sound like the idiots that's true,
Tara Z. Manicsic: [00:37:04] which is like the opposite than in person.
The word "render"
- what's in a word
- the different types of rendering
- quitting while we're ahead
- how to describe it simply
- how we use it in the Jamstack
- how does it compare to client-side rendering
- what's happening where?
- how does hybrid rendering generate pages
- Hydration meditation
- put the data in a place
- how to Phil-render
- naming things is hard
- how the Nuxt does that work
- serverless function
- grabbing data from APIs
- Phil's not worried about wires
- how Netlify function, Netlify function & edge handlers make building things simpler
- helpful Jamstack glossary
- deepers, our new segment
- If you had your own physical personal cache you could reach into at any time, what would be in it?
- Jason's stripe posts https://www.netlify.com/blog/2020/07/13/manage-subscriptions-and-protect-content-with-stripe/#main
- Phil's isomorphic rendering post (https://www.hawksworx.com/blog/isomorphic-rendering-on-the-jam-stack/)
- Phil's serverless fallback rendering post (https://css-tricks.com/static-first-pre-generated-jamstack-sites-with-serverless-rendering-as-a-fallback/)
- Netlify Functions
- https://jamstack.org/glossary/
TRANSCRIPT:
Cassidy Williams: [00:00:00] Previously, on Remotely Interesting.
Phil Hawksworth: [00:00:04] This could easily spiral into an entirely different episode.
Cassidy Williams: [00:00:09] Hello and welcome to Remotely interesting.
Phil Hawksworth: [00:00:12] This is Remotely Interesting.
Divya Tagtachian: [00:00:14] Well, that seems a little presumptuous.
Sarah Drasner: [00:00:16] No, no. That's the name of the show?
Tara Z. Manicsic: [00:00:26] welcome everybody to another episode of remotely. Interesting. We are very excited to have you here we are today going to talk about the Jamstack and our most long running segment that we've ever had. Because it was on one other episode,
Whoa,
called the Jamstack can do that.
Phil Hawksworth: [00:00:49] Oh, that's fun. Favorite.
Everyone loves
Tara Z. Manicsic: [00:00:51] them
Phil Hawksworth: [00:00:52] so many letters. It's
Tara Z. Manicsic: [00:00:54] so funny. All that snail mail coming in with requests for more can the Jamstack do that.
So
Tara Z. Manicsic: [00:01:02] anybody else call it snail mail?
Phil Hawksworth: [00:01:03] Yeah, my thoughts on father he's
Cassidy Williams: [00:01:08] usually I say it and someone's like, wait, you need real mail. And
then that's a whole thing.
Tara Z. Manicsic: [00:01:17] Um, and rendering on the Jamstack,
which is what we'll be talking about today.
Tara Z. Manicsic: [00:01:23] Um, I think this is a really important topic because people are so used to talking about the Jamstack being a static site, that when they think about dynamic data or hydration, It's a bit of a, nobody really understands how, I mean, people understand how it has in the damn stack, but not everybody.
There's a lot of fun around this
one as
Phil Hawksworth: [00:01:43] well.
Tara Z. Manicsic: [00:01:44] So I thought, Hey Tara,
Cassidy Williams: [00:01:45] what's fun.
Tara Z. Manicsic: [00:01:46] It's fun with a D
Ben Hong: [00:01:47] nice.
Phil Hawksworth: [00:01:50] I don't think that's quite
Ben Hong: [00:01:52] right.
Phil Hawksworth: [00:01:55] I'm heartbroken hook in that. You'll have to learn that that's not what it is now. It's really sad to me,
Tara Z. Manicsic: [00:02:01] but you know, this is the first time I heard it in the real world this week. So it's fear, not misunderstanding, fear, uncertainty, and doubt, fear, uncertainty, and doubt. And it's the first time I've ever, I just heard it this week.
We won't talk about all the things going on this past week, but like that was the first time I heard it in the non-tech world. And I was like, Oh, that's not just a techie thing.
Phil Hawksworth: [00:02:26] It's
Cassidy Williams: [00:02:26] not just something Sarah Drasner made up. Huh.
Tara Z. Manicsic: [00:02:33] So yes, fear, uncertainty and doubt, and the Jamstack community and the tech community in general, about how, how possibly could the Jamstack actually give you, render your dynamic data?
Phil Hawksworth: [00:02:46] How there, you know, I'm, I'm more troubled by the word render rendering is, Oh, what a minefield? Um,
Tara Z. Manicsic: [00:02:57] layered dessert.
Phil Hawksworth: [00:02:58] Yeah.
Lay a dessert. But it does, like, it was one of those words that once upon a time I understood and it had one definition and one meaning and everyone was happy. And then, and then I don't know things happened and it's just been, been reused. And I don't know, kind of reappropriated so many times. And I suppose really just the way that we render I should I air quotes the way we render.
Um, it's just got more complicated and they're more options now. So maybe it isn't just about. Confusion or misunderstanding, maybe just the world got a little bit more complex, but I do remember you think so? Well, I do, I do. I recall the first time I ever, um, said to someone in a conversation, um, Oh yeah, because then the server can render, uh, then it results in no server render.
And the person looked at me with kind of raised eyebrows and said, you mean the server returns HTML, like. Web server does. And I felt like I was just like bringing, um, bringing some silly buzzword into the conversation where I had no business, but it does feel like the situation just got more
Tara Z. Manicsic: [00:04:07] complicated and you felt smart.
You were like so brilliant. No,
Phil Hawksworth: [00:04:11] I, I felt like I was going to sound smart and then,
Tara Z. Manicsic: [00:04:16] well, it's funny too, because, so, uh, There are. So some we have, we do actually have written agendas for these podcasts that sometimes we look at and someone in this, in this group has helpfully put the various subtypes of rendering in the document for us to talk about.
And I'm very happy because, so I've just been doing a lot of research on rendering. And the thing that I read had the differentiator between server rendering. And server-side rendering to put server-side rendering under universal rendering, which made my brain go. I don't want to,
um,
Ben Hong: [00:04:54] yeah,
Phil Hawksworth: [00:04:55] sorry. I don't know if it was just because you said the word rendering so many times, but it started, it's already started to lose meaning for me in just that one sentence we're in such trouble in this episode.
Tara Z. Manicsic: [00:05:06] It's agreed. Let's just quit while we're ahead.
Thanks everybody.
Tara Z. Manicsic: [00:05:13] Bye. Have a good one. So, so one that we're really familiar with is pre rendering. Can somebody give me a seven word answer to what pre rendering is?
Phil Hawksworth: [00:05:27] This is making it harder. People can't see this, but it's, it's a real delight to see Cassidy counting.
If she had, if she had to count to 11, her socks would be off.
Ben Hong: [00:05:40] Now,
Phil Hawksworth: [00:05:43] I know I don't want anyone to save her and this might make for a really terrible listening, but it's just fun watching her work this through. When you build a
Cassidy Williams: [00:05:51] page before serving.
Phil Hawksworth: [00:06:03] No, we won't go down that, that road.
Tara Z. Manicsic: [00:06:05] We could do five building pages at build time. Right?
Phil Hawksworth: [00:06:09] This seems like it might be a good exercise. Cause that's, that's about the most concise and clear definition of that. I think I might ever have heard, see the
Cassidy Williams: [00:06:18] counting works count on your fingers before you do any work tasks.
Phil Hawksworth: [00:06:22] This is, this is going to be excruciating to listen to this episode.
Tara Z. Manicsic: [00:06:31] But this is what a lot of Jamstack sites do. Right. Building it build time.
Phil Hawksworth: [00:06:36] Yeah. And for me, that's, that's that at the heart of Jamstack. I mean, I know there's other things there's JavaScript that can happen in the client. That's using API APIs for me, the thing that attracted me to the Jamstack in the first place, and I think it's still really core is doing as much work upfront as possible so that your web server doesn't have to, so yeah.
Building. And I've got to get my fingers out now as well. Building the, I can't, I can't speak in counts at the same time. I can't, I can't do it. Um, but yeah, building the page ahead of time is, is pre rendering, right? So generating the view, generating the HTML, doing it, doing it at a time
Tara Z. Manicsic: [00:07:12] and it's not to add even more jargon and buzzwords, but then it makes you think about those rendering concepts of like time to first byte, time to first paint, time to first.
Uh,
Tara Z. Manicsic: [00:07:25] I think I have some here. Yeah. First Contentful paint, time to interaction. So these are all things that we use in order to kind of like give us numbers to know. Which ways are, it's like our big O notation for rendering.
Cassidy Williams: [00:07:47] That's a good way to put it, because if you think of, for example, with client side renderings. So I feel like there's a lot of confusion there because. Single-page applications were so popular for so long.
Tara Z. Manicsic: [00:07:58] Um,
Cassidy Williams: [00:07:59] a lot of times people are just like, well, client-side rendering is kind of similar because you're just putting all of that JavaScript on the page.
And so when it's loaded, it, it runs, but it is different. Uh,
and. It
Cassidy Williams: [00:08:11] differentiating between those can be confusing, but I think very key to understanding the difference between the pre rendering concept and the client side rendering concept, where client side, meaning all of the JavaScript is put on the page, meaning even the JavaScripts that does build everything and put on the page is served there.
But you cut some of that JavaScript away when you pre-render, because you did the build part to put it on the page earlier.
Tara Z. Manicsic: [00:08:36] And so, I mean, that's going to be quite fast if you're pre rendering everything. You're just serving static content. So that's going to be quite fast and you're able to cash it.
It's a little easier to understand with caching, whereas like client side rendering, you're doing the, client's doing everything right? The rendering, the data fetching all the templating and routing. So you can like, once it starts to get bigger than a simple. Single page app, you're going to have to do a lot of like codes, wedding, and lazy loading and all those other buzzwords that hurt my brain.
Phil Hawksworth: [00:09:10] Yeah. And that's the, that's the key difference, right? The, uh, between something happening on the server and happening in the client, you're then having to do all of that work in the client. So, and we all know that the. Your, your browser might be different to my browser, to the next browser is the most hostile environment for any code to run is like a web browser because they're all different and the devices are all different.
So, um, so yeah, th the client side thing is going off and fetching all of that, those resources, and then using the browser to render those, uh, on demand in their clients. And I can tell that my internet connection is failing me because even though I can feel. See you and I can hear the words coming out of my own mouth.
You don't just giggling at me cause I've frozen in an amusing pose, which no one who's listening to this or will ever be able to see, unless one of you does something horrific, um, which I trust you not to do. I
Tara Z. Manicsic: [00:10:05] tried very hard not to make any, any facial action. So we have, we have pre rendering where we're building.
We're building our assets at build time. We have client side rendering where all of that work is happening on the client. Then we have server rendering, which is all of that HTML is being built on the server and then being served up. And then we have hybrid or universal.
Phil Hawksworth: [00:10:30] So I think before we go into hybrid, I think we need to put that last qualifier on the server render, which is it's it's as you say, it's all being rendered on the server, generated on the server.
The view has been generated in the server, but it's happening on demand. Right. And that's the thing I've, I've heard, um, server render being used to describe both on demand or in advance. Um, which is for me is where a lot of confusion has come in. Cause people talk about server into, and yes, it's happening on the server rather than on the client.
But. Um, server render typically means happening per request on the server. So, uh, when a request comes in, it does, it does what it needs to do to generate that, that view.
Ben Hong: [00:11:12] They're just like, I, I know that we've just talked a lot about how rendering is such a charged term. Right. But really we're thinking about where the page is being generated.
Right. So like pre rendering is basically saying we're generating it in advance and then we'll just dropping it on the server. Whereas we're saying like where the server rendered is really the servers generating the thing. When it's being like called upon. Right? So that's like two different points of time when the thing is being generated versus client side, which is like, it is being generated, like not only on the fly, but on the client's browser.
And maybe that's another way of thinking of it instead of the rendering
Phil Hawksworth: [00:11:44] term was supercharged in our industry. Yeah. And actually you, you did something there, which has never occurred to me before, which is actually introduced a third place. Um, I cause cause when you said pre-generated and then put it on the server.
That's a suggest two different places, which he calls it is which Oh, where w th there's potential that will muddy the waters here for a second. But I think there's clearer, cleaner stuff ahead as a result, because yeah, there's rendering on the client and there's rendering on this, the web server, and then there's rendering on.
Build environment. Right? So those are the, those are the three things, but no. And how are we introducing more, more language, but it definitely does describe what you were talking about.
Tara Z. Manicsic: [00:12:26] So when we talk about then hybrid, we're talking about the,
Phil Hawksworth: [00:12:33] okay.
Tara Z. Manicsic: [00:12:34] The server is basically we're combining client side rendering and server rendering.
Right. And so we're saying that like the server is going to render that HTML plus the JavaScript that then the client side uses that JavaScript.
Ben Hong: [00:12:52] Yeah. I mean, that's what I understand. It's sort of like hydration is also tossed around a lot, I think with this particular mode, because when you're, you're getting that sort of, when we, you know, hybrid, like you're getting both the approaches of like when the frame, the frame was, we'll try to like serve up whatever is already static, whatever it doesn't need to be dynamic should already should be generated by the server.
But then anything else that, you know, basically we can't predict ahead of time that is then left up to the client to do so that's at least my. Tentative understanding of it.
Tara Z. Manicsic: [00:13:21] I was just going to say, I just always heard hydration when people want to put it simply they're like filling an object with data, but then I ran another definition that I have here.
Cause there's no way that I would memorize this. Just I could sound, try to sound cool and act like I memorized it, but it's once the HTML is rendered, hydration will process inline Jason state stored client side for data in the page and attach dumb event listeners. Which is way more complicated than just saying like, yeah, fill an object with data.
Cassidy Williams: [00:13:58] And the more I use next JS, the more I realized
Phil Hawksworth: [00:14:01] that it's
Cassidy Williams: [00:14:03] kind of. They called themselves a server side rendering framework for a very long time, but really it's a hybrid rendering framework because of stuff like this, because they they're all of the routing. They have some Jason object kind of like what, what you just described w with all that.
Put the data in a place. They have this Jason object that is loaded with the server side rendering stuff. So you can do client side transitions between pages and everything. So technically it's server side rendering, but also some of it is kind of client side rendering, but then you can also statically export it.
And so it's, it's a very funky combo framework that does all of those
Tara Z. Manicsic: [00:14:42] naming thing again, cause angular universal also does hybrid, but it's like the touting is like server side rendering. For angular and it's like, technically it's universal or hybrid rendering, but nobody can tell the difference between any of these words.
So we're just going to put the words that get a lot of attention
Phil Hawksworth: [00:15:02] in some ways. I think one of the things that's made this all harder and I don't, and I mean, I don't know if we've necessarily made it simpler so far in this conversation, but one of the things I think there's made it harder is. Uh, as more frameworks come up that try and tackle some of this and try and try and do a lot of this for us and kind of introduce some magic for this.
Um, that kind of, I don't know, makes the mental model a little bit less clear because the frameworks are doing a lot of the heavy lifting for you, which is wonderful in many ways. But I think also it puts a bit of distance between the people using the frameworks and the understanding of the fundamentals that happening.
Behind it. Um, I felt like I had a much clearer image in my head of all of the different ways that rendering happened bef like when I cobbled together something myself that years ago, you know, I, I made something with, I think I made it with Jekyll actually, which was, I took some data and I had some templates.
And at build time, I turned that into HTML and every page on my site had a view and that was done great. But then I also, um, Uh, used a bit of JavaScript to progressively enhance all of the, the links on my page to request the same bit of data that I was using at build time to populate my templates. So, so then I would just be caught in that bit of a JavaScript in as Jason and then client side, I would be doing a client render instead of a whole request and response, and that felt nice because I could, I could do.
In page transitions. I was sending more, so anything less data down the wire, but there weren't that many moving parts. I ultimately had templates that I use both as client side and server side. I had content stored as Jason objects, which was used client side and server side. And I had a really small amount of JavaScript to just kind of hijack the links and say, Oh no, if I'm I'm JavaScript doing this so I can go and do stuff with JavaScript.
So get the, get the. Jason for the view rather than just the link for the, the, the page itself. And that felt really. Clear to me when I was putting that together. And that's where I stumbled into this term isomorphic rendering, which was another example of me going look at this. I'm going to sound clever in a minute.
When I used this term and it had lots of people going, well, you're an idiot, I'd you saying things like that because it just sounds like a grandiose term for us. It's the same bit of code happening here or there. But I think the point I'm kind of dancing around a little bit is. Since I made that and I've kind of figured that model out.
Um, it didn't feel like I myself was abstracting away from the mental model of what the rendering was. Um, but I don't think I necessarily had very convenient kind of brandable terms for it. And I think that's what the frameworks kind of introduced. It's like we branding those terms so we can talk about them intelligently, but.
If we don't all agree on the same terms at the same time, then it can just get a little bit tricky.
Cassidy Williams: [00:18:03] Yeah. Same term, same time and same approaches to, to getting to those terms, because then that becomes a whole other animal
Tara Z. Manicsic: [00:18:11] because in itself, like hybrid rendering, I mean, it can like. When you get into the nitty gritty of it, the technology behind it can get pretty complicated and cumbersome, let alone the user interaction because yeah, you'll have a quicker, first time to paint, but you won't necessarily have a quicker, first time to interaction.
So you'll get that HTML page with no interaction yet. And I'm like, I've run into this so many times where I go to a website and I'm like, yeah, that one. That, that one click
Ben Hong: [00:18:41] that one.
Tara Z. Manicsic: [00:18:43] It doesn't have any of those event listeners yet, so it's not responding to my interaction with the page so I can see it.
And, yeah, that's great. But then it can be a little, even more confusing for the user because you're, it's, you're not getting that feedback.
Phil Hawksworth: [00:18:58] Yeah.
You know, if JavaScript isn't there, then all you'll get is a pre-made page that was rendered at bill time. Um, and so really there should never be a position where, well, my JavaScript is here to change the behavior of the links, but nothing else that I need. Um, and I guess different frameworks handle this stuff differently.
I mean, Ben, you've done loads of stuff with view and lots of things in the view family. Um, Does, um, I'm thinking about Nextel, I guess in particular doesn't that does not regenerate, uh, uh, a view of every page in the site, or is that something you have to tell it to do? Or is it impossible?
Ben Hong: [00:20:03] So one of the modes, right next tries to be flexible because it knows that's not always what you want, but, um, yeah, you're able to generate like, basically an HTML page for every view basically, as you would normally expect to.
And then to your point of progressively enhancing them, um, as you have them, um, that's been my experience with nuts so far.
Tara Z. Manicsic: [00:20:20] So how do we, so how do we see as done in the Jamstack? Um, as far as like getting data in. Um, and so we already talked about the fact that we pre-render a lot of pages, but so if we want that dynamic content in the damp.
And
the Dean of
Ben Hong: [00:20:38] the database
Phil Hawksworth: [00:20:47] I'll be right back. I'm just, I'm just registering a domain name.
Tara Z. Manicsic: [00:20:53] Oh, geez.
Um, so yeah, data dynamic.
Tara Z. Manicsic: [00:20:58] Jam staff.
Oh,
Phil Hawksworth: [00:21:02] whatever in front of me before we started recording, you were mostly in front of me.
Ben Hong: [00:21:07] I think felt
Phil Hawksworth: [00:21:08] a little unfairly that I was stumbling over my words. I mean, admittedly, I couldn't say my own name.
Tara Z. Manicsic: [00:21:14] Mockery.
Phil Hawksworth: [00:21:15] Yeah.
Cassidy Williams: [00:21:16] Well, you did say we wanted more bloopers in the show, so
Phil Hawksworth: [00:21:20] there
you go.
Phil Hawksworth: [00:21:23] I'm sorry, Terry. I'm sorry. I interrupted you horribly. No,
Tara Z. Manicsic: [00:21:26] it's fine. Yeah. Our coworker Jason Lang store, um, he decided he didn't want to be on the show today. He had absolutely no interest. Yeah. He wasn't sad at all that he was missing it. Uh,
but, um,
Tara Z. Manicsic: [00:21:41] yeah. Actually quite disappointed that he couldn't join us out today, but he's got a lot of really great content on how the Jamstack does this, especially with, uh, working with the Stripe API, um, and being able to do dynamic and gated content, uh, using serverless functions and Netlify functions for this kind of dynamic capability on the jam stack.
Um, and this is how we usually see it done in the Jamstack right.
Phil Hawksworth: [00:22:08] The nice thing, but again, sometimes the confusing thing about the Jamstack is that you can do, you can use so many approaches, but yeah, absolutely. You can, you can call out to API APIs and then change what's rendered on the page right there in the client through JavaScript.
So you're doing kind of client side rendering. Um, or, or you could be, um, making requests. So what you would sometimes think of as a server, but it's a serverless function that you were just mentioning there. So, and you can, you can match things, things together, which again makes the definitions of them a little bit blurry, but it's because we've got all of these tools in our toolbox now.
Um, I, I really liked the fact that, um, We can start to bring serverless functions into the equation as well. So that even though we don't have a server involved, we don't have a server to manage. We can start making requests. With almost like the mental model of, well, what if a server was there to be able to dynamically generate the response that I need and serve it up to us.
Um, and yeah, as you say, Jason's got all kinds of good examples of, of doing that with all the different API APIs or some, you know, rolling different services with, uh, with serverless functions to do that. Um, it gets
Cassidy Williams: [00:23:21] man and speaking of things, being named weirdly serverless functions. Oh,
Oh,
Tara Z. Manicsic: [00:23:28] I know
Cassidy Williams: [00:23:29] it drives me crazy that they're called that
Phil Hawksworth: [00:23:31] fine with it.
I'm fine with it.
Tara Z. Manicsic: [00:23:34] I think we see you biting your lip
Phil Hawksworth: [00:23:37] and talked about it is like, well, what about wireless charging? I have a wireless charger that my phone sits on. There's a wire in it that goes to the wall. Um, but that's okay because that was there at installation type that's infrastructure. But when I deal, when I interact with it, I don't care.
I don't, I, as the consumer of it, don't need to worry about the wires. That's someone else's problem. I pop it down there and the wireless charger does its thing. No. Why is it in my, in my problem space? Uh, I can't believe I just wasted that sentence.
Cassidy Williams: [00:24:13] That's that is a bed is a good way. To word it. I am less annoyed at the term now.
So thank
Phil Hawksworth: [00:24:19] you. Your face is still saying skeptical to me. That's just,
Cassidy Williams: [00:24:23] that's just my reaction to you, Phil.
Tara Z. Manicsic: [00:24:30] When we say server less worry less, because then you have the infrastructure provider getting everything set up for you. So you still have servers. You just have to. But I used to also say serverless worry list, pay more. Okay.
But then they did serverless functions and I'm like, well, then that just doesn't work because now you added a word at the end to make it even more confusing. So, I mean, all you basically have to say is like serverless means their servers.
Ben Hong: [00:24:58] They're just not your servers.
Phil Hawksworth: [00:25:01] You
Cassidy Williams: [00:25:02] are serverless.
Phil Hawksworth: [00:25:03] Yes, yes. Yeah.
Tara Z. Manicsic: [00:25:07] Nacho servers.
Phil Hawksworth: [00:25:08] Yeah.
Cassidy Williams: [00:25:10] That was cheesy Tara.
Phil Hawksworth: [00:25:11] Oh. Oh,
Ben Hong: [00:25:13] got registered that domain
Phil Hawksworth: [00:25:14] now.
Ben Hong: [00:25:15] Mm.
Yeah, I think,
Tara Z. Manicsic: [00:25:19] um, what, so what I like about Netlify functions is it serverless functions. It's basically a wrapper for the Atrius Lambda functions, but then you don't have to do all that, like computing and set up and stuff that makes it it's like one, it's like a few less levels of complication. In my eyes, like you just make the function that you want, you pass it through to Netlify functions, and then you have that serverless functions and then you never really have to say serverless functions.
You can just say. That's my Netlify function.
Phil Hawksworth: [00:25:51] That's some clever branding judo, but I do. I love that too. I love, I love, um, getting the capabilities that you would normally expect to have to maintain some server or some infrastructure for by writing code and. Pushing it, when you deploy and not caring about infrastructure, not parent caring about provisioning, anything, just like, well, I've got some functions that will be executed at some time time.
I'll put them here and I'll deploy it with the site and, you know, Done happy dance. Um, so yeah, I really liked that model and I think it's gradually expanding. Isn't it? The more, this, this kind of, part of the, uh, ecosystem like matures, uh, you know, when we're seeing serverless functions and now kind of edge handlers, kind of again, to throw another thing in there, just these, um, these capabilities are just growing all the time and it's.
It doesn't make it any simpler for naming things or describing things, but it certainly makes it simpler for the model of building things. I think, where you can write code and push it and it executes where it needs to execute.
Cassidy Williams: [00:26:56] Yeah. There's less need for on-call rotations, which I really like.
Phil Hawksworth: [00:27:01] Oh yeah.
You don't want to do any more PagerDuty. You don't miss your pager PagerDuty rotation.
Tara Z. Manicsic: [00:27:08] It's like I got rid of pagers. I don't want an app that does the same annoying thing to me
through the
Phil Hawksworth: [00:27:13] night. Did you ever have a pager to anyone on this course?
Tara Z. Manicsic: [00:27:17] I had a pager. I know how to do so many messages in only numeric form.
I won't tell you the top
Tara Z. Manicsic: [00:27:27] three that I remember.
Phil Hawksworth: [00:27:30] That's probably wise in the director's cut of this episode. That's the premium content that people have to pay hard cash.
Tara Z. Manicsic: [00:27:39] I remember going to the pager store and like going to the case of pagers and being like, Oh, there's a crystal blue one now
Ben Hong: [00:27:49] I'm,
Phil Hawksworth: [00:27:50] I'm honestly still stuck on the, going to the pages store.
Tara Z. Manicsic: [00:27:56] What's cool to me. So I mostly, this is going to sound like a plug disclaimer, because this is the ones that these are the ones that I have the most interaction with. But like, so as far as like having dynamic, are there things like, um,
the
Tara Z. Manicsic: [00:28:11] Netlify identity widget, which also uses serverless functions in the background?
So again like your, so you have a pre-rendered page that's pooling up. Uh, that's like loading up the JavaScript and the template that you need for there to be off, but it's doing it with a serverless function. I think Azzurro has stuff like this as well. Um, yeah. And so there's like, so like thinking about how people, how I don't want to just put app, it's not apples to apples whatsoever, but thinking as far as like having dynamic data by doing like hybrid rendering or universal rendering, And then having that Jamstack approach of like having that dynamic data, but using utilities and kind of delegating that workload
to
Tara Z. Manicsic: [00:29:01] a different technology that will give you serverless functions.
That path for me was just so much better,
like even
Tara Z. Manicsic: [00:29:10] forms, like doing dynamic information with forms, like to use Netlify forms to do that, that just. That I liked it didn't feel like magic. But it felt as good as magic feels.
Phil Hawksworth: [00:29:25] I can't believe we even bother having a marketing department at NFR. Just record your words and write them on the page.
Tara Z. Manicsic: [00:29:34] Do you know that I'm a business school dropout? I tried to go to school for marketing, but I was so horrible that I just went to math class and pottery.
Is there anything
Phil Hawksworth: [00:29:48] else? W is there anything else? They can't be any more types of rendering. There's so much to discuss around it, but it's so hard to just add clarity. I was, well, I'm sorry, this is rude while you're talking. I was just browsing.
I wasn't just like shopping or anything, but I, I w
Ben Hong: [00:30:08] I thought I'll
Phil Hawksworth: [00:30:09] just pop over to Jamstack.org. And we, you know, cause they've got a bit of a rescan recently and one of the things we've started to add was a glossary, which is only small at the moment, but it's a community site that will expand over time.
And I thought, well, maybe between us, we've already done some effort to define this, these things and. I'm sorry to say that. Well, I'm very happy to say there are definitions for client render for pre-render pre-generated server render and many of the things beside none of them though. I'm very sorry to say, can do it in seven words.
So
Cassidy Williams: [00:30:44] bring out the fingers.
Tara Z. Manicsic: [00:30:53] We got to cast it by it. Classify
Phil Hawksworth: [00:30:55] it. So, yeah, since they have more than seven words, I'm not going to read them out, but we'll link them in the show notes because these are these, a little definitions in here as well. That that might, might be less wordy than some of our efforts, but wordier than Cassidy's slam dunk.
Tara Z. Manicsic: [00:31:11] I think that we have to start wrapping up this episode because it could get out of hand. But, um, I just want to say also, like you can always reach any of us, um, online or tweet at us at the Netlify account. If there's something that you want us to even delve deeper into. So if you just want an episode about, uh, serverless functions or you just want an episode about how to do off.
What did you
Cassidy Williams: [00:31:41] say?
Phil Hawksworth: [00:31:46] Well, you, were you making fun of terror or was that a genuine request? Cause it looks like she's writing an agenda for the next episode.
Ben Hong: [00:31:54] It's
Phil Hawksworth: [00:31:55] the new thing.
Cassidy Williams: [00:31:57] It was people trying to replace that between like PagerDuty, but also remember yo when Yoko came out,
Tara Z. Manicsic: [00:32:02] that was
all it
Cassidy Williams: [00:32:04] was, was you send the yo to each other.
That was, that was a big hit for awhile.
Tara Z. Manicsic: [00:32:09] We'll see. I thought you said depers like, we'll dig deeper in this something, but like jeepers, but deeper
Phil Hawksworth: [00:32:17] differs. That's going to be our new, regular section of the show. Now it's time for our deepest deepest.
Tara Z. Manicsic: [00:32:28] Uh, so I was like, that's why I was confused. Cause I was like, I like that.
Cassidy Williams: [00:32:33] You're branding mind.
Perfect.
Tara Z. Manicsic: [00:32:37] So we're always happy to talk about any of these things, um, more in depth. Um, but there is a, there's a series segment of the show that, uh, we call tidbits and thought things where we ask one question to kind of wrap up the show, um, kind of around what we talked about.
So just like a serious, um, Kind of inquisition about if you had your own physical, local storage or cash that you could access at any time from anywhere. What's one thing you would put in there.
Phil Hawksworth: [00:33:12] Okay. Palmer, ham. Next question. Move on.
Tara Z. Manicsic: [00:33:15] Really? Isn't really food. Mine is totally food. It's got
Phil Hawksworth: [00:33:18] a cost it's food and it's yeah.
It's delicious. Cured meats. I don't understand what we're even debating
Cassidy Williams: [00:33:24] him, him, him, him, him, him
Tara Z. Manicsic: [00:33:26] minus totally food. It would totally be like nachos, but like perfect bites of Natchez so that I could just dip in a perfect bite. Has every ingredient on it. And the ship is still crispy. Obviously
Cassidy Williams: [00:33:40] it's just outside the, like nucleus of the plate of nachos, because it's got everything, but it's not integral to the integrity of the pile.
Phil Hawksworth: [00:33:49] I like that. Right. And it has the right amount of, of kind of stodginess, but you can still pick it up without bringing the rest of the plate with it. The
Tara Z. Manicsic: [00:33:58] perfect, I mean, I don't need stodginess to be honest.
Phil Hawksworth: [00:34:05] Do you want any melted cheese on there? I feel like we're going slightly deeper into what maybe anyone was expecting.
Cassidy Williams: [00:34:15] Mine would be bubble tea.
Tara Z. Manicsic: [00:34:17] Oh, that's a good
Phil Hawksworth: [00:34:18] one.
Cassidy Williams: [00:34:18] If I could just have instant access to just Boba at any time. Oh, that would be
Tara Z. Manicsic: [00:34:23] great. Even if you make it at home, that Boba only lasts for a day. So you can't just have a massive amount of Boba.
Cassidy Williams: [00:34:28] Right? Exactly. And so if I had a physical cash that I could access at any time with some fresh bubble
Phil Hawksworth: [00:34:33] tea,
Tara Z. Manicsic: [00:34:34] Yeah, that's a good one.
Gosh,
Ben Hong: [00:34:36] I went, I don't know if it's just like all like the zombie shows, like I literally went survival mode. I was like, I want an ax. I want like a metal ax at, I can like start fires. I can chop wood.
Cassidy Williams: [00:34:51] I definitely was thinking that way until filler terror wet. And I was just like, actually, yeah, but it would be much better, but like, I was thinking, what if I just had like a wrench, just some kind of tool that I
Phil Hawksworth: [00:35:04] could use. Wait, in many ways Ben wins here because he has an act. So since he has his acts, he also has terrorist nachos because she can't defend that.
well, I mean, I don't want to surrender my power, my ham, the diver. I've got, but if Ben comes with his acts, then,
well,
Cassidy Williams: [00:35:26] bye
Phil Hawksworth: [00:35:29] bye.
It's a good, that is a good point.
Cassidy Williams: [00:35:33] It'd be very convenient for chopping him.
Tara Z. Manicsic: [00:35:35] Oh yeah. I want to chop a Hamlin, an ax.
That sounds fun.
Cassidy Williams: [00:35:40] It does some pretty fun.
Tara Z. Manicsic: [00:35:42] I cut a watermelon with a sword that was fun.
Ben Hong: [00:35:52] The real life
Cassidy Williams: [00:35:54] next time on remotely. Interesting. We made an awesome thing to help you learn the Jamstack introducing Jamstack explorers the guts. And when we say guts, we mean like the internal organs of this project that we made an internal organs are not actual body parts, but the inner workings of the code and the frameworks that we use and stuff, I promise it's going to be good.
Well, we'll at least try and. My name is Cassidy optimist, loser Williams.
Ben Hong: [00:36:21] My name is Ben laser jam hall,
Phil Hawksworth: [00:36:24] art and Phil bumblebee.
Tara Z. Manicsic: [00:36:26] And I'm Tara Magnus, Jasmine Nixon. Thank you all so much for joining us today on remotely. Interesting.
Cassidy Williams: [00:36:48] Oh, we, we missed that, Phil. I'm
Phil Hawksworth: [00:36:50] sorry,
Tara Z. Manicsic: [00:36:52] Chris. Got it.
Phil Hawksworth: [00:36:54] Good. When Chris is listening to this, I sound fine. And you all sound like the idiots that's true,
Tara Z. Manicsic: [00:37:04] which is like the opposite than in person.