• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

用了react或者vue_CSS学习

当前位置：网站建设 > 技术支持

用了react或者vue？

使用 React 或 Vue 做 SEO 优化需要借助 Nodejs 实现服务端渲染（SSR）。

而要实现服务端渲染需要先搭建一个脚手架，你可以自己从零开始搭建脚手架，但这很麻烦。最简单的就是使用开源的框架，它们一般内置就封装好了脚手架，比如基于 React 的 Next.js，和基于 Vue 的 Nuxt.js。你也可以借助开源的脚手架比如 Razzle 来实现 SSR 渲染。Razzle 是我用过的比较好用的工具，因为它灵活。下面以 React + Razzle 为例，讲讲如何做 SEO 优化（本文的示例代码放在GitHub：github.com/liamwang/react-starter）。

首先，使用 Razzle 搭建脚手架，使用如下命令安装 Razzle 并运行它：

其实以上这样简单的一步，Razzle 基本上就把大部分工作已经完成了。然后开始添加几个测试页面并配置 Router 路由。文件结构和路由配置如下图所示：

红色圈出来的部分是添加的几个示例页面，具体代码可以参照我的 GitHub 源码。这就实现了一个简单的支持服务端渲染的网站，运行效果如下：

接着，编辑 server.js 实现自定义服务端渲染逻辑。打开 server.js 文件，你会发现工具已经帮你写好了基本的服务端渲染代码，但是你可能要根据需求进行自定义，比如自定义 titile、 meta 标签。下面是一个示例：

为了利于 SEO，你可以在这里任意自定义 HTML 头标签，比如标题和和关键字等。

最后，剩下的工作基本上就和你平时写 React 代码一样，比如 Redux、Mobx、Sass 等。

有不清楚的欢迎留言交流，希望我的回答对你有帮助！

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。