面试题：Next.js 中 Link 组件如何通过预取优化页面加载性能

Question

在 Next.js 项目中，简述 Link 组件预取功能的原理，以及如何通过配置和使用 Link 组件的属性来控制预取行为，以达到优化页面加载性能的目的。请举例说明。

Answer 1

Link 组件预取功能原理

在 Next.js 中，Link 组件的预取功能基于浏览器的 fetch API。当用户的鼠标悬停在 Link 组件上或者组件进入视口（可配置）时，Next.js 会在后台提前发起对目标页面数据的请求，并缓存起来。这样当用户真正点击链接进入目标页面时，由于数据已经预取并缓存，页面可以更快地渲染，提升用户体验。

控制预取行为的配置与属性使用

1. prefetch 属性：
   • 该属性是一个布尔值，默认情况下 Link 组件会自动预取。如果设置 prefetch={false}，则可以禁用预取功能。例如：

   import Link from 'next/link';
   function MyComponent() {
     return (
       <Link href="/about" prefetch={false}>
         <a>About Us</a>
       </Link>
     );
   }
   export default MyComponent;
   

2. scroll 属性：
   • 当导航到新页面时，scroll 属性决定是否滚动到页面顶部。默认值为 true。如果设置 scroll={false}，页面导航时将保持当前滚动位置。这对于单页应用式的体验很有用，不会因为页面切换而丢失用户的滚动位置，间接优化用户体验。例如：

   import Link from 'next/link';
   function MyComponent() {
     return (
       <Link href="/contact" scroll={false}>
         <a>Contact Us</a>
       </Link>
     );
   }
   export default MyComponent;
   

3. passHref 属性：
   • 有时我们需要在 Link 组件包裹的元素上添加自定义的 href 属性（比如用于 SEO 目的）。设置 passHref 为 true，这样 Link 组件会将 href 传递给包裹的元素，同时保持预取和导航功能。例如：

   import Link from 'next/link';
   function MyComponent() {
     return (
       <Link href="/blog" passHref>
         <a href="/blog" rel="noopener noreferrer">Read Our Blog</a>
       </Link>
     );
   }
   export default MyComponent;
   

4. priority 属性：
   • priority 属性用于给预取设置优先级。如果页面中有多个 Link 组件，设置 priority={true} 的 Link 组件会优先进行预取。例如：

   import Link from 'next/link';
   function MyComponent() {
     return (
       <>
         <Link href="/home" priority>
           <a>Home</a>
         </Link>
         <Link href="/products">
           <a>Products</a>
         </Link>
       </>
     );
   }
   export default MyComponent;
   

   这样，当页面加载时，指向 /home 的链接会优先预取，确保重要页面能更快加载。