Document

优质

小牛编辑

127浏览

2023-12-01

在 Rax 的 Web 应用中，Document 对应页面的 HTML 模板，使用 JSX 语法来描述，可以将其看做普通的 Rax 组件。

默认的 Document 位于 src/doucment/index.jsx 目录，内容如下：

import { createElement } from 'rax';
import { Root, 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>document-web</title>
        <Style />
      </head>
      <body>
        {/* root container */}
        <Root />
        <Script />
      </body>
    </html>
  );
}
export default Document;

这些组件的对应关系为

Root 页面根节点，id 为 root

Style 页面的样式资源，由工程插件自动分析页面依赖产出

Script页面的 JS 资源，由工程插件自动分析页面依赖产出

SSR 场景下，Document 和普通 Web 场景略有不同：

Root 中将返回页面的初始 HTML 内容

相比普通 Web 应用多了 Data 组件，用于输出页面的初始数据

可以借助于静态方法 getInitialProps ，为 Document 定义的数据请求，示例如下：

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

function Document(props) {
  const {
    userAgent
  } = props;
  
  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>document-ssr</title>
        <Style />
      </head>
      <body>
		<div>Your user agent: {userAgent}</div>
        {/* root container */}
        <Root />
        {/* initial data from server side */}
        <Data />
        <Script />
      </body>
    </html>
  );
}

// SSR 场景下自定义数据源
Document.getInitialProps = (req, res) => {
  const userAgent = req req.headers['user-agent'] : navigator.userAgent;
  return { userAgent };
};

export default Document;

如果是上一个版本的 Document，则可以参考这份升级指南进行升级。