From 0ce3c3f5686b63773c0f908fecf61d132ff7718b Mon Sep 17 00:00:00 2001 From: Otto Date: Sun, 15 Oct 2023 10:18:19 -0500 Subject: [PATCH] robot: update by obsidian --- ...256\347\273\204\344\273\266 NuxtIsland.md" | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 "content/blogs/Nuxt 3 \345\206\205\347\275\256\347\273\204\344\273\266 NuxtIsland.md" diff --git "a/content/blogs/Nuxt 3 \345\206\205\347\275\256\347\273\204\344\273\266 NuxtIsland.md" "b/content/blogs/Nuxt 3 \345\206\205\347\275\256\347\273\204\344\273\266 NuxtIsland.md" new file mode 100644 index 0000000..0dfa793 --- /dev/null +++ "b/content/blogs/Nuxt 3 \345\206\205\347\275\256\347\273\204\344\273\266 NuxtIsland.md" @@ -0,0 +1,48 @@ +--- +title: Nuxt 3 内置组件 NuxtIsland +slug: intro-nuxt-island-component +tags: + - nuxt + - island +update_time: 2023/10/15 23:18:16 +create_time: 2023/10/15 13:15:37 + +--- + + +本文可以关联 +-[[Nuxt components 文件夹背后的设计]] + +详细很多人看到这个组件的名字，会立刻意识到，“喔，nuxt 也有这个呀”，会感到有用。因为能从 `island` 这个词类比想到 `astro` 提出的 island 架构。 + + + +## 背景 + +island 架构，是 astro 框架最鲜明的技术观点。通过对页面的不同区域进行区分，形成独立的岛屿，有的岛屿是静态的数据，有的岛屿是动态变化的内容。 + +比如对于一个博客来说顶部或者左侧的菜单和导航是相对静态的。中间的主体内容是相对动态的。这种情况，相对静态的内容同样需要经历 ssr + 水合，是不划算的。直接走 zero js，输出静态内容即可。 + +## 基础概念 + +回到 NuxtIsland 组件，这个组件会在服务端渲染，渲染的结果是静态的 html 下发给客户端浏览器，所以不会下载 js。改变组件的 props 会重新刷新组件。 + +显然：和 ClientOnly 是互斥的。 + +截止 2023年10月15日依然是实验性的，需要到 `nuxt.conf` 里开启 `experimental.componentIslands=true` + +需要传递几个prop + +| Name | Type | Required | Default | Description | +| ------ | ------------------- | -------- | ------- | ------------------------------------------- | +| name | string | true | - | Name of the component to render. | +| type | string | - | - | Type of the component. | +| lazy | boolean | - | false | Make the component non-blocking. | +| props | Record | - | - | Props to send to the component to render. | +| source | string | - | - | Remote source to call the island to render. | + +slots `#fallback` 是兜底内容 + +## 实践 + +待补充... 补充一些截图 \ No newline at end of file