docs(guide): add information for context difference between server conly component and app context

This commit is contained in:
julien huang 2023-09-02 20:29:35 +02:00
parent 4e05650cde
commit 263b5e0066

View File

@ -314,6 +314,17 @@ Now you can register server-only components with the `.server` suffix and use th
Server-only components use `<NuxtIsland>` under the hood, meaning that `lazy` prop and `#fallback` slot are both passed down to `<NuxtIsland>`.
#### server components and context
When rendering a server-only or island component, `<NuxtIsland>` makes a HTTP request to GET a `NuxtIslandResponse`.
This means:
- You can't access to the island context from your SSR app and you can't access to your SSR app context from the island component. Both are different context.
- A new Vue app will be created server-side to create the `NuxtIslandResponse`.
- Plugins will be ran for the island Vue app except those marked with `env.island: false` on an object plugin.
You can access to an island context during the island component rendering through `nuxtApp.ssrContext.islandContext`.
::alert{type=info}
Slots can be interactive and are wrapped within a `<div>` with `display: contents;`
::