面试题：React动态路由参数在SSR（服务器端渲染）场景下的处理与实践

服务器端处理

获取动态路由参数：在服务器端使用React进行服务器端渲染时，通常会结合框架如Next.js或Express等。以Next.js为例，在页面组件中，可以通过getServerSideProps函数来获取动态路由参数。

// pages/article/[articleId].js
import React from 'react';

export async function getServerSideProps(context) {
  const { articleId } = context.query;
  // 这里可以根据articleId进行数据预取
  const articleData = await fetchArticleData(articleId);
  return {
    props: {
      articleData
    }
  };
}

const ArticlePage = ({ articleData }) => {
  return (
    <div>
      {/* 展示文章数据 */}
    </div>
  );
};

export default ArticlePage;

数据预取：在获取到articleId后，可以使用该参数去调用API获取相关的文章数据。上述代码中的fetchArticleData函数就是用于数据预取的示例，具体实现需要根据实际的API来编写。
生成正确的HTML结构：将预取到的数据作为props传递给页面组件，组件根据数据渲染出正确的HTML结构。

客户端处理

路由切换流畅性：在客户端，使用React Router或Next.js自带的路由系统来处理路由切换。当用户点击链接切换到 /article/:articleId 路由时，路由系统会处理过渡动画等，保证切换流畅。例如在Next.js中，使用next/link组件：

import Link from 'next/link';

const ArticleList = ({ articles }) => {
  return (
    <ul>
      {articles.map(article => (
        <li key={article.id}>
          <Link href={`/article/${article.id}`}>
            <a>{article.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
};

export default ArticleList;

数据一致性：为了确保数据一致性，客户端可以在路由切换后重新获取数据（如果数据可能已经过期）。可以在客户端组件的useEffect钩子中进行数据获取。

import React, { useEffect } from'react';

const ArticlePage = ({ articleData }) => {
  const [article, setArticle] = React.useState(articleData);

  useEffect(() => {
    const fetchData = async () => {
      const newArticleData = await fetchArticleData(article.id);
      setArticle(newArticleData);
    };
    fetchData();
  }, []);

  return (
    <div>
      {/* 展示文章数据 */}
    </div>
  );
};

export default ArticlePage;

这里在组件挂载时重新获取数据，以保证与服务器端数据一致。如果使用了缓存机制，也可以检查缓存是否有效，决定是否重新获取数据。

星途面试题库

面试题：React动态路由参数在SSR（服务器端渲染）场景下的处理与实践

知识考点

面试题答案

服务器端处理

客户端处理