Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-12-02 10:27:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
julien huang 2023-09-02 20:29:35 +02:00
parent 4e05650cde
commit 263b5e0066
1 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/2.guide/2.directory-structure/1.components.md
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-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} ::alert{type=info}
Slots can be interactive and are wrapped within a `<div>` with `display: contents;` Slots can be interactive and are wrapped within a `<div>` with `display: contents;`
:: ::