Back to Details

funstack-static-knowledge

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

FUNSTACK Static Knowledge

FUNSTACK Static 相关知识

FUNSTACK Static (
@funstack/static
) is a React framework designed to build SPA application that can be deployed as static files to any static hosting service. Its prominent features is support for React Server Components (RSC) which allows optimizing the performance of the application by rendering parts of the UI at build time.
Note that FUNSTACK Static never runs on the server at runtime (except during development). Server Components are rendered at build time into RSC payloads which are then shipped to the client. The client React runtime can then seamlessly render both Client and Server Components into the DOM.
FUNSTACK Static（
@funstack/static
）是一个React框架，用于构建可部署为静态文件到任意静态托管服务的SPA应用。其突出特性是支持React Server Components（RSC），能够通过在构建时渲染部分UI来优化应用性能。
请注意，FUNSTACK Static在运行时绝不会在服务器上运行（开发阶段除外）。Server Components会在构建时渲染为RSC负载，然后发送到客户端。客户端的React运行时可以无缝地将Client Components和Server Components都渲染到DOM中。

FUNSTACK Static Entrypoint

FUNSTACK Static 入口配置

FUNSTACk Static is served as a Vite plugin. See your app's 
vite.config.ts
file for the current configuration. A typical configuration looks like this:
ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { funstackStatic } from "@funstack/static";

export default defineConfig({
  plugins: [
    react(),
    funstackStatic({
      root: "./src/Root.tsx",
      app: "./src/App.tsx",
    }),
  ],
});
Entrypoint. Here, the 
root
option points to the Root component of your application which is responsible for the HTML shell of your application. The 
app
option points to the main App component which is the entrypoint for your application's UI.
Server and Client Components. The entrypoint components (Root and App) are server components. FUNSTACK Static follows React's conventions for Server and Client Components; the entrypoint is executed as a Server module. Modules marked with the 
"use client"
directive are executed as Client modules. Server modules can import both Server and Client modules, while Client modules can only import other Client modules.
Server Actions. Note that Server Actions (
"use server"
) are NOT supported in FUNSTACK Static, as there is no server runtime deployed.
FUNSTACK Static以Vite插件的形式提供。查看你应用中的
vite.config.ts
文件即可看到当前配置。典型配置如下：
ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { funstackStatic } from "@funstack/static";

export default defineConfig({
  plugins: [
    react(),
    funstackStatic({
      root: "./src/Root.tsx",
      app: "./src/App.tsx",
    }),
  ],
});
入口文件：这里的
root
选项指向应用的Root组件，它负责应用的HTML外壳。
app
选项指向主App组件，这是应用UI的入口。
Server与Client组件：入口组件（Root和App）是Server组件。FUNSTACK Static遵循React关于Server和Client组件的约定：入口作为Server模块执行。标记有
"use client"
指令的模块作为Client模块执行。Server模块可以导入Server和Client模块，而Client模块只能导入其他Client模块。
Server Actions：请注意，FUNSTACK Static不支持Server Actions（
"use server"
），因为它没有部署服务器运行时。

FUNSTACK Static Docs

FUNSTACK Static 文档

More detailed documentation about FUNSTACK Static (including API references and best practices) can be found inside 
node_modules
at:
node_modules/@funstack/static/dist/docs/index.md
关于FUNSTACK Static的更详细文档（包括API参考和最佳实践）可以在
node_modules
目录下的以下路径找到：
node_modules/@funstack/static/dist/docs/index.md