当前位置：首页 > news >正文

WHAT - NextJS 系列之 Rendering - Server Rendering Strategies

news 来源：原创 2024/6/30 23:55:40

1. Static Rendering（静态渲染）

静态渲染是在构建时（Build Time）生成 HTML 文件的过程。这种方式适用于内容较少变化的页面，如博客文章、产品展示等。

特点：

预渲染：在构建应用时，所有需要的页面都已经生成好静态 HTML 文件。
高性能：因为生成的页面在构建时就已经完成，不需要在每次请求时重新生成。
CDN 友好：静态页面可以轻松部署到 CDN 上，实现快速分发和加载。

实现方式：

在 Next.js 中，使用 getStaticProps 和 getStaticPaths 可以实现静态渲染。

// pages/post/[id].js
import { useRouter } from 'next/router';export default function Post({ post }) {return (<div><h1>{post.title}</h1><p>{post.content}</p></div>);
}// 在构建时调用
export async function getStaticPaths() {const paths = [ /* 预生成的路径数组 */ ];return { paths, fallback: false };
}export async function getStaticProps({ params }) {const post = await fetchPostData(params.id);return { props: { post } };
}

2. Dynamic Rendering（动态渲染）

动态渲染是在每次请求时生成 HTML 的过程。这种方式适用于内容频繁变化或依赖用户输入的页面，如用户仪表盘、搜索结果等。

特点：

实时数据：每次请求都会触发服务器端渲染，确保用户获取最新数据。
灵活性高：适合需要频繁更新内容或个性化内容的场景。
性能开销：每次请求都会占用服务器资源，因此需要考虑服务器性能和响应时间。

实现方式：

在 Next.js 中，使用 getServerSideProps 可以实现动态渲染。

// pages/dashboard.jsexport default function Dashboard({ data }) {return (<div><h1>Dashboard</h1><p>{data}</p></div>);
}// 每次请求都会调用
export async function getServerSideProps(context) {const data = await fetchDataForDashboard();return { props: { data } };
}

3. Streaming Rendering（流式渲染）

流式渲染是一种逐步发送 HTML 到客户端的渲染方式，这样客户端可以尽早看到部分内容，而无需等待整个页面渲染完成。适用于大型页面或复杂应用的优化。

特点：

快速响应：客户端可以更早地开始解析和渲染部分内容，提高感知性能。
渐进增强：逐步发送内容，使用户感觉页面加载速度更快。
适合大页面：对于需要渲染大量内容的页面非常有效。

实现方式：

在 Next.js 中，使用 React 18 引入的 React.lazy 和 Suspense 组件，结合新的流式渲染支持，可以实现流式渲染。

// pages/index.js
import ClientComponent from '../components/ClientComponent';export default function Home() {return (<div><h1>Next.js Streaming Example</h1><ClientComponent /></div>);
}// components/ClientComponent.js
'use client';import React, { Suspense } from 'react';
const ServerComponent = React.lazy(() => import('./ServerComponent'));export default function ClientComponent() {return (<div><h1>Client Component</h1><Suspense fallback={<div>Loading...</div>}><ServerComponent /></Suspense></div>);
}// components/ServerComponent.js
import React from 'react';export default function ServerComponent() {// 模拟服务器端数据获取const data = new Promise((resolve) => {setTimeout(() => resolve('Server-side Data'), 3000);});return (<div><h1>Server Component</h1><p>{data}</p></div>);
}

在这个示例中，通过 Suspense 和 React.lazy 实现流式渲染。当用户访问页面时，服务器会立即发送初始的 HTML，客户端在接收并解析后，可以逐步加载 ClientComponent 和 ServerComponent，使用户能够尽早看到部分内容。