Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(zh-cn): Add client-prerender.mdx #10713

Merged
merged 7 commits into from
Jan 17, 2025
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
title: 实验性客户端预渲染
sidebar:
label: 客户端预渲染
i18nReady: true
---

import Since from '~/components/Since.astro'

<p>

**类型:** `boolean`<br />
**默认值:** `false`<br />
<Since v="4.2.0" />
</p>

在支持的浏览器中,对客户端上的预获取(prefetch)页面启用预渲染。

该功能使用了实验性的 [推测规则 web API](https://developer.mozilla.org/zh-CN/docs/Web/API/Speculation_Rules_API) 并全局增强了默认的 `prefetch` 行为来预渲染客户端上的链接。
在启用该功能之前,你可能需要考虑一下 [在客户端上进行预渲染的风险](https://developer.mozilla.org/zh-CN/docs/Web/API/Speculation_Rules_API#不安全的预取)。

在 `astro.config.mjs` 中启用客户端预渲染以及任何所需的 `prefetch` 配置选项:

```js
// astro.config.mjs
{
prefetch: {
prefetchAll: true,
defaultStrategy: 'viewport',
},
experimental: {
clientPrerender: true,
},
}
```

然后在网站上的任意 `<a />` 链接上使用 `data-astro-prefetch` 属性来选用预获取。不是将 `<link>` 标签附加到页面的 head 部分或使用 JavaScript 来获取页面,而是使用 `<script>` 标签附加相应的推测规则。
Nin3lee marked this conversation as resolved.
Show resolved Hide resolved

客户端预渲染需要浏览器的支持。如果推测规则 API 不被支持,那么 `prefetch` 将会回退到支持的策略。

有关 `prefetch` 的更多选项和使用方法,请参阅 [预获取指南](/zh-cn/guides/prefetch/)。
Loading