在现代 Web 开发中，我们经常需要选择一种开发方式来满足项目需求。传统的 server-rendered 方式是指服务器端渲染，在请求页面时，在服务器端生成完整的 HTML 内容，然后将其传回到客户端显示。现代的 static-rendered 方式是指预渲染，在构建时生成静态 HTML 文件并在请求时直接传回客户端显示。两种方式各有优缺点，对于不同的需求有着不同的适用情况。
Next.js 是一个基于 React 的轻量级框架，它提供了一种既支持传统的 server-rendered 方式，又支持现代的 static-rendered 方式的解决方案。
Next.js 的解决方案
Next.js 的解决方案可以分为两种情况：
- 在开发阶段，使用 server-rendered 方式，方便开发人员进行调试和测试。
- 在生产阶段，使用 static-rendered 方式，提高性能和用户体验。
开发阶段
在开发阶段，我们可以利用 Next.js 的 server-rendered 功能来方便地进行调试和测试。我们可以在 pages 目录下创建 .js 或 .jsx 文件，这些文件将自动映射为路由，因此我们不需要手动创建路由映射。
// pages/index.js
export default function Home() {
return (
<div>
<h1>Hello, Next.js!</h1>
</div>
)
}在上面的示例中，我们创建了一个简单的 React 组件，并导出为默认值。这将成为网站的首页，当我们在浏览器中访问 http://localhost:3000/ 时，将显示一个包含 "Hello, Next.js!" 的标题的页面。
Next.js 使用 Webpack 来打包应用程序，所以当我们在编辑器中编辑代码时，Next.js 将自动重新编译并更新页面以显示最新更改。这使得开发过程变得更加高效。
生产阶段
在生产阶段，Next.js 提供了两种静态文件生成的机制：
- 预渲染 (Pre-rendering)
- 客户端渲染 (Client-side rendering)
预渲染
预渲染是指在构建时生成静态 HTML 文件，然后在运行时直接将其传递给客户端以显示。Next.js 提供了两种预渲染模式：静态生成 (Static Generation) 和服务器端渲染 (Server-side Rendering)。静态生成适用于不需要经常变化的页面，而服务器端渲染适用于需要长时间渲染的页面。
静态生成
静态生成可以优化性能并加快网站的速度。我们可以使用 Next.js 提供的 getStaticProps 函数在构建时生成静态 HTML 文件。
-- -------------------- ---- -------
-- -------------------
------ ----- -------- ---------------- -
-- ----- - ---- -- -----
----- --- - ----- ---------------------------------------------------
----- ----- - ----- ----------
-- --- --- ----- -- ---- -- ---------- ----- -- -----
----- ----- - ---------------- -- --
------- - --- ------------------ --
---
-- ----- ---------- ---- ----- ----- -- ----- -----
-- - --------- ----- - ----- ----- ------ ------ ----
------ - ------ --------- ----- -
-
------ ----- -------- ---------------- ------ -- -
-- ----- --------- ---- --- --- ---- ---- ----- ---------
----- --- - ----- ----------------------------------------------------------------
----- ---- - ----- ----------
-- ---- ---- ---- -- --- ---- --- -----
------ - ------ - ---- - -
-
------ ------- -------- ------ ---- -- -
------ -
-----
---------------------
------------------
------
-
-在上面的示例中，我们使用 getStaticPaths 和 getStaticProps 函数来生成静态 HTML 文件。getStaticPaths 函数用于生成路由参数列表，而 getStaticProps 则用于根据参数获取所需数据，并将其作为 props 传递给组件。
服务器端渲染
服务器端渲染是一种动态渲染，可以根据每个请求的上下文来生成 HTML。Next.js 提供了一个 getServerSideProps 函数，该函数将在每次请求时运行，并为每个请求动态生成 HTML。
-- -------------------- ---- -------
-- ----------------
------ ----- -------- --------------------------- -
----- - -- - - -------------
-- ----- --- ---- ---- -------- ---
----- --- - ----- ---------------------------------------------------------
----- ---- - ----- ----------
-- ---- ---- -- --- ---- --- -----
------ - ------ - ---- - -
-
------ ------- -------- --------- ---- -- -
------ -
-----
---------------------
------------------ - ----- -- ---------- - ----- -- ----------------
------
-
-在上面的示例中，我们定义了一个 getServerSideProps 函数来动态生成 HTML。getServerSideProps 函数根据每个请求的 context 上下文提取参数，并从外部 API 获取所需数据，将数据作为 props 传递给组件。
客户端渲染
客户端渲染是指在浏览器中使用 JavaScript 渲染 HTML 的方式。有时，我们需要在客户端渲染中更新某些数据。在这种情况下，我们可以使用 React 的 useState 和 useEffect 钩子来管理状态。
-- -------------------- ---- -------
-- --------------
------ - --------- --------- - ---- -------
------ ------- -------- ------- -
----- ------- --------- - -----------
------------ -- -
-------------- - ------- ---------
-- --------
------ -
-----
---------- ------------
------- ----------- -- -------------- - ----------------------
------- ----------- -- -------------- - ----------------------
------
-
-在上面的示例中，我们使用 useState 钩子来定义一个状态 count，并使用两个按钮增加或减少该计数器。我们还使用 useEffect 钩子来更新浏览器标签页的标题，以便显示计数器的值。
结论
Next.js 提供了一种既支持传统的 server-rendered 方式，又支持现代的 static-rendered 方式的解决方案。这种灵活的方案使得我们能够快速构建出复杂的 web 应用程序，并为用户提供高性能和优质的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675183ba8bd460d3ad8a573c