请求协助在React Boilerplate中实现SSR以满足SEO需求

Hey there! I’ve worked with React Boilerplate before, and adding SSR for SEO is totally achievable. Let’s walk through the key steps to make this happen:

First, you’ll need a server to handle SSR requests. Express is perfect for this—lightweight and easy to integrate with React.

1. Install required dependencies:

npm install express react-dom/server react-router-dom

2. Create a server.js file at your project root with basic server setup:

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './src/app'; // Import your root App component

const app = express();

// Serve static files from your build directory
app.use(express.static('build'));

app.get('*', (req, res) => {
  // Render your React app to a string on the server
  const html = renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  // Send the rendered HTML back to the client
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Your SSR React App</title>
        <!-- Add meta tags, CSS links here -->
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/client-bundle.js"></script> <!-- Your client bundle -->
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('SSR server running on port 3000');
});

React Boilerplate’s default setup is client-side only, so you’ll need to tweak a few things:

• Make sure your root App component is exportable (avoid rendering directly in the component file—move that logic to a separate client entry file).
• Use router components compatible with SSR: StaticRouter on the server and BrowserRouter on the client.

You need a separate Webpack config to bundle your server code (since it runs in Node.js, not the browser):

1. Install webpack-node-externals to skip bundling node_modules:

npm install webpack-node-externals --save-dev

2. Create a webpack.server.js file:

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  target: 'node',
  entry: './server.js',
  output: {
    filename: 'server-bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  externals: [nodeExternals()], // Don't bundle node_modules to keep server bundle lean
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader' // Reuse your existing Babel config
      },
      // Handle CSS for server-side (use locals to avoid style injection during SSR)
      {
        test: /\.css$/,
        use: ['css-loader/locals']
      }
    ]
  }
};

3. Update your package.json scripts to build both client and server bundles:

"scripts": {
  "build:client": "webpack --config webpack.client.js", // Your existing client build script
  "build:server": "webpack --config webpack.server.js",
  "build": "npm run build:client && npm run build:server",
  "start:server": "node build/server-bundle.js"
}

For SEO, your server needs to fetch all required data before rendering the page. Here’s a straightforward approach:

• Add a static method like getInitialProps to components that need data:

export const HomePage = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Use server-fetched data if available
    if (window.__INITIAL_DATA__) {
      setData(window.__INITIAL_DATA__);
      delete window.__INITIAL_DATA__;
    } else {
      // Fallback to client-side fetch if needed
    }
  }, []);

  return <div>{data ? data.content : 'Loading...'}</div>;
};

// Static method to fetch data server-side
HomePage.getInitialProps = async () => {
  const res = await fetch('https://api.yourdomain.com/home-data');
  const data = await res.json();
  return data;
};

• Modify your server to call these methods before rendering:

// In server.js, inside the app.get('*') handler
import { matchRoutes } from 'react-router-dom';
import routes from './src/routes'; // Your app's route config

const matchedRoutes = matchRoutes(routes, req.url);
// Collect data fetch promises from matched routes
const promises = matchedRoutes.map(({ route }) => {
  return route.element.type.getInitialProps ? route.element.type.getInitialProps() : Promise.resolve(null);
});

// Wait for all data to fetch before rendering
Promise.all(promises).then((dataArray) => {
  const initialData = dataArray.reduce((acc, current) => ({ ...acc, ...current }), {});
  
  const html = renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  // Inject initial data into the client-side window object
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Your SSR React App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>window.__INITIAL_DATA__ = ${JSON.stringify(initialData)}</script>
        <script src="/client-bundle.js"></script>
      </body>
    </html>
  `);
});

Instead of using ReactDOM.render, use hydrateRoot to "attach" the client app to the server-rendered HTML (this preserves the server-rendered content instead of re-rendering from scratch):

// In your client entry file (e.g., src/index.js)
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './app';

const root = document.getElementById('root');
hydrateRoot(
  root,
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

• Style Handling: If you’re using styled-components or Emotion, you’ll need to collect styles on the server and inject them into the HTML. For styled-components, use ServerStyleSheet:

  // In server.js
  import { ServerStyleSheet } from 'styled-components';
  
  const sheet = new ServerStyleSheet();
  const html = renderToString(sheet.collectStyles(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  ));
  const styleTags = sheet.getStyleTags();
  
  // Add styleTags to the <head> of your HTML template
  

• SEO Testing: After setup, run curl http://localhost:3000 to check if your page content is present in the raw HTML. You can also use Google’s Rich Results Test to validate meta tags and structured data.
• Error Handling: Add error boundaries in your React app and server-side try/catch blocks to catch issues during rendering and serve proper error pages.

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