Next.js 12 Block Party

all right we're going to start right on the hour but um yeah you can just listen to me asmr drinking right now i guess i'll go from an asmr channel to a coding channel in uh in just a second at the top of the hour that actually reminds me something that i thought would be fun uh if i can find my cursor is um i thought it'd be fun to kind of like build a countdown timer for this type of stuff like a little overlay we'll see how it goes um let's see so yeah so right now i'm just kind of setting things up for what we're gonna do i have a couple posts ready hopefully people will join um shortly both in discord and here and um yeah so um i'll probably repeat all this but i have the next um page up uh i want to go to the next docs i think that's the yeah this is the example that i like to run typically uh we got all the new features um that were announced for nexus 12. so we've got that coming in and then what else interesting yeah so let's just go to this page right here we'll have that set up uh i'm setting up a repository i think we can set that up on empty and then that will give us instructions for how to force push our project once we create it um up there um so i think that's looking good is there anything that uh you know you had hoped to explore as we were going through this we'll go through some of these features real quick so the rust compiler that's kind of something that we'll just experience i guess uh middleware beta um i don't know if we'll have a chance to do this because i think it's something that we have to deploy to actually see uh react 18 support that'll be super cool maybe we can play around with some suspense stuff um see native next apis are now supported as well as suspense okay cool um avif support avif do you say the whole thing i don't know big questions um so app support uh bot aware isr fallback optimize seo for web crawlers that's really interesting uh again deployed probably uh native esm modules this is interesting the url imports i'd really like to give that a try specifically um and then the react server components um that's something that i really want to explore too because i think that's you know as we were talking about i think this is like the first post or the first framework that actually has that integrated um integrated so worthwhile so up to three times okay cool perfect i think that's good hopefully my note environment will not be a pain in the ass today okay three minutes to go also one thing to note so i don't have so someday i think once i have like the uh you know react uh was it the new m1 pro or max or whatever whichever one supports more displays um i'm gonna put another display so like right now you can't see comments um usually i have a comments overlay when it's just me streaming but when we do the discord thing i run out of displays so anyway worth worth noting that those comments aren't going to get shown up today aren't going to get aren't gonna get shown up today that is some real real real proper english right there okay let me just do one thing let me um [Music] do lunch real quick okay getting started getting started got a couple more minutes to go and then we'll get going uh let's see anything else we need to set up i don't think so i don't think so i think we're ready uh cool cool cool i'm excited i was watching this so i i guess i'll just say this i was i was watching this announcement on uh i don't know what was it earlier this week was it monday um and i was just blown away at all the cool stuff that they're doing i i feel like i have a mixed relationship with next i think it's really cool i really like the like php-ness of it i love the you know the api stuff that they've developed i think it's like super smart like super clever um i haven't enjoyed using versailles as much as i like using netlify and so there's been some like kind of like you know featured not quite parody there and so what's up yang good to see ya welcome to the welcome to the the the event here uh we're gonna be starting just a second um yeah so i don't know i've but i'm excited especially like i learned recently like all their stuff is like using like cloud for workers now which is interesting something i'm interested in okay it's 10 o'clock let's do this hey friends welcome to this stream um or block party as i'm trying to call them now i've been kind of obsessed with this idea of like uh like digital neighborhoods and discord being kind of one of those places where we have kind of experiences with other people um that it's like a kind of like a like a career neighborhood like a coding neighborhood like it's it's all like i don't know i like it super cool um so what we're doing today is we're gonna follow up on the next gs announcement so uh let's see that's the nexus docs okay so so just three days ago next announced next gs12 which it with a ton of really cool features um just big shout out to all of these contributors who are doing amazing work with nextgs um it's it uses a rust compiler it seems like everything's going to rust these days like the whole front end space is moving to rest which makes me feel a ton of fomo for not like having learned rust up to this point um i want to give a shout out i think at some point uh what is it rust adventure let's see this if i can find it yeah rustadventure.dev this is uh chris biscardi um new course on rust focused on i as i understand it um front-end developers so i am really hoping to go through this at some point when i can find some time but um you know maybe we'll i don't know find some time to do it in discord and give everybody a license and then uh just go through it um but yeah so anyway rust is just like mega hype right now um and then there's a bunch of features that we probably won't be able to play with today but i'm super excited to play with them at some point i think the ones that we're going to focus on are the react 18 support uh let's see that would just use um url imports that'll be really interesting i'll see if we can actually do something maybe they have a good enough demo that we can um you know kind of just follow along and then i think server side components this is the first as far as i understand um framework that has is utilizing uh server components um i know that you know google for cell facebook have all worked together um inside of next to gain a lot of these like performance and you know whatever improvements um and implement react server components i think it's also i don't know maybe create react app does this now but it for a it was also one of the first if not the first to do fast refresh some it next is kind of like a really awesome react environment okay so enough chitchat uh let's uh let's dive into this thing so um i figured we would just go through the getting started guide to generate an app and i suspect that it will be [Music] you know version 12. but who knows let's see uh yarn or neck or uh see let's just do this yeah this will definitely be latest okay um i'm not confident enough in typescript yet sorry okay so let's um go into our directory we're going to type uh npx create next app at latest uh i need to install the following packages oh actually wait uh i don't know if this supports node so hold on a second um right now okay yeah right now i'm set up and it's like defaulting to node 16. so i'm not sure if this is gonna work but let's try it and if not we can you know back out of node um so let's try that again so we're gonna run this it needs to install some packages yes that's the package that we're it's the npx script we're trying to run it just asks us now unlike before where we just kind of download it and run it uh what's the project name um i gave it a name over in this github repo let's just copy this next block party hey hey jake welcome and we wait it's always hard to tell like like for me it's like i'm never sure like if i want to do this kind of stuff beforehand or not because it's nice to have to wait for npm but then also you know it's nice to see all of it happening as well okay so we have npm run dev that'll run the dev environment so let's try that oh missing dev missing oh i got a cd into that directory all right well it looks so far like it's working with uh node 16 which is super cool that is awesome uh let's go localhost 3000 boom okay cool so we got this next app uh let's open it in our code editor cool cool okay so we have let's see let's just verify what people what's that nonsense thing that people say trust but verify it's just got to be the most like way to say don't trust uh anyway yes we are seeing uh react uh sorry next 12 and then we have react 17 and react 17.2 so that's our first step so good for us um let's uh let's see we don't have let's see if it gives us get okay yes we have git main okay so now we can go over to if you wanna play with this later um what you know whatever step we end on um you can go here lunch dev uh it'll be a repo on their next gs12 block party that's it that's us that's what we're doing right now is block party um also jay uh jake and uh yang feel free to unmute if you want and uh you know if you're comfortable and uh you can you can comment or you know kind of guide where we're going as we go through this thing um so let's see so let's see git remote this is what we want to do we want to take that copy that um all this does is sit set the remote so oop good nope get remote i can never remember this command uh get remote list oh yeah and then verbose yeah so we have an oran origin we just set up the origin so it knows where to push stuff to as we're uh as we're working so uh we already are on the main branch so let's get push u origin main and that's going to push up here so and then refresh and now it's all there there we go so we're on git or github so this is great so we got our little uh just basic nextgs starter on github okay perfect so what's the next step let's uh let's see i did i do yeah again open this up in code and let's see what we got here i want to see i guess first and foremost if there is some example of server side or i don't know server components so i assume that that would be in pages um it doesn't look like it so we might need to do that on our own it's in pages api right yep oh interesting um i hadn't thought about that but yeah maybe it would be let's let's see what they got here in terms of documentation i'm curious like i don't know if we need to like add react 18 or what um so let's uh let's go through this so react server components um i guess i'll just read read through this why the heck not um rec server components allow us to render everything including the components themselves on the server this is fundamentally different from server-side rendering where you're pre-generating html on the server with server components there's zero client-side javascript needed making page rendering faster this improves the user experience of our of your application pairing the best parts of server rendering with client-side interactivity okay so this is the config let's open up that config file xjs config let's see what we need to do so this is an experimental thing um concurrent feature is true and server components true okay i'm curious if it requires react 18 if it is going to warn us about that so i'm actually going to kill this server over here oops not exit there we go and then we'll open it up here so we can more easily see what's going on all in one view okay open up dev again okay so this should tell us if it's going to be in pages or pages api uh next now enables you to do data fetching next now enables you to do data fetching at the component level all expressed as jsx by using react server components we can simplify things what's up austin good to see you um let's see by reaction components we can simplify things special functions like get server-side props or get static props are no longer needed this part of it i'm like just super hyped on i think this is going to be really interesting because i don't know this is maybe my least favorite part of next is uh is that which is great it's it's worked great for us but um i love the idea of not needing those um so this will be cool uh this aligned with the the react hooks model of co-locating data fetching with your components okay you can rename any next gs page to dot server.js to create a server component and import client components directly inside of the server components okay and import client components directly inside of server components okay so we can import client only components inside of our server components and then i guess they would just like you know render as part of the render tree oh audio issues uh-oh let me see in uh in discord or on the uh on the stream side of things i think he's having no issues i can hear you fine okay cool gotcha gotcha thanks jake um okay cool let me okay okay cool cool okay so it says that we can change any component let's finish reading this uh you're currently working on a server side uh suspense selective hydra or we're currently working on server-side suspense and selective hydration and streaming rendering in xjs and we'll share progress okay cool yeah all of those things i mean as far as i know they're like not even like close to being finished so that's interesting um okay so it says that we can just add dot server.js to that suffix to anything so i'm wondering if we add this uh let's see where's our page is this still alive okay cool um i don't know how to check this so this is kind of the interesting and interesting piece of this is how we can actually see this working okay so if we take this and we i guess the first step is just making sure that that statement is true so if we do index.server.js does it work here looks like no i'm curious why okay so let's see what we have in the logs anything in the logs um anything console page not found okay i wonder if index has to be a client side yeah that's a good question okay so let's yeah that's a great point let's do another one so let's rename this back let's get it back into the state that it was working it was really interesting to see some of those changes happen in real time where it's like the style sheets dropped and then the page trap that was fascinating um interesting okay cool yeah let's make a new page um so we'll do this like about dot was it server.js is that right okay and then i think let's just make this super simple i think we can just uh what export default um was it about and default oh function what am i doing is that right yeah okay so what if we change this let me just make sure i got this right okay so it doesn't quite work yet now we we did have a suspicion about this though right because if we let me make sure that this is that's saved yeah so you have a suspicion of this right because it requires the concurrent features so i wonder if we need to re install react 18 to get this working so let's go to the react date preparing for react 18. um okay react 18 will add features like suspense automatic batching of updates apis like start transition and new streaming api for server rendering with support for react lazy we've been working closely with react team at facebook to prepare next gs for react 18 as it moves towards a stable release we're making these features available to try today next gs12 under experimental flag okay so we have used the uh let's see i don't know if it it oh yeah concurrent features okay so this it looks like it does tie into this so maybe if i had started with react 18 first this would have just worked so let's um let's kill the server again and um victor hey sorry i missed you in chat good to see you okay cool you can hear me fine thank you so much um cool so good on the twitch side good on the twitch side okay cool cool okay so we've enabled the features but i think we need to install the react 18 alphas oops what'd i do definitely didn't like that maybe this is where my node version is going to be problematic so npm install overriding pure dependencies and then it just gave up the ghost can't resolve let's try just react and see what happens okay install [Music] react dom at latest okay cool let's check our package json no nothing interesting we have all these warnings hmm very odd okay computer install let's see we don't have yarn going so there's nothing it shouldn't be anything confusing there um react at latest oh no wait but it's not latest we don't oh that's my bad i'm sorry okay and so then that is pissed i think about maybe our node version well resolving next 12 found react 18 alpha could not resolve dependencies or reacting okay huh okay let me make sure there's nothing else that we missed okay so this is information about middleware okay there's no configuration there it's saying if we want to use react 18 with what we have so far we should be able to run this command let's since i was concerned about my node environment let's uh let's switch that up so i'm going to remove all my um complain about eslint which feels i don't know weird um we have to install again but that's probably fine jason webdev in discord hey how's it going and ammanas ammanos is that right aminos okay yeah i've been trying to follow along uh while you're doing this did you see the note about changing the underscore document file that was what got it working for me underscore document let's see oh i haven't seen that yet um [Music] yeah if you scroll down on that page okay so other improvements so adding pages i might be looking at other documentation i'll send a link okay cool cool cool yeah i know that there's like kind of this like secret file that you can kind of expose by like creating this or like overwrite it um interesting yeah no i'd be interested to know kind of like how that's how that worked for you i do want to try because i know i don't know i know node 16 has caused me problems in other areas so i'm going to try nvm [Music] what use 14 so we'll try using version 14 and see what happens okay npm install again i should just use 14 from the beginning cool cool thanks for the thanks for the link on there haguna matata on twitch thanks so much for being here always good to see you i like that i like that emote who's that uh which uh channel is that from it's so great okay um okay cool so we're installed let's uh oops wrong spot okay so we got a server running again let's go over here that works okay cool we have our config in there okay so now i'm going to try this again now that we're on node 14 see if we can run this command without it it being a bummer so npm install react alpha and react dom alpha okay cool that worked no problem so no node 14. that's what it was uh that's what it was pissed about um okay cool so that's looking good this should theoretically you know so we've already done the experimental concurrent features let me make sure let me make sure um did i nest that properly okay no i didn't okay cool cool so that could have just been on me anyway so it needs to be inside this experimental key or property first i was i was distracted by what was already here so react strict mode is what's there and then we need to react add experimental for the server components and the concurrent features and it looks like server components requires both of these whereas if we just wanted the concurrent features um we would we would do that rock's in here watching me code uh so cool let's um awesome i'm happy about that okay cool so we got this so experimental features everything seems to be uh wrapped up so let's do npm run dev okay cool that seems to be working let's go oop stuff's happening let's hit refresh again okay cool let's hit about it's deciding if it wants to go to that route um seeing errors here module not found can't resolve oh yeah pages document so that's what you were mentioning json web dev yeah this is what i had to add to fix that here if you uh okay click on link it shows you how to create your own underscore document file cool let's go to that link um all right all right all right so we got uh let's see what do we have underscored uh wait did i do that right okay interesting so what is this page oh this is just more details on react 18 and server components oh killer okay so we've gotten that part so we're going to copy and paste this i guess what's enabled okay yeah why not that scroll down a little bit um okay yeah do you see right there that uh right there that's what you want uh yeah so let's see okay so we're gonna do in pages we'll do underscore document.js thank you for the help by the way i appreciate it okay so we got that um then you can start using server components okay so what's the difference here so i mean it's hard to compare right but um so you customize your page slash document doc component to be a function component by removing any static methods like oh okay so maybe it was using these before okay and then as always next has incredible examples always so server components um i guess we can use this as a resource if we need to um okay cool killer all right so thank you so much for the tip let's get into that so server components apis alpha okay so let's see if that does let's if that does this any better so many tabs already okay can i read properties of null reading parent node object options insert so this is for the style sheet hmm let's try it again i like the comment above this code should fail where is that this code should fail that's true working as intended yeah so i guess we have to pull out the style sheet now it's just failing all together oh styles oh okay um okay i gotta see okay let's see if we can find out okay so index.js oh interesting okay so yeah so all these styles are gone in this example fascinating or all of the css modules are gone unsupported and xjs apis well r s c and s s r i don't know what all these acronyms are no this is server side rendering what's does anyone know what rsc stands for totally react server components oh react server components okay thank you for putting that together direct server command well react server components and server side rendering streaming is still an alpha stage not all next gs apis are supported the following next gs apis have limited functionality inside server components react internals most react hooks such as use context to use state use reduce or use effect and use layout effect are not supported as of today since server components are executed per requests and aren't stateful okay that makes sense partial not that inside uh client.js can know that inside not note that insideclient.js components user reducer is supported inside okay style jsx is not supported css modules is not supported as we have now experienced um next internationalization is not supported and then these methods are supported okay react 18 without ssr streaming isn't affected okay this is interesting because we didn't like we changed that document obviously um which i guess by but whatever it's doing differently is it's not doing what it did before with with some of these css modules so let's clear out these css modules and see if this works i suspect actually though if it's not failing so badly that we can't navigate to this path it should work okay but it is so we gotta figure that out i'm just going to remove the styles instead of replacing them okay cool so we got that um okay this code should fail that's really interesting um each style tag should be okay okay okay um let's see [Music] next css do not use so is this in the public direct or in hmm i don't think i'm importing this anymore okay let's go back to that document see what we got okay so or i guess we can go back to the code okay so we know that that doesn't work i thought that we did this so server um component okay so let's i guess just follow this through so we have let's see what we've done so far so we we did that enable ssr streaming alpha okay so we did that we need to do this once enabled you can use suspense and as i start streaming for all pages this also means that you can use suspense based data fetching next dynamic and reacts built-in react lazy with suspense boundaries okay this reads like it's just telling us how to do it if we want to but not mandatory setup server components okay so we have these i'm gonna just just in case just copy and paste the whole thing okay so it says that it caught the changes and it's restarting our server so that's good next we need to customize pages document components to be a function okay yep which we did double check yep then we can start using react server components see our example okay gotcha okay so that so should work um okay server components api alpha to run components on the server okay this is just more examples uh i think you missed that step the adding.server.js or client.js oh so do i have to do i have to do i had assumed that oops um switch channels on accident um i had assumed that it would work if it was oh but they have to be either client or server let's see okay cool so let's go back over here so for the client components okay let's change that to server let's just delete this one okay index.server yeah i was i was under the impression that it would just keep going if we didn't append client and server but maybe that's inaccurate okay so let's see this example and see what we can copy or what we can glean from it okay so let's make sure we got everything um oops view code okay next config oh interesting we lost our react route and i didn't know that that needed to be inside of experimental so react root i'm assuming that what this controls is the the this uses the new react 18 react route which is kind of the basis for all of the um experimental uh you know features tim and travis welcome to the the discord voice channel what's up what's up looks like we're having a good time you know me i'm always just like hitting hitting the problems hit them so we don't have to this is just my my lot in life just turning the red light on and then just falling on my face for an hour um you just call these fridays the how not to death for real though for real like just real real bad luck on my part okay so what have we what have we done okay we're gonna go through and we're gonna just copy and paste until it works okay so this i think you know save for the comment is the same okay so we're good on that package.json let's make sure that they have everything so next um they're using a canary version but it that's probably just moving backwards at this point um or maybe not 12.01 maybe important okay but uh react is on the 18 alphas okay that's fine um lib what do they have in here so this is like i don't know actual feature stuff um components um okay cool cool pages we just want to get maybe we have to change the app too i was hoping to find like the minimal like feature set to make this work but it looks like there's a lot of things that needed to make it work do i already have oh yeah there we go okay so we already had an app csr they don't even have a styles directory in theirs yeah yeah should we just kill it it seems to be causing problems that it just even exists even though we're not importing it anywhere it looks like we just got rid of an import in app of a css file oh did we maybe that maybe that's the critical thing oh that's what it was i was looking in so why didn't that show up in my search i'd done a little bit of a search and it didn't work um okay cool yeah that's what that's what it was then okay so let's just let's back out then take that out thank you for catching that um okay let's change this back i wanted to get it back to kind of pretty changes on some of these okay so i was importing home okay sorry i i just missed the the proper error i was looking for modules.css and didn't realize that it was um in both of those oh i looked for modules that's why module css that's why it didn't work um okay cool hey okay cool cool this works okay so right now first thanks everybody team effort that was great um so it looks like we're working um so i'm gonna commit what we have or let's just look at the the diff of what we have so we removed our styles um which i guess we didn't have to but they don't work anyway the way that we're um doing doing this um actually let me actually remove those okay okay so we removed our styles we added all this um config i guess we could leave strict mode there if we wanted to um i don't particularly care are we streaming ssr streaming uh let's see i don't know if we are ssr streaming uh yet i think we'll figure that part out okay so we um updated our dependencies um we had to take that out of the app we added the document um and then we left this the same and so that that all works okay so let's let's just add this um so uh let's see configure [Music] react 18 and um scr no server no react server components i'm going to get that acronym rscs um [Music] yeah stage all of it and we'll commit it okay cool so we got that we had to remove our styles in order to do it but now let's see what we can do in terms of can we change this what happens i assume this is just client right now so let's just change this to server okay this hook is not supported okay cool which hook are we using so index server uh i wasn't aware that we were using a hook let's see this hook is not supported in server components um um supported hook use context okay i wonder if that's coming from our head it is so let's look over here again so they have document index what does their index look like okay so no head and then no image interesting okay the the head part of it makes sense right because that's doing what it okay i think i kind of understand so if i wanted to okay so what happens if we change this to client i think that that's the default i think that's what was happening is the client okay cool so we can just leave it like that okay so it looks like we can't use head for sure see what happens with image okay i supported hook we saved that uh you're still rendering the head right right right yeah i forgot to comment that out again thank you um okay so the image still works let's make sure that it's still doing like it's optimization business that it does okay wrapping in a span yeah putting all that stuff there and then it's using the oh it's so hard to see with these overlays um yeah so it's using that slash underscore next image with the url and a query param kind of business that it does um okay cool so that that all works it's just the head okay the api of the head change before this or no it just it looks it appears as though it uses used context which is not supported in server components a lot of the hooks aren't supported in server components um because they're not state uh server components aren't stateful yeah the value i see in server components is using it for the the inner components of the pages yeah i mean it's cool you can do it for pages themselves but for sure being able to have each of those individual uh headers be a server component for example it's probably a dumb example yeah yeah so this is interesting so could we insert server components like so if i wanted to take one of these cards and make just the card server component is that something that we can do i think you can yeah let's try it why not so that's gonna be we're gonna make a new directory right and just call it like components or something and we'll call this i don't know we'll just call it card card.server.js [Music] okay and we're going to import or let's see which one of these is a card all these are cards right so we'll call this card like that and then we'll leave the guts of it i guess this is kind of the weird part of it leave the children actually let's just let's do this we're just gonna wrap it for like style's sake for now right so we're going to get an error yes of course oops yeah the value i see in server components is like when you're doing processing of some kind yeah so in this case it'll it'll work i think just fine you'll be able to render the children inside of the server rendered component i don't know how much value it'll give you but it's still cool that you can do it yes yeah yeah yeah totally i guess that's the i'm always like incremental steps like does it even work at all and then we can kind of like talk about the value yeah make this i mean here's what you could do just throw a a huge loop in there that does some expensive operation and then just pops out the children it just does like like 10 000 um you know whatever numbers yeah yeah just i wonder if i could do like does that like cache these like if it is like some expensive thing but like it's not going to change regularly what cache these like server components gosh that's because i'm trying to think that might make a lot of sense to have something like that where it's like yeah it takes a while to get all that data because of maybe you have to do like three different api calls to get all the data you need but once you do it's doesn't change yeah they wouldn't surprise me they were talking in the announcement about caching things at the component level which i don't know i don't even know what that means but it sounds pretty cool okay so this is fascinating this is not what i expected but um okay so we're getting an error so that's good but like if i hit refresh watch this it like shows that one that's wrapped and then it disappears oh that's so weird okay so let's read this here warning do not expect server html to contain a div okay i don't understand what that's supposed to mean what is it it's supposed to uh text content did not match server documentation okay so it's not the same on the server versus the client so the hydration is complaining right that's unexpected that is odd okay so if i just okay let's just call this card let's go components card oh it changed that import for me that's cool okay so that works yes yeah that's amazing that works just fine okay so let's change this to client only i'm having trouble thinking even what a client component rendering children inside of a server like what does that even mean you know what i mean yeah maybe it's basically saying like the server components are for leaf components a client component can't inject children into a server component it's almost like breaking the rules or something right yeah so let's see so i know that they talked about that in the documentation for or let's go back to this what direction you could do it in um is this where i was at yeah so that's middleware what happens if you have card.server and a card.client like what okay what happens there you can rename any nexus page so okay so there's doing it just to pages oh yes that's fair that makes sense yeah yeah so i was wrong okay cool so so we learned something by by failing um so there's only by reading no it was the failing it was the failing that made us learn travis [Music] not fair enough was it failing to read [Laughter] that's that's really interesting though because you can't use head no no wait you can import client components so if your head if you were to render a head component inside of a client component and then render that inside of the server page component oh wow terminology naming things is hard yeah so that would allow you to use the head though because then it's not the server component that's accessing context it is a client component my sorry my my brain shut down there a little bit let's let's make it let's make it happen um yeah cause i can't yeah my brain is not not grasping it in the abstract um yeah so suppose you were to make an seo component and that seo component just renders head along with a couple of seo tags okay like what you have right there okay the the the head component that you have rendering so so like so we would go something like components slash like seo or whatever mm-hmm exactly would be like just like title and like you know meta data or whatever no no no stuff [Laughter] that's it seo and stuff meta is a dirty word now oh uh okay all right so i'm just joking travis okay so we have so we have our index it's a four-letter word is that what you're saying like that's good it was low hanging fruit i had to grab it that's good that was that was a good one okay okay so we're gonna take this out now this should just it should work uh well oh indeed okay card is not defined wait what card hasn't been defined for a minute why is the rendering card in that oh yeah yeah yeah yeah thank you thank you okay so we've taken we've changed it to a client component we've taken head out it renders the way that it should but then also it doesn't do the things that we would expect this page to do with the head so let's go into head let's see what was it doing create next app um as the title yeah that's the muscle title yeah yeah okay so that's what it was doing so the idea here is that we could import a oh wait no i changed this to client this needs to be server right that's what we're saying we can make any page a server component okay so let me run this again because now it should now it's actually proving what we wanted to prove by working okay we took head out however we want to import this client side component right and let's explicitly call this client i don't think that's necessary but it's good to be explicit okay cool yeah i guess let's do it both ways so we'll start without and then we're going to import so just just in order to like get what we have had before or some of what we had before let's try this so from i guess that's a good question on style and naming schemes with next going forward do you be really explicit or do you just like do the implicit and only explicit on something yeah i mean i always favorite being explicit but it is interesting especially like when you think about libraries and stuff is is that if you have you know if you have just a bunch of like raw components theoretically like i'm trying to think through that like you would need to create wrappers if you wanted them to be strictly client component or server components it almost seems like a utility net should provide yeah at that point yeah well i do i do i i do have to say i do like that they're just kind of sticking to like anything in your pages directory can be a server component that that makes sense i was watching the revolve on next years on they also had server components not only pages oh okay interesting i wonder if they have that so let's uh after we try this let's jump back into our example again and see if that includes some of those things that you saw at the conference that'll be helpful to know okay so seo so export oops so here we want to just copy what we had before right so and next head yeah let's see hey dad i'm making a um an egg do you want a burger because i know you're allergic to this i'm good thank you though enjoy um it's adorable ruby's the best or was that rock rock yeah okay so now we want to return okay so this is um and then we're exporting this as whoops seo right that looked looks about right let's write to me importing and then we just need to use it right so that would be used here moment of truth okay hook is not supported in server components okay so can i rename this to client make sure you save your index.server.js yes cool thank you that could have been irritating oh hey that's so interesting when it first loads so so reload the page but look at the tab it starts off as localhost and then hydrates it pops in the fascinating but you would want that also in the uh for seo purposes in the uh servers though wouldn't you yeah like if you're that's questionable like google does run some javascript right maybe in this case it would be enough yeah hard to know i mean either way though so this is i mean it is kind of like an interesting like what are you using server side components for right because like either like no matter what before we were having um let me let me duplicate this so we can see so copy [Music] and to be clear that didn't work until you added.client to the seo and stuff component yes yeah yeah yeah so i'm reading more weird i'm reading more in the docs right now um they call components that don't have server or client appended to it universal components that will be either server or client depending on where you import it so maybe if you import it from a server oh yes it tries yeah gotcha so it's going to try to do it from the context that it's in and so we do have to be explicit to say no this isn't this can't be run as a server component so how the frick does head work then can you like not use it with server com server pages it seems like not that seems kind of weird of ssr yeah that's what i was thinking too was like you should be getting like the critical which it should include the head okay now to be fair yeah to to be fair my my understanding on this has changed is that this isn't like was it react server components are not about they're not about ssr they're about not having to ship huge like huge dependency trees or like huge dependencies like like date stuff right like you can ship just the kind of like component and the artifact of you know whatever the date is as opposed to like having to keep moment.js or date functions on the client yeah yeah yeah that's that's great but that doesn't really make sense when you can only turn pages into server components it would be way more awesome if you could turn individual components into server components that's the part that i don't get yeah and so i wonder if i wonder if maybe it was just my example that was bad right because we could do like theoretically we could add a component that is a server component but it looks like it would just need to be like kind of like a a leaf component as you know as was being discussed before right like it can't like compose stuff that comes from a client-side one does that make sense an example maybe being like say you had a current date component and all it did was use moment to format the current date or something it doesn't have children we that could be a server component that we'd render inside of a client that would be a server component we render inside of a client page yeah that would save shipping moment to the client right yes yeah i think that yeah that's that's my understanding as well and i think it also like i do want to like kind of it bears repeating that like all of this stuff is like just super experimental so it seems like yeah like there's no conclusions that we can really draw about like what this means for server components um but just kind of like what functionality is available in the experimental version of next which makes some of the server component features available and to their credit they're the first past the post like they're the ones that actually put it in for anybody else so props the next for doing that yes yeah yeah yeah so okay so i guess back to what we've learned so far like just kind of like what's the line in the sand here is is that the pages part of this is critically important um basically next is only making promises about what you can do with pages what we're seeing is is that if we want to we still can do we can render client-side only components you know if we have like a component um which is what he would give us access to head we are seeing a slightly different kind of like rendering of this so i'm actually curious actually real quick so index two is the the more traditional uh version of this so it has the head and and all that index dot server doesn't have that but it imports the head and we saw that kind of like flicker i'm not seeing i don't know if the flicker just happens faster on this page um because it does seem to still flicker in the title but i don't see it happen as um aggressively in the let's see let's jump over here like here i can actually like see it happen um i don't know what that means but i was gonna say let's do it uh a build i was gonna say maybe you should throttle but yeah let's do a build and actually see what it looks like yeah i'm super curious to see what it looks like in terms of building the pages out because especially because sometimes we forget strict mode adds a little bit of latency to our apps in dev mode which usually isn't a big deal but like when you're looking at flash of unstyled or things like that that gets noticeable with yeah okay so what do we have here i i still haven't learned how to read these symbols yet these are both yeah oh streaming oh got it streaming server and static okay so server side renders with streaming using react 18 ssr streaming or server components okay it's interesting that index 2 is also falling into that category because we're not taking advantage of any features except for enabling you know react 18 and whatnot tim always a pleasure to see you thanks for hanging out and helping us out um interesting this wasn't as informative as i had hoped it would be okay let's run dev again yeah so we can probably throttle this so if we go to the network and throttle this down see if that changes anything so fast 3g okay cool so we saw that kind of take place oh still going no so it looks like it's probably doing the same thing thanks alex thanks for being here um yeah it looks like it's doing the same thing okay cool i think that's probably uh good for that i i feel like we oh let me turn throttling off what time is it uh 1105 okay cool let's uh let's start wrapping things up um but let's see was there another feature that we wanted to take a look at so we walked through we enabled react 18 um we did the oh url imports this was something that i wanted to okay i want to get i want to try this if there's good enough demo for it so let's see if they have the uh the demo set up and we'll um we'll we'll get going with it uh first um okay so i'm gonna uh oops i can do it here let's save what we have so far so you convert index to server component okay let's see if we can get these url imports working um fortunately we have a lot of the configuration ready so let's um let's see if we can pop this in in like the next like 10 minutes or so okay so uh next uh j nexus 12 includes experimental support for importing es modules through urls no install install or separate build step is required your url imports allow you to use any package directly through url this enables an xgs to process remote https source resources exactly like local dependencies if url import is detected nextgs will generate a next.lock file interesting to track remote resources url imports are cached locally to ensure you can still work offline nextgest supports both client and server url and port imports okay cool um if air nil i just saw that name first thanks for following and i love your name if you're still in here um and then regcep thanks for following as well uh to opt in at the allowed url prefixes inside okay so we'll jump into nexjs config um okay so i'm just gonna use what okay so this it looks like these are just the places you're finding like cdn's that you're okay with is that what that is that's what it looks like so we could put like unpackage in here if we wanted to if that if that worked um okay and then here we just import that whole thing from that url okay so any cdn that serves esm modules will work including no code and design tools like framer so yeah all of these js deliver on package cool for more information watch the demo from xjs conf or check out the documentation so there is more documentation there let's give it a try though so in our home nope let's import and um let's see confetti i don't know how to use this component though uh let's see canvas confetti let's see check out the documentation okay so maybe we'll have more in here so it does a lock file okay so we import confetti um we can do this or i guess i gotta do this line by line report use effect from react and then we can create actually let's do this on another page i'm just going to do it as both because i don't know exactly what kind of page it needs to be okay what did i call it confetti okay failed to compile external target environment doesn't support that if you have to import restart maybe let's give it a try it's a good call sometimes it picks it up and then some oh snap [Laughter] someone wrote a module that just like throws confetti that's just about the coolest thing i've ever seen dang it wow that is rad url imports i'm about that i'm about that so this is a page can we do this i mean we can't because it's a use effect right so if i put server that's going to blow up yeah of course hook's not supported makes sense so you could do something like this for like maybe going back to like old school like web pages like throw moment in there or you know something that is like maybe bigger but like use on package and and just have like a more hopefully like get the caching support of like having a cdn like how we used to write pages back in the day before bundling became almost a requirement totally totally yeah this is so freaking cool i love seeing that work i love that perfect emote hagona matata um oh my gosh so cool well you know i think that we did a lot today i i feel good about what we learned um we traversed a lot of this documentation so i feel like we um you know have a better sense of like where stuff is where some of the edges are um what you know what is available for us to kind of you know find in the documentation so i feel pretty good about this any questions before we uh we wrap this one up on twitch or in discord down for whatever feeling pretty good i feel pretty good i'm feeling pretty good um cool so let me uh commit this last thing up if you have any questions um just you know get them in now so add i still think i need to wrap my head around ssr and server side components where they're different and where they intersect yeah yeah but i think that's just gonna be like a new mental shift that's gonna have to happen slowly for sure yeah i think especially around styling as well you can't simply import css modules anymore yes which i'm sure there's good reason for that but it makes me question how you do handle something like that right well yeah i mean and then it goes into like what what if you're uh like an emotion or style components kind of person like how does that factor into it yeah can those even happen on the you know can those happen on the server yeah all of this is brand new and i'm sure it'll be answered for that soon but that's uh one of the things i'm curious about yeah yeah very much so okay cool so let's um let's see let me make sure this is just all the changes that we needed to do um oh that's part of our build what is that oh next.js lock interesting this is not what i anticipated it looking like so nextgs lock interesting so it looks like it actually pulls all of this down fascinating so i mean with with all lock files i'm always curious like is this something that i commit probably so but that is strange okay let's commit it i guess it helps if i you can still develop even if like your internet is down you can still like keep developing locally yeah all right cool cool well hey this was fun uh thanks everyone for being here and uh you know for both twitch and uh discord um these are always fun for me i love getting uh y'all's insight on this this as we go through this um thanks for exploring um if you're on twitch i'm gonna post a link and if you want to hang out in discord um i love love meeting new people and uh we gotta we got a fun crew in there so anyway that's uh that's that we'd love to see you there come say hi and um yeah i guess that's that's it for now i think uh only thing is like next so next week on monday uh i'm just gonna be streaming just me and uh the fine folks on uh who join on twitch i'm gonna be doing um some css stuff uh be working on a um a stack element um in css and kind of doing it the way that i think it should be done as opposed to the way that everyone seems to do it which is the wrong way um yeah so anyway that'll be fun a lot of a lot of hot takes in that one i'm sure so uh see you monday and uh yeah peace out everybody

Channel: lunchdev

Views: 28

Keywords: games, twitch

Id: LCHL0PwmDIU

Length: 82min 7sec (4927 seconds)

Published: Wed Nov 17 2021