README

穷人的服务器端渲染

此应用程序旨在解决WordPress模板中JavaScript应用的服务器端渲染问题。它分为两部分运行。首先是WordPress插件，它为渲染创建新的文章类型和REST API端点以获取渲染对象的数组。其次是一个Express服务器，当被访问时，它会获取这些渲染对象并启动puppeteer来渲染页面。当页面渲染并且解析了该页面上所需的应用程序部分后，它将通过REST API将HTML保存回文章。

免责声明

此应用程序不提供实时服务器端渲染，但适合提高您内容SEO的可访问性。puppeteer始终以未认证用户渲染页面，并且需要状态变化反映在URL中。

设置

WordPress

您可以使用composer安装此插件

composer require "columbiaroad/wp-ssr:0.1.2@dev"

首先，您需要转到插件设置并填写所需信息。您需要提供用于通过REST API进行认证的API密钥。然后，您需要给出WordPress的Node应用程序URL，用于ping渲染。最后，您还可以定义渲染过期的时间间隔。

在WordPress模板中，您需要在渲染头部之前请求渲染内容。您可以通过使用WPSSR\Render::render方法请求应用程序内容，该方法接受三个参数

• string $url 您请求渲染的页面URL
• string $app_selector 应用程序根元素的查询选择器
• string $waitfor_selector puppeteer在渲染页面之前等待的查询选择器

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

$content = WPSSR\Render::render(
  get_permalink(),
  '#react-app-root', // App selector
  '#react-app-inner' // Waitfor selector
);

get_header();
?>

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

<?php get_footer(); ?>

Node应用程序

要启动Node应用程序，您需要为它准备一些环境变量。

• WP_DOMAIN 指向您的WordPress安装的根目录
• API_KEY 是您在插件设置页面提供的相同API密钥
• NODE_ENV 用于定义Node环境。此示例用于忽略puppeteer HTTPS错误
• SCHEDULE 用于定义渲染cron作业的调度

运行应用程序的一种方法是通过提供的Docker镜像

docker run -d \
  -e "WP_DOMAIN=https://example.com" \
  -e "API_KEY=my-api-key" \
  -e "NODE_ENV=production" \
  -e "SCHEDULE=*/15 * * * *" \
  -p 80:3000 \
  --restart=unless-stoppped \
  --name=wpssr \
  columbiaroadcom/wp-ssr

发布包

当发布GitHub版本时，composer包会自动发布到columbiaroad/wp-ssr。

要发布到Docker Hub，您需要访问那里的存储库。发布操作如下

docker build . --tag columbiaroadcom/wp-ssr:<tag>
docker push columbiaroadcom/wp-ssr:<tag>

待办事项

• 为Node应用程序添加.env文件支持
• 优化大量渲染
• 锁定渲染过程以防止多次同时渲染调用