Skip to content

Commit 0ce3c3f

Browse files
committed
robot: update by obsidian
1 parent eb32bf0 commit 0ce3c3f

File tree

1 file changed

+48
-0
lines changed

1 file changed

+48
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
待补充... 补充一些截图

0 commit comments

Comments
 (0)