NextJS 15: React 19, Less Caching, Turbopack, Better Hydration Errors and MORE from Vercel Ship!
Vložit
- čas přidán 26. 06. 2024
- NextJS 15 Release Candidate 0 is out and it's got so much good stuff. Let's take a look feature by feature and try them out to see what's in store for us. React 19! Caching is off by default! Super fast builds with Turbopack! Hydration errors you can actually debug! And much more! Let's jump in!
Code: github.com/jherr/next-15-rc-0
Release Notes: nextjs.org/blog/next-15-rc
👉 Upcoming NextJS course: pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
00:00 Introduction
00:20 Trying Out NextJS 15
02:19 Now On React 19
04:13 Integrated React Compiler
06:51 Better Hydration Errors
07:56 Caching Off By Default
14:59 Per-Router Partial Pre-Rendering
15:24 Post-Route Callback with After
16:26 Build Updates - Věda a technologie
Instead of just reading release notes to us, you are demonstrating how it works! This is what makes you different from the others!
true
Now tell that to Theo T3 😁
Why @@maacpiash
@@isaacjon Because Theo is a sh!t show, a bunch of click bait with no real content. Jack is honestly the man, by far one of the best doing content in this space
Opting in for caching is much better than opting out by default. I'm so happy about these changes.
Me too. I get where Next was coming from when it was opt-out. But folks were learning a new route layout model, RSCs and caching simultaneously. And that’s too much.
OMG finally no caching by default. I might cry 😭
Another great video, informative and well explained, thanks Jack!
This has been so useful, thanks Jack
Crisp, to the point and no non-sense talk, thats why you are awesome!
Can't wait for next js 16 next month!
Seems like six months is the cadence. And FWIW, this is pretty evolutionary. Your code will just work better on 15. Unless you were dependent on the caching.
Another great video. Thanks Jack!
great walkthrough, ty Jack!
15:26 - In the second sentense (or first two) is explained why we need after(). :-}
Jack, small grammatical error on the pro landing page
“His CZcams channel hosts an entire free courses on React and TypeScript”
Thanks for all you do. Pretty sure you save me at least 100hrs of research a year.
Thank you for the time and effort you put into this.
Really appreciate this.
Appreciate your effort Jack! Your videos are so good and your explanation on point. Much love
Great video!
What an informative vid! God bless
Great video Jack ❤
Thank you Uncle Jack.
Great vid papa jack ,👏
10:58 You forgot to use html time tag. Video is awesome
How did get your Mac terminal to look like that? And thanks for all your videos. They are quite informative.
Awesome video! May I ask what is your VSCode theme?
Night Wolf [black]
I could see after() maybe as a tidy way to run 3rd party analytics that needs to also run on the server bypassing the 3rd party cookie apocalypse.
Awesome content as always. But please tell me creating express mini services inside next projects is not about to become the norm! That's giving me the jeepy creepys. :O
Hahaha. No. I’d use a monorepo for that! 😂
Man, it's been awhile since you announced your course and I've been waiting.. How much longer do we gotta wait? :)
Soon, man. Believe me. I'm right there with yah. Building this thing has been a TON of work.
@@jherr i would love to enroll into it but being from india i would like to know if the fees are considering PPP or not?
Thanks, looking forward to it.
I really appreciate your content, great job! I'm a creator too (for italian buddies): how do you get that cool code highlighter effect in your live coding?
That's a trick I do in post with Screenflow. The "magic" is that I use a pure black background as my theme. Then I just use their callout mechanism to select the areas that I want highlighted, and everything just ... fades away.
FWIW, I use a 55% fade. I got some feedback early on that 75% was too strong and you couldn't see the contextual code. 55% seems to be the sweet spot.
Also I have a streamdeck and I've programmed some buttons to add the callouts with the right settings, so nowadays I just scrub to where I want it, press a button, draw a box, shrink or expand it to whatever length I want, then I move on. I've even started depending on it, as I talk I remember that I'll be highlight later so I don't move the mouse or the screen at that point. Which is kinda cool.
FWIW, it's really import as a creator to automate/simplify as much as you can. The more you do that the more you'll be willing to do the work later. If the effect is arduous to create you probably won't use it as often as you should. If it's easy to create you'll use it as much as you need.
Feel free to reach out personally if you have more questions, I'm always open to support folks that spend their time creating for the community.
the boilerplate annoyed the heck out of me too. glad its smaller now.
Just to clarify they do not think Turbopack is ready for production. Only the dev test pass.
I stopped using turbo + nx and now go exclusively pnpm workspaces for monorepo and it is so much smoother sailing, updates, less troubleshooting, less to go wrong, no surprises when you update...
oh boy
in the end of the video, you smile then disappear, like a wizard 👻
Why?
I like that caching becomes more of an opt-in feature. What I'd like to know is if request memoization is also affected by this change. Deduping fetch calls of a single request was great as it reduced prop-drilling. If caching is off by default, does that also mean that deduping on a single request is also off?
fetch de-duping during the request is a core feature of React 19, so it's still there. There is some talk that they will stop patching fetch in the future, so we might end up needing to import a specific fetch to get the de-duped behavior.
The after is useful for API routes that can return data to the user, and continue to do perhaps more DB updates etc. or kick off another process. On the FE it's probably not all that useful tbh** edit: Not possible to use after on FE/client side, ignore that.
Well, if by FE you mean if your NextJS server is just serving the FE and not providing microservices, then I might agree. If you mean on the client, then it doesn't run there, it's server only.
@@jherr Oh that's an oversight on my end, I hadn't tried to use it client side but just thought it might work too for some reason. Ignore that!
Legends who are still on the next 12, for their production apps 😌
btw what pointers would you consider for someone who wants to upgrade to Next.js 13-14?
great video, informative !
Wait until 15. It won’t be long. That way you don’t have to worry about caching so much.
@jherr will generatemetadata function get deprecated in next15 since you showed we can have metatags inside component
I don't think so. IMHO it's fine to have two separate mechanisms.
Must watch for any React dev.
I think after could be useful for analytics
just updated a next14 project to the v15 and all works fine even react compiler does
I'd watch out for the cache changes. If caching was something you needed for perf reasons you'll want to make sure that still works. If caching was more of a hassle, then you should be fine.
@@jherr Hi Jack, right now I have a couple of points temporarily in the 'no-cache' mode, I guess this shouldn't be a problem with the new relaxed caching anyway. One more cool thing is, as you've mentioned, apart from instead of the useFormState now is the useActionState, you can now import isPending directly from the useActionState and there's no need to have the submit button in a separate component along with the useFormStatus altogether, how cool is that?)) Let's now look forward to the turbo for the "build" mode)
@@romansernato6526 Well spoken my friend! Definitely looking forward to updating my form stuff with useActionState. I'm so, so, so tired of form issues.
@@jherr works like magic now, I personally do not see any reasons why to use anything but server-actions with forms, you can validate it inside the action, return results or validation errors if needed, no more weird stuff on the frontend)
About react compiler. I wonder that my exisiting source code had using a lot of memolization, if I want to apply react compiler, should i replace all these memolization function, and react UI framework as well?
Thanks Mr Jack
I have one request can you make a video on SWR i have seen tweet from Rauch about client and server data fetching
Its quite good
Do you have a specific issue with SWR that you are facing? Generally speaking I look at SWR as kind of a paired-down React-Query. So when I cover RQ I hope that, in a way, folks can translate that into SWR pretty easily.
Is after() a bit like useEffect for server components?
Conceptually. In that they run after the initial render. In this case it runs after the page is sent to the client. So there is no opportunity to do more for that particular request.
@@jherr thanks for the clarification! I think there might be rare cases where we use it. Just can't think of any atm
@@Niko_993 However, you may need to perform tasks such as logging, analytics, and other external system synchronization. the documents shows that
i think they say after is good for things that shouldn’t block the response such as logging and metrics?
Good one!
The cache not working as expected on page.tsx is because all page are SSG by default, you have to make them client components or tell them to be dynamic I guess, not sure if bug
A fetch on pagel.tsx _should_ make it dynamic. It's not doing that right now. So I think there is an issue there. There is also something going on with Tailwind. I think there are a few bugs to work out.
Can babel-plugin-react-compiler be a dev dependency or is it needed in runtime? Also, do you know if they'll be updating eslint-config-next to support eslint 9 and flat config?
Wondered that myself. I was going to use -D but then I looked at the docs and they didn't, so I stuck with that. Not sure about eslint, but most likely.
@@jherr Just tested a next build with it in and not in dev dependencies, clearing node_modules & "pnpm i -P", and it appears to work and run as expected, as the component render box doesn't appear. I think the babel transformations are likely applied during dev and build compilation, but it's hard to be sure since next build works without other things like react-dom sometimes.
@@SmoothNanners Cool. Thanks for looking into that.
Hi Jack, just like caching is by default off now. Do you think it would have been a better experience to keep component as Client side rendering by default?
That's an interesting point. I think that ship has sailed though. I don't think they could make that change and keep backward compatibility.
@@jherr you're right. It's already the second version after the introduction from v13 so there is no going back. I'll surely go through some of your videos to get a deeper understanding on this.
Thanks,
Yash
My God, Jack, I was just wrapping up my e-commerce project on nexjt14, now I need to upgrade😢
oh-my-posh on Tabby using JetBrains Mono NF at super big sizes. FWIW, I'm moving off of Tabby onto iTerm.
u can use react compiler with react 18?!! in the docs they said u have to use 19 !
Nope. It works with 18. medium.com/@jherr2020/react-compiler-with-react-18-1e39f60ae71a
@@jherr this is super cool thank youuu 🙌🏼🙌🏼🙌🏼
After Use Case? is after something like I want the page view field to be incremented. This is really not part of page per say. ???
Ok. That’s a good case. I haven’t seen a page views thing in a while!
@@jherr also analytics or internal error reporting. the user can already get the response and the server can proceed to report the error or send analytics without the user having to wait
What command line are you using?
I use iTerm or Tabby (moving back to iTerm now) with oh-my-zsh and oh-my-posh.
@@jherr thanks you
For real, Jack is a low key hottie. More like "Jack Heart-throb-ton" amirite
Hiya. im curious as to why you mention that nextjs servers shouldn't talk back to themselves. from what i understand, something on the frontend using next should be able to talk to an api route defined in the same project. isn't that the whole point of having api routes? the bit i'm referring to is here: 11:50
Yeah, I'm talking specifically about RSCs on the server talking back to itself. The client hitting the API endpoint is totally fine. RSCs on the server fetching back to the API routes is just time wasted for no gain.
In addition there is the added complexity of requiring an absolute URL in the fetch which means that the server code needs to know where it's deployed so it knows whether to hit development or production endpoints.
What's better is simply to call the same function in the RSC that the API uses when it handles the GET request.
@@jherr ok, yea. That makes a lot more sense. If we're on the server anyway, why not just call the function instead of going through an api route.
Thanks very much for your videos, I've learnt lot, and you're the only one doing it in such a no bullshit way. I love it
Vercel is now like a video game console producer with the rights to an exclusive title: React.js from the Meta inc.
And that's disgustingly sad!
When it comes to “meta” tags being “hoisted” into the head, does it differ that much from implementations like react-helmet? In my opinion, the pattern is actually rather complex. It’s in effect a side effect in the DOM you have to manage. It’s easy to create accidental race conditions and leave the title with an incorrect value.
It’s how people have been using head content for almost as long as React has existed so it makes sense to adopt it into the core of react. Still feels like the pattern would need some work from a DX perspective.
It's basically helmet in the core. I don't really see the issue there with complexity. It seems less complex to me. But generateMetadata still works, so just stick with that if you don't like it.
Hmm, not being able to have api only routes in nextjs is not ideal. Why not? If you need some processing stuff to happen you need to invest time learning and maintaining other tech as well.
API routes are fine. It's calling its own API routes from its own page routes that's the problem. You should just call whatever the API route is calling from the page route. It saves the HTTP negotiation and TCP/IP loopback.
If just middleware would not be artificially constrained to the edge runtime…
…and if if just server actions wouldn’t queue when being called - then I’d be excited for this stuff.
The server actions qeueing is an odd one. I missed the chance to talk to someone from the React core team about that one. I'm pretty sure it's a core issue since actions are in the core.
@@jherr Probably. It is just incredibly limiting (and frustrating) at times, so I hope to see those two things changed.
Now my skill on Next 14 is being deprecated
Vercel can't be trusted
Why ?
Breaking changes every other day
Ok
Except that none of this was really a breaking change unless you relied on the caching. I'm not a shill for Next/Vercel, but "every other day" is a stretch. There are breaking changes. But, in my experience, it hasn't been that terrible.
Ew. Vercel