Next.js 提供了多种网页渲染方式，这取决于你的服务应用的场景，包括服务端渲染、客户端渲染、静态生成、增量静态生成等。
SSR (Server-side Rendering)
在 Next.js 中使用 getServerSideProps 来实现服务端渲染，该动作在用户发起页面请求时执行，示例代码如下：
function Page({ data }) {
// Render data...
}
// This gets called on every request
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
export default Page
两种模式：
- 用户直接请求：服务端请求数据 -> 服务端渲染页面 -> 用户
- 用户通过
next/link或next/router跳转：客户端请求数据 -> 服务端执行getServerSideProps并返回数据 -> 客户端渲染
SSG (Static-side Generation)
在 Next.js 中使用 getStaticProps 来实现静态页面生成，该动作在 next build 时执行，示例代码如下：
// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}
// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
// Call an external API endpoint to get posts.
// You can use any data fetching library
const res = await fetch('https://.../posts')
const posts = await res.json()
// By returning { props: { posts } }, the Blog component
// will receive `posts` as a prop at build time
return {
props: {
posts,
},
}
}
export default Blog
CSR (Client-side Rendering)
客户端渲染，一般的做法是在 useEffect 中请求服务端数据再渲染组件，该动作在页面基本静态文件加载完毕后执行，示例代码如下：
function Profile() {
const [data, setData] = useState(null)
const [isLoading, setLoading] = useState(false)
useEffect(() => {
setLoading(true)
fetch('/api/profile-data')
.then((res) => res.json())
.then((data) => {
setData(data)
setLoading(false)
})
}, [])
if (isLoading) return <p>Loading...</p>
if (!data) return <p>No profile data</p>
return (
<div>
<h1>{data.name}</h1>
<p>{data.bio}</p>
</div>
)
}
Next.js 背后的技术团队开发了名为 SWR 的 React Hook 包，如果使用客户端渲染的话，强烈推荐使用 SWR，它可以处理缓存、重新验证、焦点跟踪、间隔重新获取等。示例代码如下：
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
function Profile() {
const { data, error } = useSWR('/api/profile-data', fetcher)
if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>
return (
<div>
<h1>{data.name}</h1>
<p>{data.bio}</p>
</div>
)
}
想了解更多，可以查看 SWR 文档 。
ISR (Incremental Static Regeneration)
在 Next.js 中使用增量静态生成，只需在 getStaticProps 中添加属性 revalidate，该动作在用户发起页面请求时执行，示例代码如下：
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every 10 seconds
revalidate: 10, // In seconds
}
}
// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// the path has not been generated.
export async function getStaticPaths() {
const res = await fetch('https://.../posts')
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// We'll pre-render only these paths at build time.
// { fallback: blocking } will server-render pages
// on-demand if the path doesn't exist.
return { paths, fallback: 'blocking' }
}
export default Blog
如上示例，用户发起请求后，服务端会渲染并缓存该页面，再将预渲染的页面返回给用户。在缓存期间内，用户的请求会直接返回缓存；缓存时间结束后，用户再次请求，会重新渲染并生成新的缓存。
使用 ISR，就可以在运行时实现静态页面生成，而无需重新构建整个网站。
Dynamic Routing
在 Next.js 中配合使用 getStaticPaths + getStaticProps 即可实现动态路由的预渲染，该动作在 next build 时执行，示例代码：
/**
* CodePath: ./pages/user/[uid].tsx
*/
import { GetStaticPropsContext } from "next/types"
const Page = ({ name }) => {
return (
<div> {name} </div>
)
}
export async function getStaticPaths() {
const users = ['Anoyi', 'Jack', 'Marry']
return {
paths: users.map(user => ({ params: { user } })),
fallback: true
};
}
export async function getStaticProps(context: GetStaticPropsContext) {
const { user } = context.params
return {
props: {
user
},
}
}
export default Page
如上示例，项目构建完毕后，会生成三个静态文件 /user/Anoyi & /user/Jack & /user/Marry，其它路由会执行动态路由的逻辑。
