From 263b5e006618b1685c8a58f0efc6ce7c0d79574f Mon Sep 17 00:00:00 2001 From: julien huang Date: Sat, 2 Sep 2023 20:29:35 +0200 Subject: [PATCH 1/4] docs(guide): add information for context difference between server conly component and app context --- docs/2.guide/2.directory-structure/1.components.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md index 70fab5e8c877..7bc83d5736b9 100644 --- a/docs/2.guide/2.directory-structure/1.components.md +++ b/docs/2.guide/2.directory-structure/1.components.md @@ -314,6 +314,17 @@ 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 components and context + +When rendering a server-only or island component, `` 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 `
` with `display: contents;` :: From 6b34fd83a80a20c11006aa36c6403328d285beb9 Mon Sep 17 00:00:00 2001 From: julien huang Date: Sat, 2 Sep 2023 20:31:40 +0200 Subject: [PATCH 2/4] docs: explain better ? --- docs/2.guide/2.directory-structure/1.components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md index 7bc83d5736b9..5c10a3a8813a 100644 --- a/docs/2.guide/2.directory-structure/1.components.md +++ b/docs/2.guide/2.directory-structure/1.components.md @@ -319,11 +319,11 @@ Server-only components use `` under the hood, meaning that `lazy` pr When rendering a server-only or island component, `` 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`. +- You can't access to the island app context from your SSR app and you can't access to your SSR app context from the island component. Both are different context. - 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`. +You can access to an island context within an island component through `nuxtApp.ssrContext.islandContext`. ::alert{type=info} Slots can be interactive and are wrapped within a `
` with `display: contents;` From 007eceb97fac0cdb75d6d0d6d6642f0542494eac Mon Sep 17 00:00:00 2001 From: julien huang Date: Sat, 2 Sep 2023 20:34:14 +0200 Subject: [PATCH 3/4] docs: missing s --- docs/2.guide/2.directory-structure/1.components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md index 5c10a3a8813a..a48848bc6558 100644 --- a/docs/2.guide/2.directory-structure/1.components.md +++ b/docs/2.guide/2.directory-structure/1.components.md @@ -321,7 +321,7 @@ When rendering a server-only or island component, `` makes a HTTP re This means: - A new Vue app will be created server-side to create the `NuxtIslandResponse`. - You can't access to the island app context from your SSR app and you can't access to your SSR app context from the island component. Both are different context. -- Plugins will be ran for the island Vue app except those marked with `env.island: false` on an object plugin. +- Plugins will be ran for the island Vue app except those marked with `env.islands: false` on an object plugin. You can access to an island context within an island component through `nuxtApp.ssrContext.islandContext`. From 95906473beafb4aebbb74a83c236b88db0a976e8 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 5 Sep 2023 11:28:05 +0100 Subject: [PATCH 4/4] docs: some small updates --- docs/2.guide/2.directory-structure/1.components.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md index a48848bc6558..fcabd10a687d 100644 --- a/docs/2.guide/2.directory-structure/1.components.md +++ b/docs/2.guide/2.directory-structure/1.components.md @@ -314,16 +314,18 @@ 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 components and context +#### Server Component Context -When rendering a server-only or island component, `` makes a HTTP request to GET a `NuxtIslandResponse`. +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`. -- You can't access to the island app context from your SSR app and you can't access to your SSR app context from the island component. Both are different context. -- Plugins will be ran for the island Vue app except those marked with `env.islands: false` on an object plugin. +- 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). -You can access to an island context within an island component through `nuxtApp.ssrContext.islandContext`. +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;`