File tree 1 file changed +48
-0
lines changed
1 file changed +48
-0
lines changed Original file line number Diff line number Diff line change
1
+ ---
2
+ title : Nuxt 3 内置组件 NuxtIsland
3
+ slug : intro-nuxt-island-component
4
+ tags :
5
+ - nuxt
6
+ - island
7
+ update_time : 2023/10/15 23:18:16
8
+ create_time : 2023/10/15 13:15:37
9
+
10
+ ---
11
+
12
+
13
+ 本文可以关联
14
+ -[[ Nuxt components 文件夹背后的设计]]
15
+
16
+ 详细很多人看到这个组件的名字,会立刻意识到,“喔,nuxt 也有这个呀”,会感到有用。因为能从 ` island ` 这个词类比想到 ` astro ` 提出的 island 架构。
17
+
18
+
19
+
20
+ ## 背景
21
+
22
+ island 架构,是 astro 框架最鲜明的技术观点。通过对页面的不同区域进行区分,形成独立的岛屿,有的岛屿是静态的数据,有的岛屿是动态变化的内容。
23
+
24
+ 比如对于一个博客来说顶部或者左侧的菜单和导航是相对静态的。中间的主体内容是相对动态的。这种情况,相对静态的内容同样需要经历 ssr + 水合,是不划算的。直接走 zero js,输出静态内容即可。
25
+
26
+ ## 基础概念
27
+
28
+ 回到 NuxtIsland 组件,这个组件会在服务端渲染,渲染的结果是静态的 html 下发给客户端浏览器,所以不会下载 js。改变组件的 props 会重新刷新组件。
29
+
30
+ 显然:和 ClientOnly 是互斥的。
31
+
32
+ 截止 2023年10月15日依然是实验性的,需要到 ` nuxt.conf ` 里开启 ` experimental.componentIslands=true `
33
+
34
+ 需要传递几个prop
35
+
36
+ | Name | Type | Required | Default | Description |
37
+ | ------ | ------------------- | -------- | ------- | ------------------------------------------- |
38
+ | name | string | true | - | Name of the component to render. |
39
+ | type | string | - | - | Type of the component. |
40
+ | lazy | boolean | - | false | Make the component non-blocking. |
41
+ | props | Record<string, any> | - | - | Props to send to the component to render. |
42
+ | source | string | - | - | Remote source to call the island to render. |
43
+
44
+ slots ` #fallback ` 是兜底内容
45
+
46
+ ## 实践
47
+
48
+ 待补充... 补充一些截图
You can’t perform that action at this time.
0 commit comments