面试题：React路由性能优化与服务器端渲染结合

代码分割

策略：将大型组件分割成更小的代码块，在需要的时候再加载，避免初始加载时下载过多不必要的代码。

技术实现：

使用React.lazy和Suspense。例如，在路由配置中：

import React, { lazy, Suspense } from'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={
          <Suspense fallback={<div>Loading...</div>}>
            <Home />
          </Suspense>
        } />
        <Route path="/about" element={
          <Suspense fallback={<div>Loading...</div>}>
            <About />
          </Suspense>
        } />
      </Routes>
    </Router>
  );
}

export default App;

预加载

策略：在用户可能访问某个路由之前，提前加载相关组件的代码，减少用户等待时间。

技术实现：

利用<link rel="preload">标签。在服务器端渲染时，可以在HTML头部添加预加载链接。例如，在Node.js服务器端使用Express和React SSR：

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router-dom/server');
const App = require('./client/src/App');

const app = express();

app.get('*', (req, res) => {
  const context = {};
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  const preloadLinks = `
    <link rel="preload" href="/static/js/about.js" as="script">
  `;
  const page = `
    <!DOCTYPE html>
    <html>
      <head>
        ${preloadLinks}
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/static/js/bundle.js"></script>
      </body>
    </html>
  `;
  res.send(page);
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

缓存

策略：对静态资源（如JavaScript、CSS文件）和渲染后的HTML页面进行缓存，减少重复请求和渲染的开销。

技术实现：

静态资源缓存：在服务器端配置合适的缓存头。例如，在Express中：

const express = require('express');
const app = express();

app.use('/static', express.static('public', {
  maxAge: 31536000 // 1年
}));

页面缓存：可以使用诸如react - ssr - cache这样的库，在服务器端对渲染后的HTML页面进行缓存。例如：

const ReactSSRCache = require('react - ssr - cache');
const cache = new ReactSSRCache();

app.get('*', async (req, res) => {
  const cached = cache.get(req.url);
  if (cached) {
    return res.send(cached);
  }
  const context = {};
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  const page = `
    <!DOCTYPE html>
    <html>
      <body>
        <div id="root">${html}</div>
        <script src="/static/js/bundle.js"></script>
      </body>
    </html>
  `;
  cache.set(req.url, page);
  res.send(page);
});

此外，还可以通过优化服务器配置（如使用CDN）、合理设置路由守卫（避免不必要的重定向和渲染）等方式进一步提升路由相关性能。

星途面试题库

面试题：React路由性能优化与服务器端渲染结合

知识考点

面试题答案

代码分割

预加载

缓存