Server-side data fetching in Next.js 12 vs. 13

#vercel #nextjs

[dylanstephens]

Sam's the man. Good seeing him on Vercel more often. His delivery of knowledge is much like Lee's, concise and without word salads. Learned quite a few things from his Framer Motion tutorials. Thanks!

[chrisl]

This was a brilliant introduction and comparison between the fetching of server side props and that's coming from a complete beginner of NextJS. Keep up the great work!

[Disorrder]

Finally next can contest vue3 with async setup function. Big thanks to Next team!

[bullpasha]

These videos teach me more than reading multiple pages of the docs. At least that's my experience. I'd love to see git repos for the videos, in this one, i am particularly interested in the nav link component

[JulianGarciaVEVO]

Great format, would love more content in this straight-to-the-point way

[stevedylandev]

This came in clutch when migrating to the 13 beta; thank you thank you 🙏🏻

[xikago]

This man said fuck a Intro and got to the point. we need more vids from him.

[sahilm]

Yeah, it's cool n all, but when will it come out of beta?

[MrZiyak]

i am subscribing with the trust that you'll wont spam my feed like you'll did a few months ago around the time of the next13 release

[henriquematias]

how would you hydrate let's say usdSWR with that data?

Can you just use a hook like useSWR and pass the result of getUser as `initialData` for SWR and next will automatically do the magic of fetching the `awat` on the server and the hook on the client?

I think that's what's most confusing.

Also, what's are the chances of something like an ENV variable leaking to the frontend in those scenarios?

I think one of the nice things of getServerSideProps is that it's clear that's only executed on the backend and none of the ENV vars will leak, but i feel with server components it's not so self explanatory?

Could you kindly expand a bit on that? Thank You

[wfl-junior]

Does the Header component refetch the user while navigating client side?

[MateusGamer]

Awesome stuff, can't wait for Typescript to allow the usage of Async components without needing to use an ignore line flag

[PeterKellner]

I notice you did not go back to the Layout component after you converted Header to async. You would have seen a nasty TypeScript error complaining that the component is not valid (I'm sure you know this).

I hope Vercel is really on top of getting that fixed. A little disappointed you did not show that error, as it makes it look like life is completely good and simple (which it is not with NextJS 13 at the moment)

[nanotichorizon]

From Rick Grimes the Sheriff to Rick Grimes the Programmer

[DeaViNG]

I'd love to learn next, any recommendations beside reading the docs? would be much appreciated!!

[Mitsunee_]

I'm really stuck on that particular problem. I currently have a Meta component that uses next/head and also puts data into a store that my Header component subscribes to, but obviously that doesn't work in SSG/SSR, so I end up with the default title and placeholder description in the html of my pages. I could solve this by having a meta object in the pageProps of every page, but then that design stops working if I ever adopt /app where - since server components don't do hooks at all, I can't even figure out what route I'm displaying to fetch the meta props from a json file or something. Really at a loss for future proof solutions here.

You used the getUser function, not fetch which can be provided with auto and demanded data validation. I am now struggling to get it to work with fetch... and with no luck.

[kentay]

Does anybobdy knows why in your video you can make your component async and me I got this error whenever I try ? "index.js?46cb:602 Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."

[linkupxc]

but there's a little issue with next 13, when you use async on a page you can't make client side actions on that page or any of its parent pages... do you have any help with this?

[imobcode]

What if I'll use "useState"?? because for that I'll have to add "'use client'", and after that the page will be rendering in the client side... How to solve that problem???