随着单页应用越来越流行，前端渲染已经成为了主流，然而前端渲染也存在一些弊端，比如 SEO 不友好、首屏渲染慢等问题。为了解决这些问题，服务器端渲染应运而生。在 Node.js 服务器端渲染技术中，Next.js 是最为著名的一种技术方案。
Next.js 是一个基于 React 的服务器端渲染框架，它的目标是使得 React 应用开发变得更加简单。使用 Next.js 可以帮助我们快速构建出一个支持服务器端渲染的 React 应用。那么，Next.js 是如何实现真正的服务器端渲染的呢？
什么是服务器端渲染
首先，我们需要了解什么是服务器端渲染。常规的前端渲染是指将组件等元素在浏览器中渲染，然后呈现给用户。而服务器端渲染则是指首先将这些元素在服务器端进行渲染，随后将生成的 HTML 直接返回给浏览器，这样可以减轻浏览器的压力，也使得搜索引擎更易于抓取页面内容进行 SEO。
Next.js 的服务器端渲染
Next.js 支持预渲染和动态渲染两种服务器端渲染方式。其实现原理是在服务器端将 React 组件渲染成 HTML 字符串，然后将生成的 HTML 模板返回给客户端。
预渲染
预渲染是指在构建时生成 HTML 页面，因此每个页面只需要在服务器端渲染一次。这种方式是比较适用于静态站点或内容不频繁变化的页面。下面是一个简单的示例代码：
-- -------------------- ---- -------
-- --------------
-------- ----------- -
------ ---------- ------------------
-
------ ----- -------- ---------------- -
------ -
------ -
----- -------
-
-
-
------ ------- ----这段代码定义了一个 Home 页面组件，然后通过 getStaticProps 函数获取数据并传入组件中。在构建时，Next.js 会首先去执行 getStaticProps 函数，然后将生成的组件及其数据渲染成 HTML 页面。这样，当用户访问该页面时，Next.js 直接返回已经预渲染好的 HTML 页面，加快了首屏渲染速度。
动态渲染
动态渲染是指在每次访问页面时生成对应的 HTML。这种方式适用于需要根据用户请求动态生成不同内容的页面。下面是一个简单的示例代码：
-- -------------------- ---- -------
-- -------------
-------- -------------- -
------ ---------- ------------------
-
------ ----- -------- --------------------------- -
----- - -- - - -------------
----- --- - ----- -----------------------------------------------
----- ---- - ----- ----------
------ -
------ -
----- ---------
-
-
-
------ ------- -------上面的示例代码定义了一个 Profile 页面组件，并通过 getServerSideProps 函数获取用户的数据并传入组件中。在每次用户访问该页面时，Next.js 会去执行 getServerSideProps 函数，然后将生成的组件及其数据渲染成 HTML 页面，最终返回给用户。
总结
通过上面的介绍，我们可以看到 Next.js 实现服务器端渲染的方式非常简单而且实用。使用 Next.js 可以帮助我们快速构建出一个支持服务器端渲染的 React 应用，让应用在 SEO、首屏渲染速度等方面得到更好的表现。如果你正在构建一个需要服务器端渲染的应用，那么可以考虑使用 Next.js。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64c7b08f5ad90b6d04116a31