react seo 优化_使用React + Next.JS设计可定制的，SEO优化的个人网站

react seo 优化

For the past couple of years, my personal website has been hosted on a Heroku free dyno. It was Node.JS with an Express backend and a EJS front-end. It worked well for the most part, but there were several downsides.

在过去的几年中，我的个人网站托管在Heroku免费dyno上。 是带有Express后端和EJS前端的Node.JS。 在大多数情况下，它运行良好，但存在一些缺点。

1. After 30 minutes of no use, my dyno would go to sleep, leading to high load times since the server needed to restart
   在闲置30分钟后，我的dyno会进入睡眠状态，由于需要重新启动服务器，因此导致加载时间较长
2. Any content changes required redeploying the site
   任何内容更改都需要重新部署网站
3. An Express backend is overkill since its only purpose was to route users to each page
   Express后端过大，因为它的唯一目的是将用户引导到每个页面

While none of these issues are earth-shattering, it was definitely a sub-optimal setup, particularly since slow loading time is a bad user-experience and results in poor SEO.

尽管这些问题都不是惊天动地，但绝对不是最佳选择，特别是因为加载时间慢会给用户带来不良体验，并导致SEO下降。

Issues 1 and 3 are easily solved by migrating the site to a static hosting solution (i.e get rid of the Node.JS server and serve raw HTML, CSS, and Javascript). Issue 2, however, would require some kind of backend to fix because the site data would have to be hosted somewhere other than my codebase.

通过将站点迁移到静态托管解决方案，即可轻松解决问题1和3(即摆脱Node.JS服务器并提供原始HTML，CSS和Javascript)。 但是，问题2将需要某种后端修复，因为站点数据必须托管在我的代码库之外的其他位置。

At first glance, these seem counter to each other. This is where React comes in.

乍一看，这些似乎是相互对立的。 这就是React的来历。

React.JS (React.JS)

React is an increasingly popular JS framework which makes it easy to build dynamic webpages that run entirely on the client. With React, I can host my data in an outside database and fetch it on the client-side after the user requests the page. Since all the logic is client-side, I can serve static files, eliminating my backend.

React是一个越来越流行的JS框架，它使构建完全在客户端上运行的动态网页变得容易。 借助React，我可以将数据托管在外部数据库中，并在用户请求页面后在客户端获取数据。 由于所有逻辑都在客户端，因此我可以提供静态文件，而无需使用后端。

React was particularly appealing because of its component-based approach to development. There are an incredible number of components from the web ready to be imported. It’s also simple to create and style your own components. This makes development time significantly easier since I could import complicated components (like timelines) rather than spend time making them myself. It was also helpful in making sure my design was consistent across the site since all I had to do was reuse the same components.

由于基于组件的开发方法，React特别吸引人。 Web上有大量组件可供导入。 创建和设置自己的组件也很简单。 因为我可以导入复杂的组件(如时间表)，而不是花时间自己制作它们，所以这使开发时间变得非常容易。 由于我要做的就是重复使用相同的组件，因此有助于确保整个站点的设计都一致。

There is, however, one huge downside to React: SEO.

然而，React有一个巨大的缺点：SEO。

搜索引擎和SEO (Search Engines and SEO)

SEO is incredibly important for a personal website because when somebody searches your name, you want your site to be the first one they see. The way search engines like Google determine which site to show the user is by indexing your site.

SEO对个人网站非常重要，因为当有人搜索您的名字时，您希望您的网站成为他们看到的第一个网站。 像Google这样的搜索引擎通过索引您的网站来确定向用户显示哪个网站。

During indexing, Google’s bots download your webpage and crawl through the content. They look at the images, links, text, and metadata on the site in order to extract keywords and determine what type of site it is. They use this predict what kinds of queries the site will be relevant to. Site responsiveness (this is where my initial Heroku site was lacking), keywords, in-going and outgoing links are all important parts of the indexing process.

在建立索引期间，Google的漫游器会下载您的网页并抓取内容。 他们查看网站上的图像，链接，文本和元数据，以便提取关键字并确定网站的类型。 他们使用此功能预测该网站将与哪些查询相关。 网站响应能力(这是我最初的Heroku网站所缺少的地方)，关键字，传入和传出链接都是索引编制过程中的重要部分。

Why is React bad for SEO? Javascript. Bots have a much easier time parsing HTML than they do code. The way React generally works is that a nearly empty HTML file is served to the user along with Javascript and css. The Javascript attaches itself to the DOM and “hydrates” it with the site content. What this means is that in order for indexing bots to parse the webpage, they have to render the Javascript (See how they do it).

为什么React对SEO不利？ Javascript。 与代码相比，Bot解析HTML的时间要容易得多。 React通常的工作方式是将几乎空HTML文件与Javascript和CSS一起提供给用户。 Javascript将自身附加到DOM并与站点内容“混合”。 这意味着，为了使索引索引机器人能够解析网页，他们必须呈现Javascript( 请参阅如何做到 )。

This, of course, assumes the bot indexing the page knows how to render Javascript and that the Javascript works with no errors. Not to mention, the time it takes to index (i.e load speed) also negatively impacts the site’s ranking.

当然，这假定为该页面编制索引的漫游器知道如何呈现Javascript，并且Javascript可以正常工作。 更不用说，建立索引所需的时间(即加载速度)也对网站的排名产生负面影响。

The solution to this: compiling the site at build time into HTML, using Javascript for interactivity. That’s where Next.js comes in.

解决方案：在构建时将网站编译为HTML，使用Javascript进行交互。 那就是Next.js的用武之地。

下一步 (Next.JS)

Next.JS is a React framework for pre-rendering, server-side rendering, and React-based static websites. Whereas React alone will compile all of the code into Javascript while building the site, Next.JS will compile as much Javascript as possible into HTML. In other words, the Javascript is limited to making the website responsive and dynamic whereas the HTML contains the site content. The benefit of this, of course, is that the static files I am serving have HTML for crawlers and bots to index.

Next.JS是用于预渲染，服务器端渲染和基于React的静态网站的React框架。 构建站点时，仅React一个人就可以将所有代码编译成Javascript，而Next.JS则可以将尽可能多的Javascript编译成HTML。 换句话说，JavaScript限于使网站具有响应性和动态性，而HTML包含网站内容。 当然，这样做的好处是，我提供的静态文件具有HTML可供爬网程序和机器人索引。

There is one big caveat, however. All of my data is in a database, so if I am pre-rendering the site, all my content will still be added to the site via client-side Javascript, meaning the bots would essentially be indexing an content-less site unless I pulled the data from the database during build time. But of course, pulling data at build time would make the database useless because I would still need to manually rebuild the site each time I made a content change.

但是，有一个很大的警告。 我所有的数据都存储在数据库中，因此，如果我预渲染该网站，则我的所有内容仍将通过客户端Javascript添加到该网站，这意味着除非获得我的同意，否则该漫游器实际上将为一个无内容的网站建立索引。构建期间来自数据库的数据。 但是，当然，在构建时提取数据会使数据库无用，因为每次更改内容时，我仍然需要手动重建站点。

Next.JS has a solution for this: incremental static regeneration

Next.JS为此提供了解决方案： 增量静态再生

静态渲染，SSR和增量静态再生 (Static Rendering, SSR, and Incremental Static Regeneration)

There are two traditional ways of serving websites: static rendering and server-side rendering (SSR).

服务网站的传统方式有两种：静态呈现和服务器端呈现(SSR)。

Static rendering is when all HTML is generated before the site is deployed. This is what happens when you upload an HTML file to a hosting site or use a framework like Jekyll.

静态渲染是指在部署网站之前生成所有HTML的时间。 当您将HTML文件上传到托管站点或使用诸如Jekyll之类的框架时，就会发生这种情况。

SSR is what my old website on Heroku did. The client would make a request to the server. The server would parse the request, construct the HTML, and return it to the user. Each request regenerated the HTML (disregarding caching).

SSR是我在Heroku上的旧网站所做的。 客户端将向服务器发出请求。 服务器将解析该请求，构造HTML，然后将其返回给用户。 每个请求都会重新生成HTML(不考虑缓存)。

Incremental Static Regeneration is a mix between the two of these. It’s inspired by the stale-while-revalidate (SWR) caching mechanism. With SWR, a server caches the HTML to send to the client. When the client requests the content, the cached content is delivered. Once the cache reaches its expiry limit and a new request comes in, the server rebuilds the site, still serving the dirty site until the rebuild is complete. When the rebuild finishes, the clean site is put into the cache and is ready to be served to users.

增量静态再生是这两者之间的混合。 它受过时验证(SWR)缓存机制的启发。 使用SWR，服务器可以缓存HTML以发送给客户端。 当客户端请求内容时，将传递缓存的内容。 一旦高速缓存达到其到期限制并发出新请求，服务器将重建站点，仍然为脏站点提供服务，直到重建完成。 重建完成后，将干净站点放入缓存中并准备提供给用户。

This results in zero-downtime and I can still generate static HTML with site content that automatically updates itself.

这导致停机时间为零，我仍然可以生成静态HTML，其中包含自动更新自身的网站内容。

Vercel (Vercel)

With React + Next.JS as my stack, the only thing left is hosting. Since Next.JS requires a server, static options like Github Pages or Firebase hosting won’t work. Heroku also wouldn’t work because of the downtime issue. As the creators of Next.js, Vercel was the obvious choice because they have built-in support and optimization for it.

以React + Next.JS作为我的堆栈，剩下的就是托管。 由于Next.JS需要服务器，因此静态选项(如Github Pages或Firebase托管)将不起作用。 由于停机时间问题，Heroku也无法正常工作。 作为Next.js的创建者， Vercel是显而易见的选择，因为他们具有内置的支持和优化功能。

On Vercel, you can host Next.JS sites entirely for free. On top of this you get SSL encryption, asset compression, cache invalidation, and CDNs to deliver all the static assets for the site. What this does is make the website scalable, fast, and always update-to-date.

在Vercel上，您可以完全免费托管Next.JS网站。 最重要的是，您可以获得SSL加密，资产压缩，缓存无效和CDN，以为站点交付所有静态资产。 这是使网站可扩展，快速且始终保持最新状态。

数据库 (The Database)

The last piece of this stack is the Database. I’ve deliberately left this to the end because as the “backend” of my website, the frontend is entirely agnostic to where the data is stored so long as the format is the same. In other words, it makes no difference from a user-experience perspective, but it makes a huge difference from a maintenance and developer-experience perspective.

该堆栈的最后一部分是数据库。 我故意将其保留到最后，因为作为我网站的“后端”，只要格式相同，前端就完全不知道数据的存储位置。 换句话说，从用户体验的角度来看并没有什么区别，但是从维护和开发人员的体验角度来看却有很大的区别。

Rather than going for something flexible like Firebase, I decided to use Airtable. Airtable is a powerful spreadsheet alternative. With an intuitive GUI and simple API, it’s the perfect content-management system (CMS). Although its more limiting than Firebase, using Firebase would require either building a GUI or dealing with the Firebase GUI (which is not meant for manually editing the database).

我决定使用Airtable ，而不是像Firebase这样灵活的东西。 Airtable是功能强大的电子表格替代品。 凭借直观的GUI和简单的API，它是完美的内容管理系统(CMS)。 尽管与Firebase相比，限制更大，但使用Firebase则需要构建GUI或处理Firebase GUI(这并不意味着要手动编辑数据库)。

Airtable makes it easy to quickly add and remove content from the site. Its API provides JSON for Next.JS to use while pre-rendering, meaning I could always migrate to a different database in the future. Another huge benefit is Airtable’s rich text field support which allows me to inject and render arbitrary markdown into designated locations and render it as pure HTML. In other words, it fit my requirements perfectly.

通过Airtable，可以轻松快速地在网站中添加和删除内容。 它的API提供了供Next.JS在预渲染时使用的JSON，这意味着将来我总是可以迁移到其他数据库。 另一个巨大的好处是Airtable的富文本字段支持，它使我可以将任意markdown注入并呈现到指定位置，并将其呈现为纯HTML。 换句话说，它完全符合我的要求。

摘要 (Summary)

Clearly migrating from one type of website to another is a significant amount of work. So just to recap, what did I gain from all of this?

显然，从一种类型的网站迁移到另一种类型的网站需要大量工作。 因此，回顾一下，我从这一切中学到了什么？

1. Free hosting with zero down-time
   免费托管，零停机时间
2. Automatic website updates (except for structural changes or new images)
   网站自动更新(结构更改或新图像除外)
3. CDN delivery
   CDN传送
4. An easy-to-use CMS GUI
   易于使用的CMS GUI
5. SEO Optimization
   SEO优化
6. Asset compression, SSL, Scalability, etc
   资产压缩，SSL，可伸缩性等

Overall, it was worth the effort. You can check out my site at anmolparande.com to see what the end result looks like. Thanks for reading!

总的来说，值得付出努力。 您可以在anmolparande.com上查看我的网站，以查看最终结果。 谢谢阅读！

翻译自: https://medium.com/swlh/designing-a-customizable-seo-optimized-personal-website-with-react-next-js-19c56fac75fd

react seo 优化