Create-React-App集成Prerender.io/Nginx及React-Snapshot问题排查

Hey there! Let's break down your questions one by one based on your setup with Create-React-App, Nginx, and Prerender.io:

方案1：bundle.js的问题与必要性 #

First off, your Nginx root configuration is pointing to the wrong place. Create-React-App's public/index.html is just a template—when you run yarn build, the toolchain generates a fully populated index.html (with bundle.js references) and all static assets in the build/ directory. You should set your Nginx root to /path/to/project/build instead of /path/to/project/public/index.html.

Is adding bundle.js necessary? Absolutely. Prerender.io needs to load your full React application code to render the complete page. Without bundle.js, it only sees the static placeholder text in your #root div. Once you point Nginx to the build/ directory, the auto-generated index.html will include the correct bundle.js references, and Prerender will be able to render the full React page.

方案2：本地测试 vs 正式部署思路 #

Your thinking here is spot-on:

• 方案2 is perfect for local testing: You don't need Nginx here—running yarn start (CRA dev server on 3001) alongside Prerender on 3000 lets Prerender proxy requests directly to your dev server. The static resource path issue happens because Prerender rewrites asset URLs to its own port (3000). To fix this, you can either configure Prerender to preserve the original asset host/port, or set your CRA app's PUBLIC_URL to http://localhost:3001 so assets load correctly.
• 方案1 is the right approach for production: Using Nginx to serve the built static files is standard for production (it's fast, handles caching, etc.), and pairing it with Prerender's Nginx configuration ensures crawlers get pre-rendered content while regular users get the interactive React app.

That syntax error is caused by a mismatch in how react-snapshot's render function works compared to ReactDOM's render. Unlike ReactDOM, react-snapshot's render only takes one argument—your root component. It automatically targets the element with id="root" by default, so you don't need to pass the target parameter.

Here's the corrected version of your src/index.js:

import React from 'react';
import { render } from 'react-snapshot';
import {Provider} from 'react-redux';
import {ConnectedRouter} from 'react-router-redux';
import './index.css';
import './main.css';
import App from './containers/app';
import store, { history } from './store';

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>
);
// No need to pass the target element!

A heads-up: react-snapshot has limited support for dynamic routing (like ConnectedRouter) and Redux async actions. You may need to ensure your routes are statically analyzable, or add logic to signal when all data has loaded so react-snapshot knows when to capture the page.

When you access http://localhost:8000/localhost:3001 and only see header/footer, Prerender is likely capturing the page before your app finishes loading content (like data from API calls). Setting window.prerenderReady = false is the first step, but you need to set window.prerenderReady = true only after all your app's data has loaded.

For example, in your Redux store, you can dispatch an action once all async requests are complete, then in a component, listen for that state change and set window.prerenderReady = true. Also, double-check your Nginx proxy configuration to ensure Prerender can access all your app's assets and API endpoints without restrictions.

内容的提问来源于stack exchange，提问作者HalfWebDev