构建时预渲染 SSG
2.0.0
icejs 提供构建时预渲染方案,即在构建时渲染页面组件并生成静态的 HTML 文件,以更好解决以下的业务场景:
- 静态站点生成
- 没有后端服务的场景下需要更好的 SEO 和更少的首屏渲染时间
#
开启预渲染在工程配置文件 build.json
中开启:
假如现在有以下的目录结构:
对应的路由配置如下:
执行 npm run build
,将会得到以下构建产物:
通过静态服务启动,预渲染后的 HTML 截图如下:
与 SSR 一致,SSG 在构建渲染时会调用 app.getInitialData()
和 Page.getInitialData()
方法,可以参考 SSR 文档在这两个方法里按需获取一些动态数据。
#
部署#
使用静态资源服务器如果是博客、官网等页面数据较为静态的应用,可以直接使用 Nginx、OSS、GitHub Pages 等进行部署,以 Nginx 部署为例:
#
进阶用法#
预渲染动态路由预渲染默认不渲染动态路由里的所有页面,比如下方的 /project/:id
路由:
如果需要渲染动态路由中的页面,可以配置页面组件的 getStaticPaths()
属性:
执行 npm run build
后,将会得到以下的构建产物: