columbiaroadcom/wp-ssr

WordPress SSR

简易服务端渲染方案

本应用旨在解决WordPress模板内JavaScript应用的服务端渲染问题，分为两部分运行：一是WordPress插件，用于创建渲染类型的帖子和REST API端点以获取渲染对象数组；二是Express服务器，访问时会获取这些渲染对象并启动Puppeteer渲染页面，解析页面中的应用部分后将HTML通过REST API保存回帖子。

免责声明

本应用不提供实时服务端渲染，但适用于提升内容的SEO可访问性。Puppeteer始终以未认证用户身份渲染页面，且状态变化需通过URL反映。

配置说明

WordPress端

1. 导航至插件设置页面，填写必要信息：
   • 提供用于REST API认证的API密钥；
   • 输入Node应用的URL（用于触发渲染）；
   • 定义渲染过期的时间间隔。
2. 在WordPress模板中，需在header初始化前请求渲染内容。使用WPSSR\Render::render方法，参数包括：
   • $url：请求渲染的页面URL；
   • $app_selector：应用根元素的查询选择器；
   • $waitfor_selector：Puppeteer等待渲染的查询选择器。

示例代码：

php
<?php
/**
 * Template Name: React Application
 *
 */

$content = WPSSR\Render::render(
  get_permalink(),
  '#react-app-root', // 应用选择器
  '#react-app-inner' // 等待选择器
);

get_header();
?>

<div id="react-app-root">
  <?php echo $content; ?>
</div>

<?php get_footer(); ?>

Node应用端

启动Node应用需配置以下环境变量：

• WP_DOMAIN：指向WordPress安装的根域名；
• API_KEY：与WordPress插件设置中相同的API密钥。

Docker部署示例：

bash
docker run -d \
  -e "WP_DOMAIN=https://example.com" \
  -e "API_KEY=my-api-key" \
  -p 80:3000 \
  --restart=unless-stopped \
  --name=wpssr \
  columbiaroadcom/wp-ssr

待办事项

• 为Node应用添加.env文件支持；
• 优化大量渲染场景的性能；
• 锁定渲染过程以防止同时多次渲染请求。