Transcript from the "Wrapping Up" Lesson
[00:00:00]
>> Yeah, it's pretty simple with Vercel and apps like Railway to get things deployed. It mostly works the same. So, yeah. So, the only other thing I want to talk about before we end it is just like some of the things to do next to get ready for production.
[00:00:16] So if you've done the intro to next JSP2, I mentioned in their study up more on server components client components data fetching for this course I'm going to recommend more production ready things. So if you go to the beta docs so betadoc.nextjs.org. The things you really wanna look into are gonna be like re-validating data.
[00:00:38] This is probably one of the biggest features in the app, but it's actually very complicated to under, I mean, it's just caching, caching is one of the hardest things to do. So it's always gonna be complicated and you can almost never get it right, but it does change behavior of your application significantly.
[00:00:56] So read up on that and obviously caching itself. So how segment level caching works versus per request caching and I talked a little bit about those, but I didn't use those terms. I talked about pages being cached and API calls being cached, that's the different segment based caching these pages.
[00:01:20] Everything that a page needs being cached per that segment, versus something being cached inside of fetch. Those are two different types of caches that can be revalidated differently How to preload data. So using this pattern where you export a preload function, Next.js doesn't care about this, it doesn't pick it up.
[00:01:41] But inside of a page you can bring in that preload function, preload the data, get your stuff, if it's not there, render some stuff so it can get pretty crazy. This is very advanced, so you can read up on that. The other one would be, okay? Yeah, this one parallel and sequential data fetching.
[00:02:03] Highly recommend reading up on this. Basically, just describes how and we kind of did it in the app where you have some data fetching, happening and blocking JSX and rendering where some might be happening and it background. While sequential is the one that's blocking parallels while that's happening in the background, and when and why you would use those and how do you group those up?
[00:02:26] How do you tee up data fetching if one function that's fetching data requires the output of another function? How do you queue those together what does that look like? So I highly recommend looking at up and different patterns that are describing some of these documentations. A lot of this is like they're just exploring because it's somewhat brand new but there are gonna be a bunch of patterns that evolve from this in the next year so, it's gonna get pretty crazy.
[00:02:50] Like I said, I do think most frameworks are gonna start copying them too. So everyone's got hooks now, so yeah. I think, and this is React. This isn't just next.js, React is doing this. So I think there's gonna be a lot of innovation in this paradigm of thinking.
[00:03:07] So I would look into that, the only other thing I would look into for production stuff is not it's mostly that stuff. That's the tough stuff. Maybe, yeah, streaming and suspense. So really understanding how data and even components themselves are streamed to Node.js or to the browser from Node.js and from the edge runtime.
[00:03:31] And how that actually changes how your browser executes your app is very important to understand and how to opt into the streaming and different things like that. So we've been using streaming this whole time. What server components like loading and the suspend boundaries that I have is routing.
[00:03:51] So just having a really good idea of how that works, but for the most part, yeah. Once you know all that, you can pretty much do everything. I mean like I can't wait for people to start building apps that shows almost no Javascript in addition to the framework themselves to the browsers what happens though.
[00:04:07]
>> Do you have any resources you would recommend to learn more about edge versus node?
>> Tying to think of one resource. I don't have a go to resource but I can think of two places off the top of my head that talk about it very well. One is a company called Fly.io.
[00:04:31] Disclaimer, I am an investor in Fly.io but I still I've used their products way before I was investing in them. But their product is literally an edge runtime and other docs and articles describing edge, computing and stuff like that is limitless. So yeah, I would go in here and check out their docs, check out there blog posts that they've written about as competing this littered their entire platform.
[00:04:58] Another great resource is Cloudflare. So if you go to Cloudflare workers which is like their edge runtime They also have tons of resources, documentation, blog posts about how edge runtime works, the difference between them. Like I said, it's a CDN. So in their case, you can see here's all the nodes.
[00:05:23] You can imagine an edge runtime being every one of these dots has, let's say you made a function like the middleware function, and you deployed it, your middleware function is going to exist on every one of these dots. And then if someone from Texas made an API call to your server, it's going to talk to the middleware here.
[00:05:45] And someone from Seattle made an API call from servers going to talk to the middleware here, right? That's how it works. Someone from London or whatever, they made an API call it's gonna come from here, the closest one to them. That's how it works. Whereas, your origin server, where your serverless functions are, not your edge run time might be deployed in Virginia or Oregon.
[00:06:11] So, instead of going all the way there. So, if I am all the way here in Cape Cod and your origin servers all the way here in Virginia, instead of going all the way here to get my authentication checked, I would just go here to get my authentication checked.
[00:06:24]
>> I'm not leveraging any of the new features, should I use version 13?
>> Yeah, most of the new features are just in the app directory. So you can use version 13 and still put your pages in the pages directory and you'll get the same experience as version 12 with the extra benefits of whatever version 13 has that isn't included in the app directory.
[00:06:43] So yeah, it's totally safe. And I believe they have an upgrade guide on here somewhere, where they talk about that. So that's upgrade guide, but they also have like, kind of like how to migrate migration Yeah. I just passed it. Yeah, migrating from pages to app and all this stuff.
[00:07:13] So yeah, if you can just read this upgrade guide for any resources on how you might best take advantage of that. Okay, well thanks for taking the course and yeah this is it.
>> [APPLAUSE]