Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dulnan/nuxt-page-dependencies
Defer rendering of components that depend on page data during SSR
https://github.com/dulnan/nuxt-page-dependencies
async nuxt nuxt-module nuxt3 page ssr
Last synced: 3 months ago
JSON representation
Defer rendering of components that depend on page data during SSR
- Host: GitHub
- URL: https://github.com/dulnan/nuxt-page-dependencies
- Owner: dulnan
- License: mit
- Created: 2024-03-26T16:10:42.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-03T07:09:17.000Z (5 months ago)
- Last Synced: 2024-10-10T17:41:16.704Z (4 months ago)
- Topics: async, nuxt, nuxt-module, nuxt3, page, ssr
- Language: TypeScript
- Homepage:
- Size: 289 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nuxt-page-dependencies
**Defer rendering of components that depend on page data during SSR**
This Nuxt 3 module implements a way to defer rendering of components (think
breadcrumbs, language links) outside of the tree of a page component until page
rendering is done.
The obvious solution would be to put all components that depend on page data
into the page component itself. But this would render them on every route
change, which is most likely not what we want.
## Setup
```bash
npm install --save nuxt-page-dependencies
```
```typescript
export default defineNuxtConfig({
modules: ['nuxt-page-dependencies'],
})
```
The module only has a single option called `checkComposableCalled`. If set to
true (default), it will check the contents of all page components to make sure
the composable is called.
## Usage
### Wrap components that need page data
```vue
```
### Call composable to start rendering dependencies
```typescript
// Do stuff that mutates global state.
// Render .
await renderPageDependencies()
// Done!
```
## The problem
Let's say you have a layout component in `layouts/default.vue`:
```vue
```
And this component that renders the current breadcrumb:
```vue
const { breadcrumbs } = useBreadcrumb()
```
And a page component like this:
```vue
{{ page?.title }}
const route = useRoute()
const { setBreadcrumbs } = useBreadcrumb()
const { data: page } = await useAsyncData(() => {
return $fetch('/api/get-page', {
query: {
path: route.path,
},
})
})
setBreadcrumbs(page.value.breadcrumb)
```
This results in the following component tree (simplified):
```
-
-
-
-
-
-
```
By default, the `` component will display no breadcrumb, due to
`breadcrumbs` being empty. This is because the page component did not yet
render.
## The solution
The module provides a component called `` that can be used
to wrap other components or parts of a template. It will only start rendering
its default slot once the page has finished rendering:
```vue
const { breadcrumbs } = useBreadcrumb()
```
This also works for any part of a template, as can be seen in the example above.
Under the hood, the component returns a Promise in its setup() method and waits
for a specific event to be emitted. This event must always be emitted manually,
using the `renderPageDependencies()` composable:
```vue
{{ page?.title }}
const route = useRoute()
const { setBreadcrumbs } = useBreadcrumb()
const { data: page } = await useAsyncData(() => {
return $fetch('/api/get-page', {
query: {
path: route.path,
},
})
})
// First update the state.
setBreadcrumbs(page.value.breadcrumb)
// Render the dependent components.
await renderPageDependencies()
```
## Custom composables
For the `checkComposableCalled` option you may also provide an array of
composable names to check, for example if you create your own composable that
fetches page data and sets global state and calls `renderPageDependencies`.
```typescript
export default defineNuxtConfig({
modules: ['nuxt-page-dependencies'],
pageDependencies: {
checkComposableCalled: ['renderPageDependencies', 'loadPageData'],
},
})
```
```typescript
export async function loadPageData(): Promise {
const route = useRoute()
const data = await useFetch('/api/load-page-data', {
query: {
id: route.params.id,
},
})
setBreadcrumbs(data.breadcrumbs)
// Call the composable so that components can be rendered.
await renderPageDependencies()
}
```
```vue
{{ page?.title }}
const page = await loadPageData()
```
## The now introduced problem
Obviously, this is more of a workaround than a proper solution. It's also
dangerous: If you forget to call the `renderPageDependencies()` composable in a
page component, you will completely block SSR, because the Promise is never
resolved. While the `` component does resolve the Promise
when there is already an error or when an error happens, it does not implement a
setTimeout() or any other mechanism to resolve the Promise. Make sure to not
forget calling the composable on every page!