@modern-js/main-doc 2.69.6 → 2.70.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -28,5 +28,5 @@ Both nvm and fnm are Node.js version management tools. Relatively speaking, nvm
28
28
  Additionally, after installing nvm or fnm, when there is a `.nvmrc` file containing `lts/jod` in the repository's root directory, the system will automatically install or switch to the correct Node.js version upon entering the repository.
29
29
 
30
30
  :::warning
31
- Modern.js currently still supports Node 16, but will officially terminate support for Node.js 16 in June 2025. To ensure a smooth transition for your project, please complete the Node.js version upgrade before June 2025.
31
+ Modern.js officially terminated support for Node.js 16 in June 2025. If you are still using Node.js 16, please upgrade to Node.js 18 or higher as soon as possible to ensure your project runs normally and to receive the latest features and security updates.
32
32
  :::
@@ -212,13 +212,30 @@ function ErrorElement() {
212
212
  }
213
213
  ```
214
214
 
215
- ## Waiting for All Content to Load for Crawlers
215
+ ## Controlling When to Wait for Full HTML
216
216
 
217
- Streaming can enhance user experience by allowing users to perceive content as it becomes available.
217
+ Streaming improves perceived speed, but in some cases (SEO crawlers, A/B buckets, compliance pages) you may want to wait for all content before sending the response.
218
218
 
219
- However, when a crawler visits the page, it might need to load all content and output the entire HTML at once, rather than progressively loading it.
219
+ Modern.js decides the streaming mode with this priority:
220
220
 
221
- Modern.js uses [isbot](https://www.npmjs.com/package/isbot) to determine if a request is from a crawler based on the `user-agent` header.
221
+ 1. Request header `x-should-stream-all` (set per-request in middleware).
222
+ 2. Env `MODERN_JS_STREAM_TO_STRING` (forces full HTML).
223
+ 3. [isbot](https://www.npmjs.com/package/isbot) check on `user-agent` (bots get full HTML).
224
+ 4. Default: stream shell first.
225
+
226
+ Set the header in your middleware to choose the behavior dynamically:
227
+
228
+ ```ts title="middleware example"
229
+ export const middleware = async (ctx, next) => {
230
+ const ua = ctx.req.header('user-agent') || '';
231
+ const shouldWaitAll = /Lighthouse|Googlebot/i.test(ua) || ctx.req.path === '/marketing';
232
+
233
+ // Write a boolean string: true -> onAllReady, false -> onShellReady
234
+ ctx.req.headers.set('x-should-stream-all', String(shouldWaitAll));
235
+
236
+ await next();
237
+ };
238
+ ```
222
239
 
223
240
  import StreamSSRPerformance from '@site-docs-en/components/stream-ssr-performance';
224
241
 
@@ -28,5 +28,5 @@ nvm 和 fnm 都是 Node.js 版本管理工具。相对来说,nvm 较为成熟
28
28
  此外,在安装 nvm 或 fnm 后,然后只要仓库根目录下有内容为 `lts/jod` 的 `.nvmrc` 文件,进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
29
29
 
30
30
  :::warning
31
- Modern.js 目前仍支持 Node 16,但会在 2025 年 6 月正式终止对 Node.js 16 的支持,为确保您的项目顺利过渡,请在 2025 6 月前完成 Node.js 版本升级。
31
+ Modern.js 已于 2025 年 6 月正式终止对 Node.js 16 的支持。如果你仍在使用 Node.js 16,请尽快升级到 Node.js 18 或更高版本,以确保项目正常运行并获取最新的功能和安全更新。
32
32
  :::
@@ -218,14 +218,30 @@ function ErrorElement() {
218
218
  }
219
219
  ```
220
220
 
221
- ## 为爬虫等待所有内容加载完毕
221
+ ## 控制是否等待全部内容再输出
222
222
 
223
- 流式传输可以提高用户体验,因为当页面内容可用时,用户可以及时感知到它们。
223
+ 流式传输可以提高用户体验,因为当页面内容可用时,用户可以及时感知到它们。但在部分场景下(例如 SEO 爬虫、特定 AB 实验或合规页面)希望等所有内容完成后再一次性输出。
224
224
 
225
- 然而,当一个爬虫访问该页面时,它可能需要先加载所有内容,直接输出整个 HTML,而不是渐进式地加载它。
225
+ Modern.js 默认行为的判定优先级为:
226
226
 
227
- Modern.js 使用 [isbot](https://www.npmjs.com/package/isbot) 对请求的 `uesr-agent`,以判断请求是否来自爬虫。
227
+ 1. 请求头 `x-should-stream-all`(中间件可写)。
228
+ 2. 环境变量 `MODERN_JS_STREAM_TO_STRING`(强制全量)。
229
+ 3. [isbot](https://www.npmjs.com/package/isbot) 检测 `user-agent`(爬虫全量)。
230
+ 4. 默认流式(先 shell 后内容)。
228
231
 
232
+ 你可以在自定义中间件里按请求动态写入标记,控制是否等待全部内容:
233
+
234
+ ```ts title="middleware 示例"
235
+ export const middleware = async (ctx, next) => {
236
+ const ua = ctx.req.header('user-agent') || '';
237
+ const shouldWaitAll = /Lighthouse|Googlebot/i.test(ua) || ctx.req.path === '/marketing';
238
+
239
+ // 写入布尔值字符串,true 表示使用 onAllReady,false 表示使用 onShellReady
240
+ ctx.req.headers.set('x-should-stream-all', String(shouldWaitAll));
241
+
242
+ await next();
243
+ };
244
+ ```
229
245
 
230
246
  import StreamSSRPerformance from '@site-docs/components/stream-ssr-performance';
231
247
 
package/package.json CHANGED
@@ -15,14 +15,14 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.69.6",
18
+ "version": "2.70.0",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
21
  "access": "public"
22
22
  },
23
23
  "dependencies": {
24
24
  "mermaid": "^11.4.1",
25
- "@modern-js/sandpack-react": "2.69.6"
25
+ "@modern-js/sandpack-react": "2.70.0"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@rsbuild/plugin-sass": "1.4.0",