Next.js在B端应用中的实现模式

ZY
252 阅读4分钟

前段时间写公司官网用到了Nextjs，尝到了Nextjs在SSR方面的甜头，最近花时间研究了下其在B端（企业级）应用中的实现，话不多说，直接一把梭！ Next.js 为使用者提供了多种实现模式，能够满足复杂业务需求和高性能要求。以下是常见的实现模式：

1. 静态生成 (Static Generation, SSG)

  • 适用场景: 适用于内容不频繁变化的页面，如产品展示、帮助文档等。
  • 实现方式: 在构建时生成静态HTML，页面加载速度快，适合SEO。
  • 代码示例:
export async function getStaticProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    return {
        props: {
            data,
        },
    };
}
export default function Page({ data }) {
    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

2. 服务器端渲染 (Server-Side Rendering, SSR)

  • 适用场景: 适用于需要频繁更新或依赖用户请求的页面，如仪表盘、实时数据展示等。
  • 实现方式: 每次请求时在服务器端生成HTML，适合动态内容。
  • 代码示例:
export async function getServerSideProps(context) {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    return {
        props: {
            data,
        },
    };
}
export default function Page({ data }) {
    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

3. 客户端渲染 (Client-Side Rendering, CSR)

  • 适用场景: 适用于交互性强、数据频繁变化的页面，如用户仪表盘、实时通知等。
  • 实现方式: 页面初始加载后，通过JavaScript在客户端获取数据并渲染。
  • 代码示例:
import { useEffect, useState } from 'react';
export default function Page() {
    const [data, setData] = useState([]);
    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(res => res.json())
            .then(data => setData(data));
    }, []);
    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

4. 混合渲染 (Hybrid Rendering)

  • 适用场景: 适用于既有静态内容又有动态内容的页面，如电商产品详情页。
  • 实现方式: 结合SSG和SSR，部分内容在构建时生成，部分内容在请求时生成。
  • 代码示例:
export async function getStaticProps() {
    const res = await fetch('https://api.example.com/static-data');
    const staticData = await res.json();
    return {
        props: {
            staticData,
        },
    };
}

export async function getServerSideProps(context) {
    const res = await fetch('https://api.example.com/dynamic-data');
    const dynamicData = await res.json();
        return {
            props: {
                dynamicData,
            },
        };
}

export default function Page({ staticData, dynamicData }) {
    return (
        <div>
            <div>
                {staticData.map(item => (
                    <div key={item.id}>{item.name}</div>
                ))}
            </div>
            <div>
                {dynamicData.map(item => (
                    <div key={item.id}>{item.name}</div>
                ))}
            </div>
        </div>
    );
}

5. 增量静态再生 (Incremental Static Regeneration, ISR)

  • 适用场景: 适用于需要定期更新内容的页面，如新闻网站、博客等。
  • 实现方式: 在页面请求时重新生成静态页面，适合内容频繁更新的场景。
  • 代码示例:
export async function getStaticProps() {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    return {
        props: {
            data,
        },
        revalidate: 10, // 每10秒重新生成页面
    };
}
export default function Page({ data }) {
    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

6. API路由 (API Routes)

  • 适用场景: 适用于需要自定义后端逻辑的场景，如用户认证、数据处理等。
  • 实现方式: 在pages/api目录下创建API路由，处理前端请求。
  • 代码示例:
// pages/api/data.js
export default function handler(req, res) {
    res.status(200).json({ name: 'John Doe' });
}

7. 中间件 (Middleware)

  • 适用场景: 适用于需要在请求到达页面之前进行处理的场景，如身份验证、重定向等。
  • 实现方式: 在middleware.js中定义中间件逻辑。
  • 代码示例:
// middleware.js
import { NextResponse } from 'next/server';
export function middleware(request) {
    if (request.nextUrl.pathname.startsWith('/dashboard')) {
        return NextResponse.redirect(new URL('/login', request.url));
    }
    return NextResponse.next();
}

8. 自定义文档 (Custom Document)

  • 适用场景: 适用于需要自定义HTML文档结构的场景，如添加全局样式、脚本等。
  • 实现方式: 在pages/_document.js中自定义文档结构。
  • 代码示例:
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
    return (
        <Html>
            <Head>
                <link rel="stylesheet" href="/styles.css" />
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}

9. 自定义App (Custom App)

  • 适用场景: 适用于需要全局状态管理、布局共享的场景。
  • 实现方式: 在pages/_app.js中自定义App组件。
  • 代码示例:

// pages/_app.js

import Layout from '../components/Layout';
import '../styles/globals.css';
export default function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}

10. 国际化 (Internationalization, i18n)

  • 适用场景: 适用于多语言支持的B端应用。
  • 实现方式: 使用Next.js内置的i18n支持或第三方库。
  • 代码示例:
// next.config.js
module.exports = {
    i18n: {
        locales: ['en', 'fr'],
        defaultLocale: 'en',
    },
};

总结

Next.js 为使用者提供了多种实现模式，大家可以根据具体需求选择合适的模式。静态生成适合内容不变的页面，服务器端渲染适合动态内容，客户端渲染适合交互性强的页面，混合渲染和增量静态再生则适合内容频繁更新的场景。API路由、中间件、自定义文档和App等特性进一步增强了Next.js的灵活性，使其成为B端应用的理想选择。

avatar
文章
阅读
粉丝