快速开始

优质

小牛编辑

141浏览

2023-12-01

新建应用

执行 npm init rax 命令，创建 Rax 应用：

$ npm init rax <YourProjectName>

并通过下面步骤，开启 SSR 能力：

选择项目类型为 app

勾选构建产物为 web

勾选 ssr

What's your project namerax-ssr-demo
What's your project typeApp (Build application that works multi-platform)
Do you want to build to these targetsweb
Do you want to enable these features?
❯◉ Server-side rendering (SSR)

完成依赖安装后，运行 npm start，即可在本地开始 SSR 项目的开发调试。

SSR 应用的工程结构遵循 Rax 通用的工程结构。

已有应用

如果是已有的 Web 应用，则可以按下面的方式，升级为 SSR 应用：

安装 SSR 插件

npm install build-plugin-rax-ssr --save-dev

添加 build-plugin-rax-ssr 插件到 build.json

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web"]
      }
    ],
+   "build-plugin-rax-ssr"
  ]
}

更新 app.json，增加 hydarte: true配置

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    }
  ],
  "historyType": "browser",
+ "hydrate": true,
  "window": {
    "defaultTitle": "Rax App 1.0"
  }
}

更新页面模板，用于保存 Server 端返回的初始 HTML 结构及数据

import { createElement } from 'rax';
+ import { Root, Data, Style, Script } from 'rax-document';

function Document() {
  return (
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"/>
        <title>ssr-demo</title>
        <Style />
      </head>
      <body>
        {/* root container */}
        <Root />
+       {/* initial data from server side */}
+        <Data />
        <Script />
      </body>
    </html>
  );
}
export default Document;