在进行前端开发时，搜索引擎优化（SEO）是一个值得关注的重要话题。随着 Next.js 的流行，新的问题也随之出现。本文将介绍在 Next.js 开发中遇到的主要 SEO 问题，并提供解决方案。
问题1：请求页面时无法获取数据
Next.js 的默认行为是使用服务端渲染（SSR）返回静态 HTML，这些 HTML 中没有 JavaScript。当页面需要新数据时，Next.js 会使用客户端渲染（CSR）在浏览器中生成新的 HTML。然而，由于搜索引擎爬虫没有 JavaScript 引擎，因此它们无法获取 CSR 页面上的数据。
解决方案
为了使搜索引擎能够看到全面的页面内容，我们可以使用服务器端生成的数据来填充 CSR 页面。具体的解决方案是将特定的数据提取到静态 HTML 中，然后在 CSR 加载时获取它们，并在页面中插入数据。
这是一个例子：
------ - --------- --------- - ---- --------
-------- -------- ---- -- -
----- -------- ---------- - ---------------
------------ -- -
----- -------- ----------- -
----- -------- - ----- -------------------
----- ------- - ----- ----------------
-------------------
-
------------
-- ----
------ -
-----
-----------------------
-----------------------
------
--
-
------ ----- -------- ---------------- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
------ -
------ - ---- --
--
-使用 getStaticProps 从服务器端获取数据，并在页面中使用 useState 和 useEffect 显示新的数据。这将使得搜索引擎能够看到全面的内容，并提高 SEO 的评估。
问题2：使用动态路由时无法预渲染页面
在使用 Next.js 的动态路由时，SEO 问题会更加明显。这是因为 Next.js 是静态预渲染（SSG）动态路由，无法像其他静态页面一样预渲染。这意味着页面的所有内容都需要在 CSR 时在浏览器中生成，这将导致 SEO 问题。
解决方案
为了解决这个问题，我们可以使用以下两种方法：
方法1：使用动态 getServerSideProps 方法
使用动态 getServerSideProps 方法会在每个请求时渲染页面。这将使得每个页面都能够在服务器端渲染，从而解决 SEO 问题。以下是一个例子：
------ ----- -------- -------------------- ------ -- -
----- - ---- - - -------
----- -------- - ----- ----------------
----- ---- - ----- ----------------
------ - ------ - ---- - --
-
------ ------- -------- ------ ---- -- -
------ -
-----
---------------------
---------------------
------
--
-使用 getServerSideProps 方法从服务器端获取数据，并在页面中加以使用。虽然这种方式可以解决 SEO 问题，但它会使得每个页面的加载速度减缓。
方法2：使用无渲染方式预渲染
使用无渲染方式预渲染将所有数据和 HTML 都预处理好，并将其放在静态文件中。这将使得页面请求文件时立即加载，解决了加载速度减缓的问题。以下是一个例子：
------ ----- -------- ---------------- -
----- -------- - ----- --------------------------------------
----- ----- - ----- ----------------
----- ----- - ---------------- -- --
------- - --- ------- --
----
------ -
------
--------- -----
--
-
------ ----- -------- ---------------- ------ -- -
----- - -- - - -------
----- -------- - ----- --------------
----- ---- - ----- ----------------
------ -
------ - ---- --
----------- ---
--
-
------ ------- -------- ------ ---- -- -
-- ------- -
------ ----------------------
-
------ -
-----
---------------------
---------------------
------
--
-使用 getStaticPaths 方法获取数据并渲染静态页面，并使用 getStaticProps 获取动态数据。当页面首次加载时，它会在客户端上预处理，以后则会从静态文件中加载。
结论
使用 Next.js 开发时，SEO 问题是我们需要注意的一个方面。我们需要使用一些技巧，如在 CSR 加载时填充静态 HTML 中的数据、使用 getServerSideProps 或使用无渲染方式预渲染，来解决这些问题。只要我们遵守 SEO 最佳实践，我们就可以轻松地使搜索引擎更好地评估我们的页面。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6722f6812e7021665e0d9cf3