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上有大量组件可供导入。 创建和设置自己的组件也很简单。 因为我可以导入复杂的组件(如时间表)࿰