PreactJS/WMR 项目中的预渲染技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01149/article/details/148508218

PreactJS/WMR 项目中的预渲染技术详解

wmr 👩‍🚀 The tiny all-in-one development tool for modern web apps. 项目地址: https://gitcode.com/gh_mirrors/wm/wmr

什么是预渲染

预渲染是现代前端开发中一项重要的性能优化技术。简单来说，它是在构建阶段就将应用转换为静态HTML文件的过程。当用户访问网站时，服务器可以直接发送这些预先生成的HTML文件，而不是等待浏览器下载并执行JavaScript后才显示内容。

在PreactJS/WMR项目中，预渲染的实现具有以下特点：

框架无关性：虽然与Preact深度集成，但理论上支持任何前端框架
即时内容展示：用户无需等待脚本加载就能看到页面内容
更好的SEO：搜索引擎爬虫可以直接解析静态HTML内容

如何启用预渲染

在PreactJS/WMR项目中启用预渲染非常简单，只需在构建命令中添加--prerender参数：

wmr build --prerender

执行此命令后，WMR会寻找并执行项目中特定的预渲染函数来生成静态HTML。

预渲染函数详解

WMR会查找主HTML文件中第一个<script>标签内导出的prerender函数。这个函数是预渲染的核心，它需要返回一个包含HTML内容和其他元数据的对象。

一个基础的预渲染函数结构如下：

export async function prerender(data) {
  // 生成HTML内容
  const html = `<h1>欢迎来到我的网站</h1>`;
  
  return {
    html,  // 生成的HTML内容
    links: new Set(['/about', '/contact']),  // 需要预渲染的其他路由
    head: {
      lang: 'zh-CN',  // 页面语言
      title: '我的酷炫网站',  // 页面标题
      elements: new Set([  // 需要注入<head>的元素
        { type: 'link', props: { rel: 'stylesheet', href: 'styles.css' } },
        { type: 'meta', props: { property: 'og:title', content: '社交媒体标题' } }
      ])
    }
  };
}

路由信息获取

预渲染函数会接收一个包含当前路由信息的对象参数：

interface PrerenderData {
  ssr: boolean;  // 预渲染时始终为true
  url: string;   // 当前正在预渲染的URL
}

这个参数对于动态生成不同路由的内容非常有用。

Preact应用的最佳实践

对于使用Preact框架的应用，推荐结合以下两个工具进行预渲染：

preact-iso：负责将Preact组件渲染为HTML字符串
hoofd：管理文档头部信息（如title、meta等）

典型实现如下：

import { prerender as render } from 'preact-iso';
import { toStatic } from 'hoofd/preact';
import { App } from './App';

export async function prerender(data) {
  // 使用preact-iso渲染应用
  const result = await render(<App {...data} />);
  
  // 使用hoofd收集头部信息
  const head = toStatic();
  const elements = new Set([
    ...head.links.map(props => ({ type: 'link', props })),
    ...head.metas.map(props => ({ type: 'meta', props })),
    ...head.scripts.map(props => ({ type: 'script', props }))
  ]);
  
  return {
    ...result,
    head: {
      lang: head.lang,
      title: head.title,
      elements
    }
  };
}

技术细节：preact-iso会自动扫描应用中的所有链接，并将它们传递给WMR进行后续预渲染，无需手动指定需要预渲染的URL。