[JavaScript知识库]react- 服务端渲染 - Gatsby

1.什么是Gatsby以及静态应用的优势

Gatsby是一个基于react的静态站点html生成器
官网： https://www.gatsbyjs.cn/

解决单页应用的2大问题。

• 静态应用的优势

1. 访问速度快
2. 更利于 SEO 搜索引擎的内容抓取
3. 部署简单

• Gatsby 总览

1. 基于 React 和 GraphQL, 结合了 webpack, babel, react-router 等前端领域中最先进工具，开发人员开发体验好；
2. 采用数据层和UI层分离而不失 SEO 的现代前端开发模式.对SEO非常友好；
3. 数据预读取，在浏览器空闲的时候预先读取链接对应的页面内容.使静态页面拥有 SPA 应用的用户体验，用户体验好；
4. 数据来源多样化: Headless CMS, markdown, API;
5. 功能插件化， Gatsby 中提供了丰富且功能强大的各种类型的插件，用什么装什么

2.创建Gatsby项目

1. 全局安装脚手架工具

npm install gatsby-cli -g

2. 创建项目
   创建: gatsby new project-name https://github.com/gatsbyjs/gatsby-starter-hello-world
   启动: gatsby develop 或 npm start
   访问: localhost:8000

3.基于文件的路由系统

Gatsby 框架内置基于文件的路由系统，页面组件被放置在 src/pages/ 文件夹中。