What performance optimization techniques are available in Next.js? - 面试题

Next.js provides various performance optimization techniques to help developers build high-performance web applications. Here are the main performance optimization strategies in Next.js:

1. Automatic Code Splitting

Next.js automatically splits code into small chunks, loading only the code needed for the current page.

javascript
// pages/index.js
import dynamic from 'next/dynamic';

// Dynamically import components
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false // Disable server-side rendering
});

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <DynamicComponent />
    </div>
  );
}

2. Image Optimization

Use the next/image component to automatically optimize images.

javascript
import Image from 'next/image';

export default function ImageExample() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={800}
      height={600}
      priority // Use priority loading for above-the-fold images
      placeholder="blur" // Blur placeholder
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

Image optimization features:

Automatically selects best format (WebP, AVIF)
Responsive images
Lazy loading
Prevents layout shift

3. Font Optimization

Use next/font to optimize font loading.

javascript
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

4. Data Fetching Optimization

Using Cache and ISR

javascript
// Use fetch cache options
async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { 
      revalidate: 60, // ISR: Revalidate every 60 seconds
      tags: ['data'] // Tags for on-demand revalidation
    }
  }).then(r => r.json());
  
  return <div>{data.content}</div>;
}

Using React Query or SWR

javascript
'use client';
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(r => r.json());

export default function DataComponent() {
  const { data, error, isLoading } = useSWR('/api/data', fetcher, {
    revalidateOnFocus: false,
    dedupingInterval: 60000,
  });
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error</div>;
  
  return <div>{data.content}</div>;
}

5. Preloading and Prefetching

javascript
import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/about" prefetch={true}>
        About
      </Link>
      <Link href="/contact" prefetch={false}>
        Contact
      </Link>
    </nav>
  );
}

6. Script Optimization

Use next/script to optimize third-party script loading.

javascript
import Script from 'next/script';

export default function Page() {
  return (
    <>
      <Script
        src="https://www.googletagmanager.com/gtag/js"
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'GA_MEASUREMENT_ID');
        `}
      </Script>
    </>
  );
}

Script loading strategies:

beforeInteractive: Load before page is interactive
afterInteractive: Load immediately after page is interactive
lazyOnload: Load during browser idle time

7. Using React.memo and useMemo

javascript
'use client';
import { memo, useMemo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      computed: expensiveCalculation(item)
    }));
  }, [data]);
  
  return <div>{/* Render processed data */}</div>;
});

8. Virtualize Long Lists

javascript
'use client';
import { useVirtualizer } from '@tanstack/react-virtual';

export default function VirtualList({ items }) {
  const parentRef = useRef();
  
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
  });
  
  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: `${virtualizer.getTotalSize()}px` }}>
        {virtualizer.getVirtualItems().map(virtualItem => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualItem.size}px`,
              transform: `translateY(${virtualItem.start}px)`,
            }}
          >
            {items[virtualItem.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

9. Server Component Optimization

javascript
// Server components don't send JavaScript to client by default
async function ServerComponent() {
  const data = await fetchData();
  
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

// Only use client components where interaction is needed
'use client';
function InteractiveComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

10. Using Streaming

javascript
import { Suspense } from 'react';

async function SlowComponent() {
  const data = await slowFetch();
  return <div>{data}</div>;
}

export default function Page() {
  return (
    <div>
      <h1>Page Title</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

11. Caching Strategies

Using Next.js Cache

javascript
// Cache API responses
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'force-cache', // Or 'no-store', 'no-cache'
  }).then(r => r.json());
  
  return {
    props: { data },
    revalidate: 3600, // 1 hour
  };
}

Using Redis Cache

javascript
import { Redis } from '@upstash/redis';

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL,
  token: process.env.UPSTASH_REDIS_REST_TOKEN,
});

export async function getCachedData(key) {
  const cached = await redis.get(key);
  if (cached) return JSON.parse(cached);
  
  const data = await fetchData();
  await redis.set(key, JSON.stringify(data), { ex: 3600 });
  return data;
}

12. Build Optimization

Analyze Build Output

javascript
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // Other configuration
});

Compression and Optimization

javascript
// next.config.js
module.exports = {
  compress: true,
  swcMinify: true,
  productionBrowserSourceMaps: false,
  
  // Optimize images
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
};

Performance Monitoring

Using Web Vitals

javascript
// pages/_app.js
import { useReportWebVitals } from 'next/web-vitals';

export function reportWebVitals(metric) {
  // Send to analytics service
  console.log(metric);
  // Or send to Google Analytics
  // gtag('event', metric.name, { value: metric.value });
}

export default function App({ Component, pageProps }) {
  useReportWebVitals(reportWebVitals);
  
  return <Component {...pageProps} />;
}

Best Practices

Use server components: Reduce client-side JavaScript
Optimize images: Use next/image component
Lazy loading: Delay loading non-critical resources
Cache data: Use ISR and caching strategies
Monitor performance: Use Web Vitals monitoring
Analyze builds: Regularly analyze bundle size
Use CDN: Deploy to Vercel or other CDNs
Optimize fonts: Use next/font to optimize font loading

By properly using these optimization techniques, you can significantly improve the performance and user experience of Next.js applications.