预渲染.io CloudFront中间件示例项目：提升SPA搜索引擎可见性的强大工具

// 预渲染CloudFront中间件示例：增强单页应用(SPA)的搜索引擎可见性

'use strict';
 
const url = require('url');
const { renderToString } = require('react-dom/server');
const fs = require('fs');
const path = require('path');
const React = require('react');
const App = require('./App').default; // 假设有一个React App组件
 
// 从文件系统中读取HTML模板
const htmlTemplate = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf8');
 
// 处理CloudFront请求事件
exports.handler = (event, context, callback) => {
  const request = event.Records[0].cf.request;
  const uri = request.uri;
 
  // 检查请求是否为对根URL的GET请求
  if (request.method === 'GET' && uri === '/') {
    // 预渲染React应用
    const appString = renderToString(React.createElement(App));
 
    // 替换HTML模板中的特殊占位符为预渲染的React应用
    const htmlContent = htmlTemplate.replace('<!--app-html-->', appString);
 
    // 返回修改后的HTML内容
    callback(null, {
      status: '200',
      statusDescription: 'OK',
      headers: {
        'content-type': [{ key: 'Content-Type', value: 'text/html' }],
        'cache-control': [{ key: 'Cache-Control', value: 'no-cache, no-store, must-revalidate' }]
      },
      body: htmlContent,
    });
  } else {
    // 对于非根URL的请求或非GET请求，直接通过CloudFront传递
    callback(null, request);
  }
};

这段代码示例展示了如何使用预渲染来增强SPA的SEO可见性。它首先检查请求是否为对根URL的GET请求，如果是，则使用预渲染的React应用替换HTML模板中的占位符，并返回完整的HTML内容。对于非根URL的请求或非GET请求，它将请求直接传递给CloudFront。