Introduction to Next.js Working with SSR

Transcript from the "Working with SSR" Lesson

[00:00:00]
>> So now we're just going to finish up with this last section and get into some really important topics about Next.js. And you'll be a certified Next.js developer, if that's a thing. If it was, you would be one. So let's go in and talk about working with server side rendering cuz I think this is always a big topic.

[00:00:19] And I think a lot of people who aren't used to working with server side rendering in general always have some of the same questions. Specifically, one of the biggest gotchas, obviously people run into with server side rendering is that either they created some component or they installed some component that's using browser specific things, DOM APIs.

[00:00:44] And when they try to render it on the server, they get an error, right? Because it's like document not defined, window not defined, like all this stuff and it always just seems to come back and bite them. And I was guilty, I fall into that trap a lot when I was doing server side rendering in the early days.

[00:01:00] So I just kind want to talk about that and how Next.js gives you some tools to help you with that so you don't have to do it yourself. Okay, so we're doing server side rendering. Like I said, sometimes you just really need to skip rendering some components sometimes for many different reasons.

[00:01:17] Here are a few. One, does that component have some DOM API, window, navigator, GPS, I don't know, is using literally the DOM API to do something? The data that it needs only comes from the client side, like it comes from some client side API call or something like that.

[00:01:34] And you're not handling the errors, you don't have any default so either the data is there or it's not. So it'll just break on the server side if there's no data. And then for something else. I don't know, maybe you literally just don't want to render this thing on a server for whatever reason, you have your reasons.

[00:01:49] So if that's the case, Next.js gives us something that actually works very well for this. And it's not something that they created, they just supported and extended it. And that's gonna be called the dynamic imports. So if you've never seen or heard of dynamic imports, it's something new to the spec.

[00:02:09] You can get this in Webpack. You can get this with combination of Webpack, Babel, things like that, and I'm pretty sure it's coming to the browsers eventually. If it's not there already, I'm not keeping up with a browser spec so I don't know. But basically it allows you to do a dynamic import of a component.

[00:02:28] In this case, they're importing, or I, I'm importing an add component here. So the way that it works is you can pass an import statement, but this time it actually looks like a function. So you import a function and then you put a path. Now whatever the default is for this module is going to be returned when this gets resolved.

[00:02:52] And then as an extension, you can do ssr false, which means don't server render this thing. So dynamic components basically just don't get rendered, they don't get built, they don't get bundled until they're accessed. So if you had this sponsored ad and you put it here like I did, this won't get injected and bundled, right?

[00:03:15] Basically this component is going to be built by its own, it's gonna have its own file instead of being bundled in with all the other components. It's gonna be treated like its own file, kinda like a route would, a page. A page has its own file and that's kinda how they're their own apps.

[00:03:29] By doing this dynamic import, you're basically making this component its own file, and you're dynamically importing it when you need it. And if you know how JSX works, whenever you render a JSX component like this, what this boils down to is you actually calling a function. You're actually invoking this function and any prop that you pass on to it are going to be parameters to that function.

[00:03:52] So if this compiled down to JavaScript, you're actually calling one, two, three, four, you're calling four functions here. So when this function gets called, then it renders that component. It's very dynamic in that case, and then that's where it gets fetched. So if you go open the network tab, you might actually see this component being fetched when it gets rendered.

[00:04:11] Because that's when it was used and that's when it was called. So that's a dynamic import. And by putting ssr false, we can skip out on having something being rendered on the server. So for instance, if we have a component like, let's just make something right quick inside of the index, or actually I'll go to components.

[00:04:29] And I'll make a new file here and I'll call it, I don't know, browser.tsx so we'll have something here. We'll import React from react, like that. And we'll say exports default and we'll put a component in here, And actually, I'll just put something simple, Browser component like that, right?

[00:05:14] So we got a browser component but then maybe let's say we did some window.Thing up here, right? We did some window stuff on here so what's something that I can do on window right quick? Actually, I'll just log the window, just console.log or even better, document.query or document.body, there we go.

[00:05:40] That's a good one, so we can do that. The document.body and if I were to import this into a page which is rendered on a server, so let me go to a page. Let's go to the index page here and I just say import the Browser component, src/components/browser, like that, right?

[00:06:10] And I'm just going to import that file and if Next.js doesn't polyfill document, which they probably do, they might just pollyfill it and just null that so it might still work. But if they don't, this would break, so. Yeah, it looks like they might polyfill it, let's see.

[00:06:30] Yeah, so I think we're good there. But if I did something super browser related in here, I can't think of a good example right now without making a complicated component. But anyway, if I wanted to skip this from being rendered on the server for whatever reason, then what I can do is just go into that index page.

[00:06:51] And instead of importing the browser like that, I can say, import dynamic from next/dynamic. And then what I can do is say, BrowserComponent = dynamic, like that. And then that takes a function which returns a promise, and the imports function does return a promise. So I can say src/components, brower, [LAUGH] should be browser.

[00:07:33] Okay, so I'll do that. And then I could render that component, right? So I could say, wait, let me add a ssr false. There we go, and then I can add the browser component BrowerComponent. And boom, it shows up here. Everything's good to go but it didn't render on the server.

[00:08:07] And the way that you could check that out is if you were to inspect the output, right, the actual HTML, so oops, so if I go, Here, and it's probably gonna look like mush, I don't know why I'm looking at it. But if I go to Doc, or actually, I think you could just look at the source, yeah, that might be better.

[00:08:37] Okay, yeah, it was not showing up there, but if I look for This is my really nice app, I'm pretty sure that will show up. There we go, so this is my really nice app but what you won't see is BrowserComponent. Right, that's not there, cuz that didn't get rendered on the server so it's not there, it's injected at execution time.

[00:09:11] So that's how you can skip server side rendering, which is a really good thing, specifically working with third party libraries that use browser specific stuff inside of something like Next.js.
>> Can you put a fallback UI like React.lazy works for while the dynamic component is loading client side.

[00:09:26]
>> Yeah, you can put a fallback UI inside of here. I want to say that it takes a fallback prop here. Actually, I've never used it so I guess we can find out together right now. I'll give you the wrong information so let's see, next.js/dynamic. Component, if I can spell.

[00:10:01] Or loading, there we go, custom loading, yeah, so it's loading. You put loading and you can put a component.
>> Awesome, thank you
>> Yeah.