什么是服务端渲染
在普通的单页面应用中，前端通过 JavaScript 动态改变页面内容，而服务端渲染则是在服务器端将页面渲染后再返回给客户端。服务端渲染具有以下优势：
更好的 SEO 效果：搜索引擎更容易读取服务端渲染的页面，从而更好地收录网站。
更快的首次展示时间：服务器端生成数据和 HTML，节省客户端不必要的操作，提高首次加载速度。
更好的用户体验：客户端在加载 JavaScript 和数据时不必等待，用户可以更快地看到页面。
Next.js 简介
Next.js 是一个 React 应用程序的服务端渲染框架，其特点包括：
支持服务端渲染和静态导出。
自带路由功能。
支持热模块更新。
支持 TypeScript。
使用 Next.js 实现服务端渲染
安装 Next.js
首先，需要在本地安装 Next.js。
--- ------- ---- ----- ---------
创建页面
创建一个 pages 文件夹，并在其中创建一个名为 index.js 的文件。在 index.js 文件中，添加以下代码：
----- ----- - -- -- -
------ -
-----
--------- ------------
------
--
--
------ ------- ------这将是我们的主页页面。
运行应用程序
使用以下命令来运行 Next.js 应用：
--- --- ---
在浏览器中访问 http://localhost:3000，应该能够看见刚才创建的页面。
实现服务端渲染
在 Next.js 中，我们可以通过创建一个 getInitialProps() 函数来实现服务端渲染。
首先，在 index.js 文件中，添加以下代码：
----- ----- - -- ---- -- -- -
------ -
-----
---------------------
------
--
--
--------------------- - ----- -- -- -
----- ---- - ----- ------------------------------------------------------------------- --
---------------
--
------ - ---- --
--
------ ------- ------在该代码中，我们向 jsonplaceholder API 发送 HTTP 请求，获取数据。然后，将数据作为 props 传递给组件。
现在，再次访问 http://localhost:3000，应该能够看到网络面板中还有服务器端渲染的请求。
静态生成
让我们尝试将 Next.js 应用程序导出为静态 HTML 文件。首先，在 package.json 文件中，添加以下脚本：
-
---------- -
-------- ----- -------
--------- ----- -------
-
-然后，在终端中执行以下命令：
--- --- ----- --- --- ------
这将使应用程序生成在 out 目录中。
SEO 优化
在此之前，我们已经通过服务端渲染提高了 SEO 的效果。然而，还有一些更好的 SEO 实践，我们可以称之为 "SEO 优化"。
网站地图 (sitemap) 和 robots.txt 文件
网站地图和 robots.txt 文件是搜索引擎优化中重要的一环。Next.js 简化了这两个文件的创建过程。
网站地图
在 pages 目录下创建 sitemap.xml.js 文件，并添加以下代码：
----- -- - --------------
----- ------- - -- -- ---
------ ----- -------- -------------------- --- -- -
----- ------- - --------------------------------------- -
--------- -------
----- ----
---
----------------------------- ------------
-------------------
----------
------ - ------ -- --
-
------ ------- --------在该文件中，我们通过 getServerSideProps 函数读取 public 文件夹中的 sitemap.xml 文件，并将其返回给浏览器。
robots.txt 文件
在 public 文件夹中创建 robots.txt 文件，并填入以下内容：
----------- - ---------
这一行代码表示允许所有网页抓取。
描述和标题
每个页面应该具有唯一的标题和描述。这通常是在 head 标签中实现的。
在 Next.js 中，我们可以直接在 _document.js 文件中定义文档头。
------ --------- - ----- ----- ----- ---------- - ---- ----------------
----- ---------- ------- -------- -
-------- -
------ -
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ------------------ ----------------- --
----------------------
-------
------
----- --
----------- --
-------
-------
--
-
-
------ ------- -----------Schema.org
Schema.org 是一种语义标记方式，在 HTML 中嵌入结构化数据，以帮助搜索引擎更好地理解网站。在 Next.js 中，我们可以使用 @next/seo 模块轻松添加结构化数据。
首先，安装 @next/seo 模块。
--- ------- ---------
然后，在 _app.js 文件中，添加以下代码：
------ - ----------- ------------- - ---- -----------
-------- ------- ---------- --------- -- -
------ -
--
-----------
------------
------------------
------------
----- ----------
---- --------------------------
------ -------
------------ -------
------- -
-
---- ---------------------------------------
---- -------
--
--
--
----------
--------- ----------------------
--
--
--------------
---------------------------------------------
-------------- ---------
---------
-----------------------------------------------
-----------------------------------------------
------------------------------------------------
--
-----------------------------------------
----------------------------------------
---------------- ------
---------------------- ---------
-------------------------------------------------------
----------------- -- - ------ ---- ----------- -- ---- ---------
--
---------- -------------- --
---
--
-
------ ------- ------链接优化
在 SEO 中，内部链接和外部链接都非常重要。内部链接可以增加页面的 PageRank，而外部链接可以提高页面的权重。同样，优化链接结构也可以为搜索引擎提供更多的上下文信息。
在 Next.js 中，我们可以使用 Link 组件来优化内部链接。
------ ---- ---- ------------
----- ------ - -- -- -
------ -
-----
----
----
----- ---------
---------
-------
-----
----
----- --------------------------------
-----
-----
------
--
--
------ ------- -------对于外部链接，我们可以使用 next/head 组件来添加 link 标签。
------ ---- ---- ------------
----- -------- - -- -- -
------ -
--
------
----- --------------- ------------------------------ --
-------
---------- -------------
---
--
--
------ ------- ---------总结
服务端渲染是提高 SEO 效果的一种有效方式，Next.js 是一个优秀的服务端渲染框架，它为我们提供了更多的 SEO 优化实践。我们可以通过添加网站地图、robots.txt 文件、标题和描述、Schema.org 数据以及优化链接来提高网站的搜索引擎排名。
希望这篇文章能帮助您了解如何通过 Next.js 框架实现服务端渲染，并提升 SEO 优化效果。如果您有任何疑问或建议，请随时与我们联系。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652fec2e7d4982a6eb12daf3