安装ssr_三分钟开启你的 SSR 之旅

最新推荐文章于 2023-08-30 23:43:09 发布

weixin_39767887

最新推荐文章于 2023-08-30 23:43:09 发布

阅读量5.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_39767887/article/details/112714595

版权

SSR 的全称是 Server Side Rendering，对应的中文名是：服务器端渲染，顾名思义是将渲染的工作放在 Server 端进行。本文将简短的为您介绍如何在 Rax 项目中快速体验 SSR 带来的优化效果。

新建应用

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

$ npm init rax <YourProjectName>

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

选择项目类型为 app
勾选构建产物为 web
勾选 ssr

? What's your project name? rax-ssr-demo
? What's your project type? App (Build application that works multi-platform)
? Do you want to build to these targets? web
? Do you want to enable these features?
❯◉ server sider rendering (ssr)

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

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

已有应用

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

安装 SSR 插件

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

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

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

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

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

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

function Document(props) {
  const {
+  initialHtml,
+  initialData,
    publicPath,
	...
  } = props;

  return (
    <html>
	 ....
      <body>
        {/* root container */}
+       <div id="root" dangerouslySetInnerHTML={{ __html: initialHtml || '' }} />
+       <script data-from="server" dangerouslySetInnerHTML={{__html: 'window.__INITIAL_DATA__=' + initialData}} />
        {scripts.map((src) => <script src={`${publicPath}${src}`} />)}
      </body>
    </html>
  );
}