Next.js 是一个 React 应用的服务端渲染框架，它可以帮助我们轻松构建 SSR（服务端渲染）和 CSR（客户端渲染）应用。它在 React 的基础上提供了许多有用的功能，例如自动代码分割、静态文件服务、CSS 模块化等。
在本文中，我们将介绍如何使用 Next.js 构建多页面 SSR/CSR 应用。我们将从头开始创建一个简单的 Next.js 应用，并使用多个页面来演示 SSR 和 CSR 的不同之处。
准备工作
首先，我们需要安装 Node.js 和 npm。可以在 Node.js 官网（https://nodejs.org/）上下载安装包并安装。安装完成后，打开终端并输入以下命令来验证安装是否成功：
node -v npm -v
接下来，我们需要创建一个新的 Next.js 应用。可以使用 npx 命令创建一个新的 Next.js 应用：
npx create-next-app my-app cd my-app npm run dev
这将创建一个名为 my-app 的新 Next.js 应用，并启动开发服务器。现在可以在浏览器中打开 http://localhost:3000/，查看应用是否正常运行。
创建多个页面
默认情况下，Next.js 应用只有一个页面（即/pages/index.js）。要创建更多页面，我们需要在/pages目录下创建新的 .js 文件。例如，我们可以创建一个名为 /pages/about.js 的新页面：
function About() {
return <h1>About Page</h1>
}
export default About现在可以在浏览器中打开 http://localhost:3000/about，查看新页面是否正常运行。
实现 SSR 和 CSR
默认情况下，Next.js 应用使用 SSR 来渲染页面。这意味着服务器将在每个页面请求时生成 HTML，并将其发送回浏览器。这样可以提高页面的加载速度和 SEO。
但是，有时我们可能需要使用 CSR 来渲染页面。例如，当页面需要动态更新时，使用 CSR 更加方便。在 Next.js 中，我们可以使用<link />组件来实现 SSR 和 CSR。
<link />组件是 Next.js 提供的一种特殊的链接组件，它可以根据需要自动切换 SSR 和 CSR。例如，我们可以在/about页面中添加一个<link />组件：-- -------------------- ---- -------
------ ---- ---- -----------
-------- ------- -
------ -
--
--------- ---------
----- ---------
-----------
-------
---
-
-
------ ------- -----现在，当用户点击“Home”链接时，Next.js 将自动切换到 CSR 模式，并使用客户端路由来加载主页。这意味着页面不会重新加载，而是使用 CSR 更新。
路由参数
在 Next.js 中，我们可以使用动态路由参数来创建动态页面。例如，我们可以创建一个名为 /pages/post/[id].js 的新页面，它将根据不同的 id 参数显示不同的内容。
-- -------------------- ---- ------- ------ - --------- - ---- ------------- -------- ------ - ----- ------ - ----------- ----- - -- - - ------------ ------ -------- --------- - ------ ------- ----
现在可以在浏览器中打开 http://localhost:3000/post/1，查看新页面是否正常运行。
总结
在本文中，我们介绍了如何使用 Next.js 构建多页面 SSR/CSR 应用。我们从头开始创建了一个简单的 Next.js 应用，并使用多个页面来演示 SSR 和 CSR 的不同之处。我们还介绍了如何使用<link />组件来实现 SSR 和 CSR，以及如何使用动态路由参数创建动态页面。
Next.js 是一个非常强大的 React 应用的服务端渲染框架，它可以帮助我们轻松构建 SSR 和 CSR 应用。希望本文对你有所帮助，让你更好地了解 Next.js。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6607acc0d10417a22264400c