首页 > 网络编程 > JavaScript > javascript类库 > React > React服务端渲染(SSR)

React服务端渲染(SSR)的实现方式和最佳实践

2025-09-16 09:24:00 作者：北辰alk

服务端渲染(SSR)是现代React应用开发中的重要技术,它能显著提升应用的性能、SEO和用户体验,本文将深入探讨React SSR的原理、实现方式和最佳实践,需要的朋友可以参考下

一、什么是服务端渲染？

1.1 客户端渲染(CSR) vs 服务端渲染(SSR)

客户端渲染(Client-Side Rendering, CSR):

浏览器请求HTML文档
服务器返回空的HTML框架和JavaScript bundle
浏览器下载并执行JavaScript
React在客户端渲染内容

服务端渲染(Server-Side Rendering, SSR):

浏览器请求HTML文档
服务器执行React组件并生成HTML
服务器返回完整的HTML内容
浏览器立即显示内容，然后加载JavaScript
React在客户端"激活"(hydrate)页面

1.2 SSR的优势

更好的SEO: 搜索引擎可以直接抓取完整内容
更快的首屏加载: 用户无需等待JS加载就能看到内容
更好的性能: 特别是对于低性能设备和慢网络
社交分享优化: 社交媒体的爬虫可以正确获取页面元数据

二、React SSR的核心原理

2.1 SSR工作原理流程图

2.2 关键技术概念

渲染ToString: 将React组件转换为HTML字符串
同构应用: 同一套代码在服务器和客户端运行
Hydration(水合): React在客户端"接管"服务端渲染的静态页面
状态同步: 确保服务器和客户端的状态一致

三、手动实现React SSR

3.1 项目结构

ssr-project/
├── src/
│   ├── client/          # 客户端代码
│   │   └── index.js     # 客户端入口
│   ├── server/          # 服务器代码
│   │   └── index.js     # 服务器入口
│   └── shared/          # 共享代码
│       ├── App.js       # 主应用组件
│       ├── routes.js    # 路由配置
│       └── components/  # 共享组件
├── public/              # 静态资源
└── webpack.config.js    # Webpack配置

3.2 服务端代码实现

server/index.js:

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import App from '../shared/App';
import serialize from 'serialize-javascript';

const app = express();
const PORT = process.env.PORT || 3000;

// 提供静态文件服务
app.use(express.static('public'));

// 处理所有路由
app.get('*', (req, res) => {
  // 创建路由上下文（用于重定向等）
  const context = {};
  
  // 渲染组件为HTML字符串
  const markup = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  
  // 检查是否重定向
  if (context.url) {
    return res.redirect(301, context.url);
  }
  
  // 构建完整HTML
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>React SSR App</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/styles.css" rel="external nofollow" >
      </head>
      <body>
        <div id="root">${markup}</div>
        <script>
          window.__INITIAL_STATE__ = ${serialize({})}
        </script>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `;
  
  res.send(html);
});

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

3.3 客户端代码实现

client/index.js:

import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from '../shared/App';

// 获取服务端注入的初始状态
const initialState = window.__INITIAL_STATE__ || {};

// Hydrate应用
hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

3.4 共享组件

shared/App.js:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

const App = () => {
  return (
    <div className="app">
      <header>
        <h1>React SSR Example</h1>
      </header>
      <main>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route component={NotFound} />
        </Switch>
      </main>
    </div>
  );
};

export default App;

四、数据获取与状态管理

4.1 服务端数据获取

实现服务端数据预取：

// shared/components/Home.js
import React, { useEffect, useState } from 'react';

const Home = () => {
  const [data, setData] = useState(null);
  
  // 客户端数据获取
  useEffect(() => {
    if (!window.__INITIAL_DATA__) {
      fetchData().then(setData);
    }
  }, []);
  
  // 使用服务端注入的数据或客户端获取的数据
  const displayData = data || window.__INITIAL_DATA__;
  
  return (
    <div>
      <h2>Home Page</h2>
      {displayData ? (
        <div>{/* 渲染数据 */}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};

// 静态方法用于服务端数据获取
Home.fetchData = async () => {
  // 这里模拟API调用
  const response = await fetch('/api/data');
  return response.json();
};

export default Home;

更新服务器代码以支持数据预取：

// server/index.js
import { matchPath } from 'react-router-dom';
import routes from '../shared/routes';

app.get('*', async (req, res) => {
  const context = {};
  
  // 查找匹配的路由
  const matchedRoute = routes.find(route => 
    matchPath(req.url, route)
  );
  
  // 执行数据获取方法（如果存在）
  let initialData = {};
  if (matchedRoute && matchedRoute.component.fetchData) {
    initialData = await matchedRoute.component.fetchData();
  }
  
  const markup = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App initialData={initialData} />
    </StaticRouter>
  );
  
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>React SSR App</title>
      </head>
      <body>
        <div id="root">${markup}</div>
        <script>
          window.__INITIAL_DATA__ = ${serialize(initialData)}
        </script>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `;
  
  res.send(html);
});

五、使用Next.js简化SSR

5.1 Next.js简介

Next.js是一个流行的React框架，内置了SSR支持，简化了配置和开发流程。

5.2 创建Next.js应用

npx create-next-app@latest my-ssr-app
cd my-ssr-app
npm run dev

5.3 Next.js页面和路由

pages/index.js (自动路由):

import React from 'react';

// Next.js自动处理SSR
const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Data: {data}</p>
    </div>
  );
};

// 服务端数据获取
export async function getServerSideProps() {
  // 在服务器上运行
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return {
    props: {
      data
    }
  };
}

export default HomePage;

5.4 静态生成(SSG)与服务器渲染(SSR)

静态生成(SSG - 构建时获取数据):

export async function getStaticProps() {
  // 在构建时运行
  return {
    props: {
      data: // 从CMS、文件系统等获取数据
    }
  };
}

服务器渲染(SSR - 请求时获取数据):

export async function getServerSideProps(context) {
  // 每次请求时运行
  return {
    props: {
      data: // 根据请求参数获取数据
    }
  };
}

六、高级SSR主题

6.1 代码分割与懒加载

使用React.lazy和Suspense:

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

服务器端支持懒加载:

// 需要使用@loadable/components等库支持SSR的代码分割
import loadable from '@loadable/component';

const LazyComponent = loadable(() => import('./LazyComponent'), {
  fallback: <div>Loading...</div>
});

6.2 状态管理(Redux)与SSR

创建store工厂函数:

// shared/store/configureStore.js
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

export default function configureStore(preloadedState) {
  return createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(/* middleware */)
  );
}

服务端store配置:

// server/index.js
app.get('*', async (req, res) => {
  const store = configureStore();
  
  // 执行需要的数据获取操作
  await Promise.all(
    matchedRoutes.map(route => {
      return route.component.fetchData 
        ? route.component.fetchData(store) 
        : Promise.resolve(null);
    })
  );
  
  const markup = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={context}>
        <App />
      </StaticRouter>
    </Provider>
  );
  
  // 将store状态传递给客户端
  const initialState = store.getState();
  
  const html = `
    <script>
      window.__INITIAL_STATE__ = ${serialize(initialState)}
    </script>
  `;
});

客户端store配置:

// client/index.js
const initialState = window.__INITIAL_STATE__;
const store = configureStore(initialState);

hydrate(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

6.3 SEO与元标签管理

使用React Helmet管理头部标签:

import { Helmet } from 'react-helmet';

const SEOComponent = ({ title, description }) => {
  return (
    <div>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
      </Helmet>
      {/* 页面内容 */}
    </div>
  );
};

服务端渲染头部:

// 在服务器端
const helmet = Helmet.renderStatic();
const html = `
  <html>
    <head>
      ${helmet.title.toString()}
      ${helmet.meta.toString()}
      ${helmet.link.toString()}
    </head>
    <body>
      <div id="root">${markup}</div>
    </body>
  </html>
`;

七、性能优化与最佳实践

7.1 缓存策略

组件级别缓存:

import lruCache from 'lru-cache';

// 创建缓存实例
const ssrCache = new lruCache({
  max: 100, // 最大缓存项数
  maxAge: 1000 * 60 * 15 // 15分钟
});

// 缓存渲染结果
app.get('*', (req, res) => {
  const key = req.url;
  if (ssrCache.has(key)) {
    return res.send(ssrCache.get(key));
  }
  
  // 渲染组件
  const html = renderToString(<App />);
  
  // 缓存结果
  ssrCache.set(key, html);
  
  res.send(html);
});

7.2 流式渲染

使用renderToNodeStream提升性能:

import { renderToNodeStream } from 'react-dom/server';

app.get('*', (req, res) => {
  // 先发送HTML头部
  res.write(`
    <!DOCTYPE html>
    <html>
      <head><title>My App</title></head>
      <body>
        <div id="root">
  `);
  
  // 创建渲染流
  const stream = renderToNodeStream(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );
  
  // 管道传输到响应
  stream.pipe(res, { end: false });
  
  // 流结束时完成HTML
  stream.on('end', () => {
    res.write(`
        </div>
        <script src="/bundle.js"></script>
      </body>
    </html>
    `);
    res.end();
  });
});

7.3 错误处理

组件错误边界:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    // 记录错误到日志服务
    console.error('SSR Error:', error, errorInfo);
  }
  
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    
    return this.props.children;
  }
}

服务器错误处理:

app.get('*', async (req, res, next) => {
  try {
    // 渲染逻辑
  } catch (error) {
    console.error('SSR Error:', error);
    
    // 返回错误页面或回退到CSR
    res.send(`
      <html>
        <body>
          <div id="root">
            <h1>Server Error</h1>
            <p>Please try refreshing the page.</p>
          </div>
          <script src="/bundle.js"></script>
        </body>
      </html>
    `);
  }
});

八、常见问题与解决方案

8.1 窗口对象未定义问题

解决方案:

// 检查是否在浏览器环境中
if (typeof window !== 'undefined') {
  // 使用窗口相关API
}

// 或者使用动态导入
useEffect(() => {
  const loadBrowserOnlyModule = async () => {
    const module = await import('./browser-only-module');
    // 使用模块
  };
  loadBrowserOnlyModule();
}, []);

8.2 样式处理问题

使用CSS-in-JS库的SSR支持:

// 使用styled-components
import { ServerStyleSheet } from 'styled-components';

app.get('*', (req, res) => {
  const sheet = new ServerStyleSheet();
  
  try {
    const markup = renderToString(
      sheet.collectStyles(
        <StaticRouter location={req.url}>
          <App />
        </StaticRouter>
      )
    );
    
    const styles = sheet.getStyleTags();
    
    const html = `
      <html>
        <head>${styles}</head>
        <body>
          <div id="root">${markup}</div>
        </body>
      </html>
    `;
    
    res.send(html);
  } finally {
    sheet.seal();
  }
});

九、总结

React服务端渲染是一个强大的技术，可以显著提升应用性能和用户体验。实现SSR需要考虑多个方面：

同构应用结构: 确保代码在服务器和客户端都能运行
数据预取: 在服务器上获取必要数据并传递给客户端
状态同步: 保持服务器和客户端状态一致
性能优化: 使用缓存、流式渲染等技术提升性能
错误处理: 优雅处理渲染过程中的错误

对于大多数项目，建议使用成熟的框架如Next.js，它们提供了开箱即用的SSR支持和完善的解决方案。对于特殊需求或学习目的，手动实现SSR可以帮助深入理解其工作原理。

以上就是React服务端渲染(SSR)的实现方式和最佳实践的详细内容，更多关于React服务端渲染(SSR)的资料请关注脚本之家其它相关文章！