Introduction to Next.js Rendering Modes

Transcript from the "Rendering Modes" Lesson

[00:00:00]
>> Cool, rendering modes. So we're gonna talk a little bit, now do you know what those functions are. We're gonna talk a little bit about what they actually do. So, next day as actually looks at the data fetching and your page components. Yeah, it's not just looking because it's gonna call those functions.

[00:00:17] It's actually doing that to determine how it's gonna prepare your page. So, and because it has different rendering modes, or I should say different prerendering modes. So what is prerendering? Prerendering is like an umbrella term meant to say, we're gonna take this JavaScript, this react app, and we're going to render it before it goes to the browser.

[00:00:38] So what does that actually mean? We're gonna turn it into an HTML string before it goes to the browser. That's basically what it means, it's gonna do that, it's gonna return into an HTML string before the browser. It's not going to execute any interaction on it. Like if you got handlers and things like that, those won't happen, those won't get affected, you can still do window stuff inside of those handlers and logic.

[00:00:57] But the actual presentation of is going to be rendered on the server is gonna be turned into HTML, the CSS HTML. That's what's gonna be sent down to the browser. And that's why server side rendering and static rendering is so great because that it's instant, especially you put that on the CDN and you cache it.

[00:01:14] People get to see your page immediately. But in the past, that's how we always build websites, but in the past, okay, cool. Your website got here fast and it's great, but now it's not interactive. So then now you do something called rehydration. Which is now you take the client side version of the app, which is pretty much an exact copy of the server side one just not rendered yet.

[00:01:35] And with all the other logic. And you basically, you take over where the service I left off. So it's like, yeah, cool, here's where you left off. Now I'm gonna go find the root component. Let's say it's the app root, the root div and the HTML document. And I'm gonna bootstrap this react app here.

[00:01:50] And I'm gonna take all these JSON files that have all the data that was called on the server. And I'm gonna pass them into all the pages that need them. And boom, now I'm in a client side app. So you the best of both worlds, you get that fast rendering from the server.

[00:02:03] But then you get that fast routing from client side routing and interactivity that you really get from single page applications. So it was like the best of both worlds. So that's kind of the philosophy of prerendering and where all that comes from. So different prerendering modes, you have static generation.

[00:02:18] Static generation is basically, I'm literally turning these pages. Everything that they need, the data, you could take this page as HTML string, you could throw it on the browser, and it will work and look exactly the way that I want it to. That's static generation. So again, great for things like docs, static pages, landing pages, blogs, anything where the content is not that dynamic.

[00:02:41] It's basically, if you have content that's not being changed by a user, you should static generated. If it's content being changed by a user, maybe rethink it. So any non user generated content should be static generated, in my opinion. So anything made by you and your team, static generate it.

[00:02:59] And basically the benefits of that is that it's CDN cacheable. It's just a string, so you can throw it in front of a CDN. It works, it doesn't need a server, it doesn't need node, it's just a file that serve from the CDN and it's instant, so that's static generation.

[00:03:12] Then you have server side rendering which is basically, it will turn your react component into a string just not at build time. It'll do it at runtime when you request that page. So if I do a get request to slash notes, that's gonna go to the node server.

[00:03:28] It's gonna render that component on the server first get the HTML, send it back to the browser, and then boom, it's there. Any subsequent request is gonna be cached. It's gonna cache it, in this case, next day as does cache it. But it still gonna come from the server versus it being there ahead of time.

[00:03:43] So you can't cache these. This has to be computed at runtime, this computation here. There is no caching there. So the build times are faster. Absolutely, cuz you're not prerendered during build, but the runtime costs might be bigger depending on how long your computation is to render this page.

[00:04:01] If you're doing like a huge database query, you're doing a MapReduce, you're doing all this crazy stuff inside of a server side props, function. Yeah, it's gonna be crazy. So you got to think about that. And then you got client side rendering, which is what you're normally used to.

[00:04:18] You just send back a index, that HTML that has nothing in it but some script tags, maybe a link tag, and like a div with the id on it that says app. And then JavaScript comes in and bootstraps that, that's client side rendering, right. And then, the fourth one which is not here, it's like a combination of all of these things, right?

[00:04:35] So you can pick and choose how you want all these to work. And you can really build a truly hybrid application using xjs because you can opt in, opt out. So those are all the different modes. So by default, all the pages are prerendered, every page you make in the pages folder is prerendered by default.

[00:04:53] And that's what that little battery means. Is like, yeah, we prerender this thing, it's good to go, and ask whether or not you asked for a data or not. It's gonna be prerendered. So you get all that stuff for free. And now if you choose get static props, that's gonna do static generation.

[00:05:08] It's in the word, getStaticprops. It's gonna statically render this page ahead of time. So it's cacheable, it can be on the CDN. If you do get server side props, it's gonna server side render, it too is also in the name, server side props. So it's gonna render that stuff on the server.

[00:05:25] And then for client side rendering, you can do server side rendering and static generation, and then still also do client side rendering. Because next doesn't touch the logic inside your react component. That's reacting LAN, you're inside of react, and actually it doesn't care. It doesn't touch that stuff, so you can still make a query inside your react component and then render some components based off the results of that query is still works.

[00:05:47] So that's how you can like hook into this page is server rendered. This page is statically generated. This page is purely client site. This page is a combination of static and client. This page is a combination of server and client, like it gets really crazy. And the way that you do it is depending on what function you export to fetch data, that's it, you export a certain function, you opt into that method.

[00:06:10] This is my favorite part of xjs because as a developer who has having built so many server side apps and so many different languages, so many different frameworks. It's a pain doing it from scratch. So I really like the fact that they do this. And as a developer who has created server side rendering technologies, I can appreciate the thought that they put into making this effortless and easy to think about, in my opinion, it's very simple.

[00:06:37] So very well done.