Next.js 是一个 基于 React 的全栈开发框架, 国外很多全栈开发都会使用这个框架。
Next.js 可以开发服务端和前端， 支持3中渲染页面方式。
- 服务器端渲染（Server-Side Rendering, SSR）, 类似于 PHP 模式。
- 静态站点生成（Static Site Generation, SSG）, 相当于 PHP 生成静态页面。
- 客户端渲染（Client-Side Rendering, CSR）, 这个是默认的 React 特性。
服务端的特性主要是： API 路由 和 中间件(Middleware)
SSR 和 SSG 的渲染模式，官方文档都讲的很详细，也很容易理解和实现。
这篇文章主要讲一下 CSR 的实现方式：
1. 创建服务端API 接口，通过 Next.js 的 API 路由实现。
1
2
3
4
5
|
// pages/api/data.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello, World!' });
}
|
2. 使用 useEffect 钩子进行客户端渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// pages/bsr-page.js
import { useEffect, useState } from 'react';
export default function BSRPage() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
<h1>Data from BSR</h1>
{data ? (
<pre>{JSON.stringify(data, null, 2)}</pre>
) : (
<p>Loading...</p>
)}
</div>
);
}
|
使用动态导入（Dynamic Import）的方式
Next.js 支持通过 next/dynamic 模块来进行动态导入，这可以让你将某些组件推迟到客户端渲染时才加载：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'), {
ssr: false,
});
export default function Page() {
return (
<div>
<h1>Client-Side Rendering with Dynamic Import</h1>
<DynamicComponent />
</div>
);
}
|