Navigation/Page Transition Problem & Image Optimization in Next.js 13

[aimonext]

Problem

We have integrated this package into our Nextjs project and recently we noticed that when we click any kind of link (Generated by flow bite components) that redirects to the next page and it refreshes the whole page. We use this kind of framework for SPA applications, right? If it refreshes then where is SPA? Why do we use these frameworks?😕

Solution

We need to work on flowbite-nextjs or any other solution that solves this problem👌

[carlonoelle]

Needed, and with RSC support please, that means no react context can be used. With it we are stuck with ISR, but we want server components if possible. Example Library: https://ui.shadcn.com/

[tulup-conner]

Hey all, yeah, this is a work in progress. We are aware of the issue and I'm in the process right now of researching exactly what we need to change to make this work for all of the components. I can't really provide a timeline but I am pinning this discussion and I will follow up here with updates.

[aimonext]

The page is reloading while we navigate that's the problem. Nothing broken! Just we should use Nextjs's inbuilt Link component instead of the anchor tag.

[tulup-conner]

Yeah, nothing is broken at all - basically the issue that users are having is that we are currently using React Context to provide the ability to "theme" (see https://www.flowbite-react.com/docs/customize/theme) each component, which forces your components to become React Client Components by default. In Next.js 13, components are, by default, React Server Components, so the burden is currently on the user to manually add "use client" to any pages using Flowbite React components. The plan, in a nutshell, will be to change this behavior so users can use RSC where possible. That's for most components, save, for example, the Carousel or Pagination, which have interactivity that can't be avoided.

[augustosamame]

That's sort of a relief. However, forcing all components to be client components because of theming is a big deal. Interactive pages that use state are client components by nature. But we're also using Flowbite for our mostly static landing and product pages which should be server components. Are there any workarounds?

[tulup-conner]

@augustosamame There isn't a way currently to make the components behave as RSC, but you can simply import the flowbite-react library into a file of your own with "use client" at the top, and import from that file instead of flowbite-react itself. You'll still be creating Client Components in the tree this way, but at least your app will work.

I'll be publishing a discussion on GitHub this week presenting this option, as well as others we have considered with the goal of obtaining feedback from the community about which is best, and if there's something we haven't thought of that might be even better.

[tulup-conner]

Following up, check out the discussion at #923!