Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 3 additions & 32 deletions packages/document/docs/en/guides/basic-features/render/ssg.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,12 @@ export default defineConfig({
});
```

::::info Scope
:::info
- Use `output.ssg` for single-entry apps.
- Use `output.ssgByEntries` for multi-entry apps.
- If `output.ssg` is `true` and `output.ssgByEntries` is not set, all routes under all entries are treated as SSG routes.
::::

:::

## Development Debugging

Expand Down Expand Up @@ -92,36 +93,6 @@ Each route in **conventional routing** will generate a separate HTML file. Check

After running `pnpm run serve` to start the project, inspect the returned document in the Network tab of the browser's development tools. The document includes the fully rendered content from the component.

### Preventing Default Behavior

By default, all routes in **conventional routing** have SSG enabled. Modern.js provides another field to prevent the default SSG behavior.

For example, in the following directory structure, routes `/`, `/user`, and `/user/profile` all have SSG enabled:

```bash
.
├── src
│ └── routes
│ ├── layout.tsx
│ ├── page.tsx
│ └── user
│ ├── layout.tsx
│ ├── page.tsx
│ └── profile
│ └── page.tsx
```

You can disable the default behavior of certain routes by configuring `preventDefault`. After configuring as shown below, only the SSG pages for `/` and `/user/profile` will be generated:

```js
export default defineConfig({
output: {
ssg: {
preventDefault: ['/user'],
},
},
});
```

## Using SSG in Manual Routing

Expand Down
13 changes: 7 additions & 6 deletions packages/document/docs/en/guides/concept/entries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -193,10 +193,15 @@ If you don't want to use any of Modern.js's runtime capabilities, you can also m

```js title=src/entry.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const container = document.getElementById('root');

if (container) {
const root = createRoot(container);
root.render(<App />);
}
```

In this mode, **you will not be able to use Modern.js framework's runtime capabilities**, such as:
Expand Down Expand Up @@ -237,10 +242,6 @@ export default defineConfig({
});
```

It is worth noting that, by default, Modern.js considers entries specified through the configuration as **framework mode entries** and will automatically generate the actual compilation entry.

If your application is migrating from build tools like Webpack or Vite to the Modern.js framework, you typically need to enable the `disableMount` option in the entry configuration. In this case, Modern.js will treat the entry as a **build mode entry**.

## In-Depth

The concept of page entry is derived from the concept of [Entrypoint](https://webpack.js.org/concepts/entry-points/) in webpack. It is mainly used to configure JavaScript or other modules to be executed during application startup. webpack's [best practice](https://webpack.docschina.org/concepts/entry-points/#multi-page-application) for web applications usually corresponds entries to HTML output files, meaning each additional entry will eventually generate a corresponding HTML file in the output. The modules imported by the entry will be compiled and packaged into multiple Chunk outputs. For example, JavaScript modules may ultimately generate several file outputs similar to `dist/static/js/index.ea39u8.js`.
Expand Down
7 changes: 6 additions & 1 deletion packages/document/docs/zh/guides/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,5 +29,10 @@
"name": "troubleshooting",
"label": "troubleshooting"
},
"deprecated"
"deprecated",
{
"type": "dir",
"name": "upgrade",
"label": "从 Modern.js 2.0 升级"
}
]
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ interface CacheOptions {
## 使用范围

与 react 的 [cache](https://react.dev/reference/react/cache) 函数只能在 server component 组件中使用不同,
EdenX 提供的 `cache` 函数可以在任意的前端或服务端的代码中使用。
Modern.js 提供的 `cache` 函数可以在任意的前端或服务端的代码中使用。

## 详细用法

Expand Down
35 changes: 3 additions & 32 deletions packages/document/docs/zh/guides/basic-features/render/ssg.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,12 @@ export default defineConfig({
});
```

::::info 适用范围
:::info 适用范围
- 单入口请使用 `output.ssg`。
- 多入口请使用 `output.ssgByEntries`。
- 当仅设置 `output.ssg: true` 且未配置 `output.ssgByEntries` 时,所有入口下的所有路由都会作为 SSG 路由处理。
::::

:::

## 开发环境调试

Expand Down Expand Up @@ -93,36 +94,6 @@ export default () => {

执行 `pnpm run serve` 启动项目后,访问页面,在浏览器我们工具的 Network 窗口,查看请求返回的文档,文档包含组件渲染后的完整页面内容。

### 阻止默认行为

默认情况下,**约定式路由**的路由会全部开启 SSG。Modern.js 提供了另一个字段,用来阻止默认的 SSG 行为。

例如以下目录结构,`/`、`/user`、`/user/profle` 三条路由都开启 SSG:

```bash
.
├── src
│ └── routes
│ ├── layout.tsx
│ ├── page.tsx
│ └── user
│ ├── layout.tsx
│ ├── page.tsx
│ └── profile
│ └── page.tsx
```

可以通过配置 `preventDefault` 来禁用某些路由的默认行为。进行下面配置后,最终只会生成 `/`、`/user/profle` 两条路由的 SSG 页面:

```js
export default defineConfig({
output: {
ssg: {
preventDefault: ['/user'],
},
},
});
```

## 在自控式路由中使用

Expand Down
12 changes: 8 additions & 4 deletions packages/document/docs/zh/guides/concept/entries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -196,12 +196,18 @@ beforeRender().then(() => {

```js title=src/entry.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const container = document.getElementById('root');

if (container) {
const root = createRoot(container);
root.render(<App />);
}
```


在该模式下,**将无法使用 Modern.js 框架的运行时能力**,比如:

- 约定式路由,即基于 `src/routes` 下文件的路由
Expand Down Expand Up @@ -241,8 +247,6 @@ export default defineConfig({
});
```

值得注意的是,默认情况下,Modern.js 认为通过配置指定的入口是**框架模式入口**,将自动生成真正的编译入口。如果你的应用是从 Webpack 或 Vite 等构建工具迁移到 Modern.js 框架时,你通常需要在入口配置中开启 `disableMount` 选项,此时 Modern.js 认为该入口是**构建模式入口**。

## 深入了解

页面入口的概念衍生自 webpack 的入口(Entrypoint)概念,其主要用于配置 JavaScript 或其他模块在应用启动时加载和执行。webpack 对于网页应用的 [最佳实践](https://webpack.docschina.org/concepts/entry-points/#multi-page-application) 通常将入口与 HTML 产物对应,即每增加一个入口最终就会在产物中生成一份对应的 HTML 文件。入口引入的模块会在编译打包后生成多个 Chunk 产物,例如对于 JavaScript 模块最终可能会生成数个类似 `dist/static/js/index.ea39u8.js` 的文件产物。
Expand Down
1 change: 1 addition & 0 deletions packages/document/docs/zh/guides/upgrade/_meta.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
["overview", "config", "entry"]
Loading