想更多地了解“ JavaScript开发人员”课程。基本的？我们邀请您参加免费的网络研讨会，课程讲师将为您提供所有问题的答案。
有几种现代的应用程序开发方法。最受欢迎的两个是单页应用程序（SPA）和服务器呈现的应用程序。
单页应用程序具有出色的性能，尽管Google搜寻器在进行一些更新后略有变化，但它们的SEO效果仍然不佳。服务器渲染使您可以更有效地优化搜索引擎的应用程序，而在这种情况下，它们的性能也很不错。
随着诸如Next和Gatsby之类的出色JavaScript框架的出现，出现了更多的服务器呈现的应用程序，因此，让我们看看为什么单页面应用程序并不总是一个好的解决方案，尤其是当您需要较高的搜索排名时。
单页应用程序有什么问题？
在确定单页应用程序和服务器端呈现之间之前，值得确定内容。
单页应用程序仅加载一个HTML页面。每次用户请求新的HTML内容时，JavaScript都会通过操作DOM元素来动态加载它。但是，如果您不必每次都加载新的HTML页面，为什么搜索引擎优化会出现问题？
问题是，搜索引擎无法正确编制索引单页应用程序，而不是服务器呈现的应用程序。单页应用程序仅加载初始HTML页面。结果，搜索引擎无法为每次更改索引使用JavaScript重新创建的内容，尽管应注意的是，单页面应用程序还具有许多其他优点：除了高性能之外，它们即使在低连接速度下也可以快速加载并且不需要高带宽。 ，在移动设备等上的性能更好；
另一方面，服务器渲染的应用程序（尤其是使用Next.js构建的应用程序）拥有出色的性能和SEO效率。
SEO（搜索引擎优化）
SEO（来自英语搜索引擎优化）是针对搜索引擎的优化，也就是说，为更改网站以吸引更多自然搜索流量而采取的措施。为了使您的网站更具吸引力和搜索引擎可访问性，请记住许多不同的SEO技术和技巧。
Next.js
Next.js是一个用于静态生成或服务器渲染的React应用程序的框架，为开发人员带来了很多可能性：创建即用型，零配置应用程序，代码拆分，导出静态HTML页面等。等
Next.js将提供高的搜索引擎优化结果，而您无需执行任何特殊的操作-您只需要创建一个应用程序即可，但是Next.js并没有通过服务器渲染来提供良好的SEO结果。
让我们以Next.js的工作方式为例。
Next.js允许您使用Create Next App结构通过一个命令创建一个应用程序：
npx create-next-app创建项目后，您会发现它与使用Create React App创建的其他模板略有不同，该应用程序中的所有页面都将存储在一个文件夹中
pages，并且每个页面都是一个React组件。
为了在应用程序内部生成新的路由，您只需要在文件夹中创建一个新文件，
pages并为其创建一个新的React组件：
// pages/about.js
const About = () => (
<div>
<h1>About page</h1>
</div>
);
export default About;注意。在您处理应用程序时，即使在早期阶段，例如使用Lighthouse服务，您也可以查看其SEO排名报告。
使用Next.js创建新应用程序非常容易。让我们看一下Next.js如何帮助您提高搜索排名并为网站带来更多自然流量。
如何使用Next.js改善SEO
使用Next.js，您可以显着改善SEO结果，但您不应忘记该应用程序的其他方面。如果您希望获得良好的SEO结果，请考虑以下事项：
元
标记元标记向搜索引擎和网站访问者提供有关您页面的数据。它们会影响页面在搜索结果页面上的显示方式，以及是否可以吸引访问者访问您的网站。元标记对用户不可见，但是对于要带到搜索引擎顶部的应用程序，这是代码中最重要的部分。
meta标签会告知搜索引擎页面上发布的内容类型，页面主题以及搜索引擎应如何显示它。
Next.js有一个内置组件，可将元标记添加到
<head>import Head from 'next/head'要在页面上插入meta标签，请使用内置组件
Head：
import Head from 'next/head'
const Example = () => {
return (
<div>
<Head>
<title>Example</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hi Next.js!</p>
</div>
)
}export default Example
内置组件
Head可避免在网站上重复元标记-如果添加key属性，则元标记将仅显示一次：
<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />您只需在页面上添加一些元标记即可提高应用程序的搜索排名。在这里，您可以阅读有关SEO的重要元标记。
现在检查您的代码以查看其中是否包含元标记，它们是否是您想要的元标记？相信我，正确的元标记是提高索引质量和推动自然流量所需要的。
生产力
用户习惯于快速加载页面，并且不准备永远等待。在开发应用程序时，请首先考虑性能。它也是搜索引擎排名的关键因素之一。
搜索引擎（尤其是Google）使用首次显示时间（主要内容涂料或FCP）作为关键性能指标FCP测量从页面开始加载到屏幕上显示第一个内容项目之间的时间。低FCP将具有较低的SEO等级。
随着Next.js，您可以解析通过创建自定义应用程序组件，并宣布一个功能FCP和LCP指标（渲染时间对于大多数的内容，最大Contentful漆）
reportWebVitals：
// pages/_app.js
export function reportWebVitals(metric) {
console.log(metric)
}在
reportWebVitals计算页面的最终指标值时将调用该函数。你可以阅读
更多关于衡量绩效Next.js这里。这是改善FCP所需的工作。
SSL证书
2014年8月，Google宣布排名时将考虑HTTPS。安全的HTTPS通信协议为将数据传输到您的站点的用户提供了额外的保护层。
为了连接HTTPS，您需要获得一个SSL证书，一个好的SSL证书可能会花费很多钱。如何使用Next.js免费获得SSL证书？
为此，需要将应用程序部署到Vercel等云平台。Vercel是Next.js背后的公司，因此集成将顺利进行。要在Vercel平台上部署Next.js，您需要安装Vercel CLI：
yarn global add vercel然后转到项目并运行命令：
vercel该项目将在Vercel上发布，并受SSL证书保护。
内容很重要
正确呈现网站访问者看到的内容非常重要。创造高质量的产品是每个开发人员的主要任务。
开发哪种应用程序（单页或服务器端呈现）取决于要显示的内容类型以及如何从客户端获得反馈。
Next.js框架是为开发服务器渲染的React应用程序而构建的，它为我们提供了出色的SEO，UX，性能等，可帮助公司和开发人员提高其站点和项目的质量并推动更多的自然搜索流量。 ...
好了，是时候进入Next.js并探索服务器端渲染应用程序的全部潜力了。它们对您和您的公司很有用，总的来说-太神奇了！我向您保证，您会感到惊讶。
结论
在本文中，我们仔细研究了Next.js框架，并了解了如何将其用于优化搜索引擎的现代应用程序。我们还掌握了一般的SEO概念，并介绍了元标记，性能，SSL证书等，这些是开发应用程序时要注意的方面。
LogRocket：完整的Web应用程序可见性
LogRocket是一项Web应用程序监视服务，可让您像浏览器中一样重复出现用户问题。现在，无需猜测错误发生的原因，也无需询问用户屏幕截图或日志转储。 LogRocket允许您重播会话并找出导致问题的原因，它适用于任何框架中的任何应用程序，并且您可以使用插件从Redux，Vuex和中添加其他上下文
@ngrx/store。
除了添加Redux动作和状态外，LogRocket还会记录控制台日志，JavaScript错误，堆栈跟踪，网络请求和带有标头和正文，浏览器元数据和自定义日志的响应。它使用DOM在页面上编写HTML和CSS，即使是最复杂的单页面应用程序，也可以按像素提供视频重播。
免费试用。
阅读更多：