Відео

Great question! Cache is in the main react package because it's useful for any React Server Component to use.

Oh awesome! That's great to know!

The cache function is only available for React projects that use Server Components. If you're using RSC you can `import { cache } from "react";` and it will work. If you're not using RSC then cache is a no-op and doesn't do anything. Hopefully that helps!

@@RyanToronto hello Ryan, how do I know if I am using RSC? What is an example of a Server Components?

@@RyanToronto hello, it has something to do with the React Canary?

cookies.set should do it! Take a look at the docs, you might need some options like how long until it expires: nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options

@@RyanToronto yes, already tried but the request comes from a server component so it only sets the cookie on the reply. Anyway i solved my problem so it doesnt really matter anymore, thanks for the help though :D

Great question! Transitions that wrap transitions are very common and I think saying they are "batched" is the right way of thinking about it. If a transition is inside another transition then neither state update will apply until they are both ready. In other words the state updates happen at the same time for all nested transitions.

@@RyanToronto cool, yea that makes sense, thanks!

Thank you!

Thanks!!!

Thanks!

Hey there! I think ISR should work with the modal. If the homepage or an image changes you'd need to ISR both pages.

Wow thanks for the kind words! Really appreciate it!

Great question. You can use Next's built in cookies() function to read the cookies in your server action and then pass them into the fetch request your action is making to your backend.

@@RyanToronto I've tried this and several other methods but it's not consistent or maybe I don't quite understand the situation here. From the client side credentials: "include" works as expected. So I thought with your amazing explanation I could understand better. But Thanks. I'll keep trying.

Oh that's strange, setting cookies in server actions should absolutely work! I would try opening a bug report with a reproduction showing the error. Sorry I couldn't be of more help!

For a cookie banner use a server action to set the cookie when they click the accept button.

Nice! Did the web api end up working out for you?

@@RyanToronto no lol. Too hard. I’m already using a separate api written in golang that handles auth so I just wrote an endpoint that does the encryption (much easier in golang) - I call that in the middleware to give me the encrypted string I need to write a cookie. Works perfect for me.

Oh that's a very neat idea

Glad it helped!

Thank you! To answer your question it really depends on the framework you are using and how your app and action is setup. If you're using Next.js with server actions you'll most likely want to call the built-in `revalidate()` function to update any components on the page.

Thanks!

Hey there, would love to! Do you have an example app, mockups, or any code you can share so I can better understand the app and problem?

Thank you! Ya that's a great idea for a course. I think once React 19 is released there will be a great teaching story for RSC from scratch.

Thanks Erik!

Glad you liked it!

Thanks!

The refresh wasn’t happening because reset was executed before refresh had time to complete. - Router.Refresh is refreshing the connection to the server. - Reset restarts the component. No async option on refresh.

Exactly what @erikplachta said! Since you want refresh and reset to happen at the same time they both need to be wrapped in a transition.

Thank you! Glad you enjoyed it!

Yup, router.refresh uses a transition under the hood. We need to put both the reset and the router.refresh in the transition so React knows to not reset until the refresh is complete. We're telling React we'd like to transition to a state where the router is refreshed and the error boundary is reset. React won't apply the state update until those two things are ready. Another way of saying this: Putting them inside the transition tells React that they need to happen together.

Sorry to hear about your issue. Do you have an example app or demo of your app anywhere?

@@RyanToronto it's a private code that I can't share but it's a server component takes an id in the query and display the needed component I can provide a basic example of you have a discord or something hhh

Thanks, glad you enjoyed it! Yah I think pino is great for logging. That said I'd still throw the error and have the error boundary catch it, but maybe also use pino right before you throw the error.

Heya! This video uses the pages router, which was before server/client components existed.

Great question! I don't think there's a one size fits all answer here. Both approaches (using the catch block and returning an object) can be useful at different times. I'd throw and error and use a catch block for the times when the error is an exception. Things where there's no obvious next step, like a database connection failing. Not much you can do in this situation, so throw an error and catch it somewhere else. And I'd return an error object for that times when there is a next step. If a login() function fails then I know what the next step is, it's to display an error message telling the user their credentials are wrong. That's not really an exceptional situation, so I'd return an error and let the code decide what to do next.

@@RyanToronto Thank you! That makes a lot of sense :D

Hmm, sounds like there might be a bug somewhere! Have you tried making a minimal reproduction that highlights the issue?

@@RyanToronto No, I didn’t try in minimal app. May be i will check it out. I want to know is that possible to get updated value which is being set in the cookies through middleware. Example: i added the middleware and inside it i am setting the cookies which is next url path. I added the config which is /about (so this middleware is run only in about page). Now when i access the about page, cookies will set through middleware, now i want to access that cookie in about page. Every time i try to access that cookie i get old value not newly set cookie through middleware.

Yup! You can wrap it in debounce if you'd like to avoid going to the network right away.

Hey there! Great question :) It's always tricky when you have a static page that needs to have 1 or 2 small dynamic elements. I think there's two ways to go about solving this: 1) Your page isn't really static anymore since it has dynamic elements. Have the RSC fetch data to determine which version of the like button the user should see. 2) The other option would be to keep your page static and do client side data fetching. That sounds like what you're suggestion with the server action. The only thing to be aware of is that server actions are made for mutations, not fetching data, so it's better to use an API route to fetch the data needed to display the button. Personally I'd go with option 1, but I think option 2 is okay if keeping the page static is a hard requirement for you. Hopefully that helps but please let me know if anything isn't clear!

@@RyanToronto Thanks a lot for the insight!

Good question! I'm not sure about the naming. If I had to bet, one of them might get renamed... but we'll have to see. They're both unstable/canary APIs right now. React's cache and Next's unstable_cache do different thins. React cache is per request, it's very short lived. Next's cache is shared across all requests, and can last until it is invalidated. So there are different situations when you'd want to use one over the other.

Great question! It really depends on your server, but my guess is most servers can handle running a database query every second without issue. That said everyone's server and traffic patterns are going to be different, so if you'd like I think you can change the interval to be every 10 seconds... or get rid of it all together and only recheck on focus. Really whatever pattern you use is up to you!

Rendering and security are great points! Thank you

Yup, exactly! Once you include Markdown in a client component everything is shipped to the client. RSC saves the index page from having to download the marked library. Only users who visit the edit page end up downloading marked.

Thanks!