如何构建React同构模板，实现长尾词的SEO优化？
- 内容介绍
- 文章标签
- 相关推荐
本文共计2812个文字，预计阅读时间需要12分钟。
开始学习学服务端渲染，脑海中第一个浮现出来的就是next.js这种成熟的方案。看了两天，有趣，优雅，封装得好，但原理不太清晰，感觉无法灵活地嵌入到老项目中。
一开始想学学服务端渲染，脑海中第一个浮现出来的就是next.js这种成熟的方案。看了一两天，有趣，优雅，但是封装好了，原理不甚清楚，也感觉无法灵活嵌合到老项目上去。于是看各种资料，想整理出同构的线索，一步一步地实现自己的同构模板。相关代码可查看我的GitHub。感谢阅读！！
TODO List
- 数据：如何保持前后端应用状态一致
- 路由：路由在服务端和客户端中的匹配方案
- 代码：同构，哪些地方可以共享，哪些地方需要差异化
- 静态资源：服务端如何引入css/图片等
- ssr直出资源：服务端在渲染路由页面时如何匹配css/chunks资源
- 打包方案：服务端和浏览器端如何写各自的webpack配置文件
- SEO: head头处理方案
同构的基础
正常的网页运行，需要生成dom，在dom树loaded之后由js绑定相关的dom事件，监听页面的交互。服务端并不具备dom的执行环境，因而所有的服务端渲染其实都是返回了一个填充了初始数据的静态文本。在react中，除了常用的render这个用于生成dom的方法，还提供了renderToString，renderToStaticMarkup方法用来生成字符串，由于VitualDOM的存在，结合这些方法就可以像以前的字符串模板那样生成普通的字符串，返回给客户端接管，再接着进行事件相关的绑定。
本文共计2812个文字，预计阅读时间需要12分钟。
开始学习学服务端渲染，脑海中第一个浮现出来的就是next.js这种成熟的方案。看了两天，有趣，优雅，封装得好，但原理不太清晰，感觉无法灵活地嵌入到老项目中。
一开始想学学服务端渲染，脑海中第一个浮现出来的就是next.js这种成熟的方案。看了一两天，有趣，优雅，但是封装好了，原理不甚清楚，也感觉无法灵活嵌合到老项目上去。于是看各种资料，想整理出同构的线索，一步一步地实现自己的同构模板。相关代码可查看我的GitHub。感谢阅读！！
TODO List
- 数据：如何保持前后端应用状态一致
- 路由：路由在服务端和客户端中的匹配方案
- 代码：同构，哪些地方可以共享，哪些地方需要差异化
- 静态资源：服务端如何引入css/图片等
- ssr直出资源：服务端在渲染路由页面时如何匹配css/chunks资源
- 打包方案：服务端和浏览器端如何写各自的webpack配置文件
- SEO: head头处理方案
同构的基础
正常的网页运行，需要生成dom，在dom树loaded之后由js绑定相关的dom事件，监听页面的交互。服务端并不具备dom的执行环境，因而所有的服务端渲染其实都是返回了一个填充了初始数据的静态文本。在react中，除了常用的render这个用于生成dom的方法，还提供了renderToString，renderToStaticMarkup方法用来生成字符串，由于VitualDOM的存在，结合这些方法就可以像以前的字符串模板那样生成普通的字符串，返回给客户端接管，再接着进行事件相关的绑定。