search

dulnan / nuxt-page-dependencies

Defer rendering of components that depend on page data during SSR
MIT License
7 stars 0 forks source link

Support Server Components #1

Open johannschopplich opened 6 months ago

johannschopplich commented 6 months ago

First of all, thanks for this module! I was using a similar approach, but yours is far more elaborated.

However, using server components or server-only pages, the page dependency promise inside <NuxtPageDependency> will never resolve.

I have tried, but haven't found a way to support server-components for page dependencies. Maybe you have an idea?

dulnan commented 6 months ago

I haven‘t worked with server components yet, so I didn‘t have this on the radar. I‘d have to get into this topic first.

dulnan commented 3 months ago

I finally got the time to look into this issue. And, if I understand it correctly, it is actually not possible to support this feature: According to the docs, the moment a server-only component/page is rendered, Nuxt will create an entirely separate app, complete with its "island context". The important part from the docs:

You can't access the 'island context' from the rest of your app and you can't access the context of the rest of your app from the island component. In other words, the server component or island is isolated from the rest of your app.

What that basically means is that there is no way to "pass" data from a server-only page to let's say a breadcrumb component located in app.vue, because both "live" in two completely separate apps. This is also the reason why the <NuxtPageDependency> component idles forever: The renderPageDependencies() composable emits a hook in the "island app", while the component listens for the hook in the "root app".

Unfortunately, there is no hook emitted for when a server-only page has been rendered and I have not found a way yet to "know" inside <NuxtPageDependency> whether the page we are rendering is server-only.

But even if I manage to at least properly resolve the promise in <NuxtPageDependency> so that it doesn't idle forever, the slot content will not have the correct data anyway; we would be back to the same problem that this module tries to solve.

dulnan commented 3 months ago

The only workaround I can currently think of would be to not use server-only pages, but only a server-only component and then use said component in your page component. That way the renderPageDependencies() could be called in the page component and it would resolve the promise.

johannschopplich commented 3 months ago

Thanks for the thorough problem deduction. Makes sense. Maybe there's a way to store serializable state between the island components using unstorage, but to manage and invalidate given state properly is probably a lot more complicated. If some app in the future requires said state handling, I will provide a PR.

Thanks again, feel free to close this issue, if you want.