面试题：优化Next.js动态路由的性能及处理复杂嵌套路由场景

页面加载性能挑战

初始加载时间长：多层嵌套动态路由意味着需要获取多个动态参数对应的资源，网络请求增多，可能导致初始加载时间变长。例如，每个动态路由层级都可能需要从服务器获取对应的数据，多个请求串行或并行处理不当会增加整体耗时。
代码体积大：如果没有进行合理的代码拆分，包含多层嵌套路由的页面代码可能会包含大量不必要的模块，使得打包后的文件体积过大，影响加载速度。

使用Next.js功能优化性能

路由分割：

Next.js支持动态路由分割，通过getStaticPaths和getStaticProps函数，对于静态生成页面，可以在构建时生成特定动态路由的页面。例如，对于pages/parent/[parentId]/child/[childId]/sub - child/[subChildId].js，可以在getStaticPaths中定义所有可能的parentId、childId和subChildId组合，在构建时预生成页面，这样用户访问时直接加载静态页面，提高加载速度。

export async function getStaticPaths() {
    const parentIds = await getAllParentIds();
    const paths = [];
    for (const parentId of parentIds) {
        const childIds = await getChildIdsByParentId(parentId);
        for (const childId of childIds) {
            const subChildIds = await getSubChildIdsByChildId(childId);
            for (const subChildId of subChildIds) {
                paths.push({ params: { parentId, childId, subChildId } });
            }
        }
    }
    return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
    const data = await fetchData(params.parentId, params.childId, params.subChildId);
    return { props: { data }, revalidate: 60 };
}

代码拆分：
- Next.js默认支持基于路由的代码拆分。每个页面都是独立的代码块，只有在需要时才加载。对于多层嵌套路由，可以进一步通过动态导入组件的方式，确保只有当前页面需要的组件代码被加载。例如，如果sub - child页面有一些不常用的组件，可以使用动态导入：
```
const SpecialComponent = dynamic(() => import('./SpecialComponent'));
```
缓存策略：
- 利用getStaticProps的revalidate选项实现增量静态再生。对于频繁更新的数据，可以设置一个合理的revalidate时间（以秒为单位），Next.js会在这个时间间隔后重新验证页面数据，并在有新请求时返回更新后的静态页面。对于不经常变化的数据，可以通过浏览器缓存策略，在next.config.js中配置cache - control头信息，让浏览器缓存页面资源。
```
module.exports = {
    async headers() {
        return [
            {
                source: '/parent/[parentId]/child/[childId]/sub - child/[subChildId]',
                headers: [
                    {
                        key: 'Cache - Control',
                        value: 'public, max - age = 31536000, immutable'
                    }
                ]
            }
        ];
    }
};
```

不同层级动态路由间的数据传递和状态管理方案

通过props传递：

最简单的方式是通过getStaticProps或getServerSideProps获取数据后，通过props层层传递。例如，parent页面获取数据后传递给child页面，child页面再传递给sub - child页面。

// parent.js
export async function getStaticProps({ params }) {
    const parentData = await fetchParentData(params.parentId);
    return { props: { parentData } };
}

function Parent({ parentData }) {
    return (
        <Child parentData={parentData} />
    );
}

// child.js
function Child({ parentData }) {
    const childData = processParentData(parentData);
    return (
        <SubChild childData={childData} />
    );
}

// sub - child.js
function SubChild({ childData }) {
    return (
        <div>{childData}</div>
    );
}

使用Context：

对于一些全局或跨层级共享的数据，可以使用React的Context。创建一个Context对象，在顶层组件中提供数据，不同层级的组件可以消费这个数据。

import React, { createContext, useState, useEffect } from'react';

const DataContext = createContext();

function Parent({ params }) {
    const [parentData, setParentData] = useState(null);
    useEffect(() => {
        async function fetchData() {
            const data = await fetchParentData(params.parentId);
            setParentData(data);
        }
        fetchData();
    }, [params.parentId]);

    return (
        <DataContext.Provider value={parentData}>
            <Child />
        </DataContext.Provider>
    );
}

function SubChild() {
    const data = React.useContext(DataContext);
    return (
        <div>{data}</div>
    );
}

状态管理库（如Redux或MobX）：

对于复杂的状态管理需求，使用Redux或MobX等状态管理库。在Redux中，不同层级的组件可以通过dispatch actions来更新全局状态，并且通过connect或useSelector、useDispatch钩子来获取和更新状态。

// actions.js
const FETCH_PARENT_DATA = 'FETCH_PARENT_DATA';
export const fetchParentData = (parentId) => async (dispatch) => {
    const data = await fetchParentDataFromApi(parentId);
    dispatch({ type: FETCH_PARENT_DATA, payload: data });
};

// reducer.js
const initialState = {
    parentData: null
};
const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_PARENT_DATA:
            return {
               ...state,
                parentData: action.payload
            };
        default:
            return state;
    }
};

// sub - child.js
import React from'react';
import { useSelector } from'react-redux';

function SubChild() {
    const parentData = useSelector(state => state.parentData);
    return (
        <div>{parentData}</div>
    );
}

星途面试题库

面试题：优化Next.js动态路由的性能及处理复杂嵌套路由场景

知识考点

面试题答案

页面加载性能挑战

使用Next.js功能优化性能

不同层级动态路由间的数据传递和状态管理方案