推荐使用：HTMLDocument - 你的全栈React文档渲染利器！

推荐使用：HTMLDocument - 你的全栈React文档渲染利器！

项目介绍

HTMLDocument 是一个基于 React 的基础组件，专门用于在服务器端渲染完整的HTML文档。它摒弃了传统模板和静态文件，提供了简洁的API，使你能在React中轻松创建包含标题、元信息、样式表以及脚本的完整HTML页面。

此项目由 Venmo 团队维护，并已在多个生产项目中使用。如果你想要利用React来构建服务器端渲染的应用，或者希望在客户端与服务器间共享状态以实现应用的快速启动，那么 HTMLDocument 绝对值得你拥有！

项目技术分析

HTMLDocument 具有以下主要特性：

1. 提供简单的API来渲染常见的HTML标签如title、meta、样式和脚本。
2. 支持服务器状态序列化，便于在客户端重新挂载应用时同步数据。
3. 支持静态和非静态页面的处理。

安装稳定版本非常简单，只需一条命令：

npm install --save react-html-document

项目及技术应用场景

HTMLDocument 可广泛应用于各种Web项目场景，例如：

• 创建静态网页，同时保持React的灵活性。
• 在SSR（Server-Side Rendering）环境中构建SEO友好的页面。
• 需要在服务器和客户端之间传递和共享状态的应用。
• 希望统一管理前端资源，如CSS和JavaScript文件。

通过以下示例，你可以了解如何使用 HTMLDocument。

示例1：基本静态页

import HTMLDocument from 'react-html-document';
import ReactDOMServer from 'react-dom/server';

const doc = (
  <HTMLDocument title="我的页面">
    <h1>你好，世界！</h1>
  </HTMLDocument>
);
ReactDOMServer.renderToStaticMarkup(doc);

示例2：带有脚本、样式和元信息的静态页

import HTMLDocument from 'react-html-document';
import ReactDOMServer from 'react-dom/server';

const doc = (
  <HTMLDocument
    title="我的页面"
    scripts={['/scripts/main.js']}
    stylesheets={['/styles/styles.css']}
    metatags={[
      { name: 'description', content: '我的描述' }
    ]} >
    <div>我的应用</div>
  </HTMLDocument>
  );
ReactDOMServer.renderToStaticMarkup(doc);

示例3：使用通用状态

import HTMLDocument from 'react-html-document';
import ReactDOMServer from 'react-dom/server';

const state = { user: "X" };
const doc = (
  <HTMLDocument
    title="带通用状态的页面"
    universalState={state}>
  </HTMLDocument>
);
ReactDOMServer.renderToStaticMarkup(doc);

此外，还有辅助函数 getUniversalState 可用于从客户端获取这个通用状态。

项目特点

• 灵活的API：HTMLDocument提供了一个便捷的接口，可以方便地设置页面标题、元标签、链接的样式表和脚本文件等。
• 状态管理：支持将服务器端的状态序列化到页面中，便于客户端应用进行状态恢复。
• 跨平台友好：无论是在服务器还是客户端，HTMLDocument都能很好地工作。
• 易于集成：作为一个React组件，HTMLDocument可无缝集成进现有的React应用程序。

HTMLDocument 等待你的探索，无论是新手还是经验丰富的开发者，都将从中受益。立即尝试并加入我们的社区，一起打造更出色的Web应用吧！

开发者指南

查看 package.json 文件获取更多npm脚本，如启动开发服务器(npm run dev)、运行测试(npm test)、代码编译(npm run build) 和 ESLint 格式检查 (npm run lint)。

贡献指南

欢迎提交PR，从你的fork分支合并到master分支。请确保遵守 eslint linter 以及 airbnb配置 规则。当合适的时候，请进行rebasing和squashing。

版本控制

遵循 语义化版本 控制。

许可证

本项目遵循 MIT 许可证。