From 5390ca43212656b7f169153024f9b19bcd10ec25 Mon Sep 17 00:00:00 2001 From: Julien Huang Date: Tue, 5 Sep 2023 12:29:28 +0200 Subject: [PATCH] docs: add information about server component context (#22964) --- docs/2.guide/2.directory-structure/1.components.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md index 70fab5e8c8..fcabd10a68 100644 --- a/docs/2.guide/2.directory-structure/1.components.md +++ b/docs/2.guide/2.directory-structure/1.components.md @@ -314,6 +314,19 @@ Now you can register server-only components with the `.server` suffix and use th Server-only components use `` under the hood, meaning that `lazy` prop and `#fallback` slot are both passed down to ``. +#### Server Component Context + +When rendering a server-only or island component, `` makes a fetch request which comes back with a `NuxtIslandResponse`. (This is an internal request if rendered on the server, or a request that you can see in the network tab if it's rendering on client-side navigation.) + +This means: + +- A new Vue app will be created server-side to create the `NuxtIslandResponse`. +- A new 'island context' will be created while rendering the component. +- 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. +- Your plugins will run again when rendering the island, unless they have `env: { islands: false }` set (which you can do in an object-syntax plugin). + +Within an island component, you can access its island context through `nuxtApp.ssrContext.islandContext`. Note that while island components are still marked as experimental, the format of this context may change. + ::alert{type=info} Slots can be interactive and are wrapped within a `
` with `display: contents;` ::