Here are top level of them: Data fetching (the rest topics), Caching, Styling, Optimizing, Testing, some important Configs, Some APIS and primary Functions in more detail,...
Thanks for the great content ! But I'm wondering what is the best practice to have communication (lifting state for instance) between a server and client composant. For instance, I have a graph (with heavy lib, so better stay on the server) and I have a zoom button (so 'use client' as it's a button). So if I'm clicking (or choosing an option) I should lift the state to the Chart , but how I handle this new state inside a server components ?
You should draw the boundary that indicates where the data should live. If it's heavy, you can keep it on the server and provide API to the clients so they can fetch based on their needs and store it in their state. If you want to send them all to the client, you can pass the data to your client side component on the server or you can use simple context provider or using third-party state management libraries like Zustand or Redux, you can initialize the data on the server, pass it to the state manager and consume it on the client. In this case, serialization and sending them to the client at the load time will be done automatically by the Next.js. If you want to keep the State on the Server, it adds more complexity because of not having them built-in in Next.js and you must implement it using maybe a database on the server and keep track of every client's state there.
Server actions video is released now. but regarding SWR, since it's an external library, I won't cover it in the Next.js course. I mentioned it in the data fetching video just to show there are better options rather than performing data fetch in `useEffect`
Please keep uploading youtube suggested your channel currently learning nextjs totally worth it thank for this series
Glad to hear. will do
Can you please share some sort of syllabus or index of upcoming videos
That would be too helpful
Here are top level of them: Data fetching (the rest topics), Caching, Styling, Optimizing, Testing, some important Configs, Some APIS and primary Functions in more detail,...
@WebDetailed great can't wait
Thanks for the great content ! But I'm wondering what is the best practice to have communication (lifting state for instance) between a server and client composant. For instance, I have a graph (with heavy lib, so better stay on the server) and I have a zoom button (so 'use client' as it's a button). So if I'm clicking (or choosing an option) I should lift the state to the Chart , but how I handle this new state inside a server components ?
But I already guess that we must play with state in URL and Context provider ?
You should draw the boundary that indicates where the data should live.
If it's heavy, you can keep it on the server and provide API to the clients so they can fetch based on their needs and store it in their state.
If you want to send them all to the client, you can pass the data to your client side component on the server or you can use simple context provider or using third-party state management libraries like Zustand or Redux, you can initialize the data on the server, pass it to the state manager and consume it on the client.
In this case, serialization and sending them to the client at the load time will be done automatically by the Next.js.
If you want to keep the State on the Server, it adds more complexity because of not having them built-in in Next.js and you must implement it using maybe a database on the server and keep track of every client's state there.
please cover swr deeply
Realtime re-Validation with SWR and server actions!
now version 2.3.0 is released.
Server actions video is released now. but regarding SWR, since it's an external library, I won't cover it in the Next.js course. I mentioned it in the data fetching video just to show there are better options rather than performing data fetch in `useEffect`