前言
在前后端分离架构中，前端负责页面渲染和用户交互，后端负责数据处理和接口提供。而 SSR（Server-Side Rendering，服务器端渲染）则是将页面的 HTML、CSS 和 JavaScript 等资源在服务器端预先渲染好，减轻客户端的渲染负担，提升页面的性能表现。
Next.js 是一个基于 React 的 SSR 框架，它通过生成静态 HTML 文件和对比客户端和服务端渲染结果，选择性地将资源优化和交换来提高性能和用户体验。Next.js 还提供了一些可选的功能，如代码分离和静态优化，使得开发更方便、快捷和高效。Next.js 的使用不仅仅限于 SSR，它还能作为 SPA（Single-Page Application，单页面应用）的开发框架。
本文将介绍 Next.js 如何实现简单的 SSR 渲染过程，适合刚接触 Next.js 的前端开发人员参考学习。
准备工作
- Node.js 环境
- React 和 Next.js 的基本知识
如何实现 SSR
在 Next.js 中实现 SSR，我们需要创建一个 pages 目录，里面存放项目中的所有可访问页面，如 index.js 或 about.js 等，这些页面将作为我们的路由组件。Next.js 可以自动生成动态路由，比如 pages/post/[id].js 可以匹配 /post/1、/post/2 这样的路由。
每个页面都需要一个 getInitialProps 函数，这个函数会在页面渲染之前被执行，将结果作为页面属性传递，以便在客户端和服务器端都能访问到。在这个函数中，我们可以进行数据获取和处理的操作，类似于 React 组件中的 constructor 或 componentDidMount 方法。
在 pages 目录下面创建一个 index.js 文件，写如下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ---------------------
----- ----- - -- ----- -- -- -
--
----------- --- ---------
---------- -----------------
----
--------------- -- -
--- --------------
-- ------------------------------------ -------------------------
-----
---
-----
---
--
--------------------- - ----- -- -- -
----- --- - ----- ---------------------------------------------------------------------------------------
----- ---- - ----- -----------
------ - ------ ---------- --
--
------ ------- ------在这个例子里面，我们使用了 GitHub API 获取了 JavaScript 相关的热门仓库，并将这些数据以列表形式展示在页面中。
我们看到，getInitialProps 函数返回的对象有一个名为 stars 的属性，在页面渲染时，我们通过 ({ stars }) 语法将这个属性传入了页面组件中，并展示了它的数据。
为了让数据能在服务器端被渲染，我们需要使用 ReactDomServer.renderToString 将页面组件渲染成 HTML 字符串，返回给客户端。客户端可以接收到这个 HTML 字符串，并在 DOM 加载完成后将其转换成可操作的 React 组件。
Next.js 将页面组件捆绑在 React.createElement 函数中，并将其作为 props 传入自定义的 _document 文件中的 Main 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- - ----- ----- ----- ---------- - ---- ----------------
----- ---------- ------- -------- -
------ ----- -------------------- -
----- ------------ - ----- ------------------------------
------ - --------------- --
-
-------- -
------ -
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
-------------- --- ------------
-------
------
----- --
----------- --
-------
-------
--
-
-
------ ------- -----------在 pages/_app.js 文件中，我们可以配置好业务组件之间的 CSS 和 JavaScript 文件依赖关系：
-- -------------------- ---- -------
------ --- ---- -----------
------ -----------------------
------ ------- ----- ----- ------- --- -
------ ----- ----------------- ---------- --- -- -
----- --------- - ------------------------- - ----- ------------------------------ - ---
------ - --------- --
-
-------- -
----- - ---------- --------- - - -----------
------ ---------- -------------- ---
-
-其中 global.css 是全局样式文件，App 是 Next.js 内置的封装类，返回一个基本的 HTML 模板，从而方便我们进行业务开发。
代码分离
Next.js 的另一个亮点是代码分离（Code Splitting），这可以帮助我们通过动态加载页面组件而减少初始渲染时间。Next.js 提供了 dynamic 方法来使您能够根据需要加载组件。
示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- --------------
------ ------- ---- ---------------
----- ---------------- - ---------- -- -------------------------------
----- ----- - -- -- -
----- ------ - ------------
----- ----------- - -- -- -
-----------------
--
------ -
---- ------------------
----------------- --
------- ------------------------ -------------
------
--
--
------ ------- ------DynamicComponent 将被延迟加载，只有当它需要渲染时才会被加载。当然，也可以通过设置组件的 ssr 属性来避免此行为。
总结
在本文中，我们介绍了如何通过 Next.js 实现简单的 SSR 渲染过程，以及 Next.js 的代码分离功能。无论是应用于工作还是个人项目，Next.js 的学习都是非常有益的。我们希望通过这篇文章给读者带来指导和启示，帮助读者了解 Next.js 并实践它的一些基本功能，进而掌握更高深的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c71a1a10032fedd3907f03