I think currently my implementation of error handling when fetching data is not the best practice for Next.js. I know that i suppose to use server side rendering for the component but I'm still using client side rendering when i need to fetch data and handle the error. I'm aware that Next.js has its own best practice for error handling using error.js page. But one of my page has multiple section where in my code has its own error handling. So when 1 section failed to fetch, the other section in my page can still be rendered. Also to mention i have also implemented loading state while waiting for the data.

So what I'm trying to achieve is implementing the best practice on error handling and data fetching on my code. I also need opinion on section based error handling, is this good or i should just do loading and error handling on the whole page. Thank you

you can access this repo on: https://github.com/javierreansyah/Swiftz
and you can access the deployed website on: https://swiftz.vercel.app/

you can check the code on how i implement it on:
app/movie/[id]/page.tsx the section based component
components/movie-details.tsx error handling and rendering movie details
hooks/use-movie-details.ts fetching data