Next.js 加载页面及流式渲染（Streaming）

Next.js 加载页面及流式渲染（Streaming）

在现代的 Web 应用开发中，用户体验是至关重要的。快速响应的页面加载和流畅的用户界面可以显著提升用户的满意度。而加载页面（Loading Page）和流式渲染（Streaming）在这其中起到了关键作用。

一、加载页面的作用

1.1 提升用户体验

加载页面在用户等待数据加载或页面渲染完成时提供了视觉反馈，避免了用户面对空白屏幕的不安和困惑。一个设计良好的加载页面可以让用户感受到应用正在积极工作，从而减少他们的焦虑感。

1.2 避免页面布局变化

在数据加载完成之前显示加载页面，可以避免页面布局在数据加载后突然变化，防止因内容突然出现而导致的页面跳动。这对于保持一致的用户体验至关重要。

1.3 提供品牌曝光机会

加载页面还可以作为品牌曝光的机会。设计一个与品牌形象一致的加载动画或标志，可以在提升用户体验的同时加强品牌记忆。

二、Next.js 加载页面的实现

在 Next.js 中，实现加载页面主要有以下几种方法：

2.1 利用全局 CSS

可以通过全局 CSS 文件在 _app.js 文件中定义加载页面的样式。例如：

// pages/_app.js

import '../styles/globals.css';
import { useState, useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const handleRouteChange = (url) => {
      setLoading(true);
    };

    const handleRouteComplete = (url) => {
      setLoading(false);
    };

    Router.events.on('routeChangeStart', handleRouteChange);
    Router.events.on('routeChangeComplete', handleRouteComplete);
    Router.events.on('routeChangeError', handleRouteComplete);

    return () => {
      Router.events.off('routeChangeStart', handleRouteChange);
      Router.events.off('routeChangeComplete', handleRouteComplete);
      Router.events.off('routeChangeError', handleRouteComplete);
    };
  }, []);

  return (
    <>
      {loading ? <Loading /> : <Component {...pageProps} />}
    </>
  );
}

function Loading() {
  return (
    <div className="loading">
      <div className="spinner"></div>
    </div>
  );
}

export default MyApp;

2.2 使用 Next.js 内置的动态加载

Next.js 提供了动态加载组件的功能，可以在加载组件时显示加载指示器：

import dynamic from 'next/dynamic';

const DynamicComponentWithLoading = dynamic(() => import('../components/YourComponent'), {
  loading: () => <p>Loading...</p>,
});

export default function Page() {
  return <DynamicComponentWithLoading />;
}

三、流式渲染（Streaming）

3.1 什么是流式渲染

流式渲染是一种渐进式的页面渲染技术，可以在服务器端逐步发送页面内容到客户端，而不是等待整个页面准备好后再发送。这样可以显著减少首次内容绘制（First Contentful Paint，FCP）时间，提升用户感知性能。

3.2 Next.js 的流式渲染支持

Next.js 12 引入了对 React 18 流式渲染的支持，通过 next/server 模块可以轻松实现流式渲染。例如：

import { renderToReadableStream } from 'react-dom/server';
import { NextResponse } from 'next/server';

export async function middleware(req) {
  const stream = await renderToReadableStream(<YourComponent />);
  return new NextResponse(stream);
}

3.3 流式渲染的优势

更快的首屏渲染：由于流式渲染可以在数据加载的同时发送已经准备好的部分内容，用户可以更快地看到页面的部分内容，而不是等待整个页面加载完毕。
更好的用户体验：用户可以逐步看到页面的内容，减少等待的焦虑感和不确定感。
资源优化：通过流式渲染可以优化服务器资源的使用，提升整体应用的性能。