From b9575d9bdab1516517bb01b1ea915b27553ee026 Mon Sep 17 00:00:00 2001 From: Diablohu Date: Thu, 25 Feb 2021 18:05:52 +0800 Subject: [PATCH] feat(core): sSR - render cache - added a parameter for ctx --- CHANGELOG.md | 6 +++++- docs/config.md | 10 ++++++---- .../server/middlewares/isomorphic/index.js | 6 ++++-- packages/koot/ReactApp/server/render-cache.js | 15 ++++++++++----- 4 files changed, 25 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b7828c751..5a5756d88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ - **新特性** - 现已支持全新的 _JSX_ 转译引擎 ([#282](https://github.com/cmux/koot/issues/282)) - 该功能对从 0.15 之前版本升级而来的项目默认关闭，如需开启请参阅[升级指南](https://koot.js.org/#/migration/0.14-to-0.15) + - 使用 `koot-cli` 创建的新项目会使用该新特性 - 相关信息请查阅 [React 官方文档](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) - **新配置项** `beforeBuild` - 生命周期方法: 打包即将开始时 ([#288](https://github.com/cmux/koot/issues/288)) - 详情请参见文档 [生命周期](https://koot.js.org/#/life-cycle?id=打包) @@ -29,7 +30,10 @@ - 详情请参见文档 [生命周期](https://koot.js.org/#/life-cycle?id=打包) - 优化 - `serviceWorker` 的 `cacheFirst` `networkFirst` `networkOnly` 扩展缓存策略选项，其数组 (`Array`) 内现在可以直接传入正则表达式和用以分析请求的函数，请参见文档 [Service Worker/扩展缓存规则](/pwa?id=扩展缓存规则) - - SPA 项目打包结果中附带的简易服务器现在支持 `serverBefore` 和 `serverAfter` 生命周期 ([#292](https://github.com/cmux/koot/issues/292)) + - SSR 项目 + - 渲染缓存的 `get` 和 `set` 方法现在均新增一个参数，值为本次请求的 _KOA Context_ ([#294](https://github.com/cmux/koot/issues/294)) + - SPA 项目 + - 打包结果中附带的简易服务器现在支持 `serverBefore` 和 `serverAfter` 生命周期 ([#292](https://github.com/cmux/koot/issues/292)) - 添加依赖包 - `cli-table` - `filesize` diff --git a/docs/config.md b/docs/config.md index 95df89414..73a20a52d 100644 --- a/docs/config.md +++ b/docs/config.md @@ -544,24 +544,26 @@ module.exports = { * 每条结果最多保存时间, 单位: 毫秒 (ms) * @property {number} [maxCount=50] * 根据 URL 保留的结果条目数 - * @property {(url)=>string|boolean} [get] + * @property {(url,ctx)=>string|boolean} [get] * 自定义缓存检查与吐出方法。存在时, maxAge 和 maxCount 设置将被忽略 * 参数 url - 请求的完整的 URL + * 参数 ctx - 本次请求的 KOA Context * 返回 false 时，表示该 URL 没有缓存结果 - * @property {(url,html)=>void} [set] + * @property {(url,html,ctx)=>void} [set] * 自定义缓存存储方法。存在时, maxAge 和 maxCount 设置将被忽略 * 参数 url - 请求的完整的 URL * 参数 html - 服务器渲染结果 + * 参数 ctx - 本次请求的 KOA Context */ renderCache: { maxAge: 5000, maxCount: 50, - get: (url) => { + get: (url, ctx) => { // 自实现的缓存结果获取逻辑 // return false return '完整渲染结果'; }, - set: (url, html) => { + set: (url, html, ctx) => { // 自实现的缓存结果存储逻辑 }, }, diff --git a/packages/koot/ReactApp/server/middlewares/isomorphic/index.js b/packages/koot/ReactApp/server/middlewares/isomorphic/index.js index 068f9f55c..93557ad11 100644 --- a/packages/koot/ReactApp/server/middlewares/isomorphic/index.js +++ b/packages/koot/ReactApp/server/middlewares/isomorphic/index.js @@ -151,7 +151,9 @@ const middlewareIsomorphic = (options = {}) => { const thisRenderCache = renderCacheMap ? renderCacheMap.get(LocaleId) : undefined; - const cached = thisRenderCache ? thisRenderCache.get(url) : false; + const cached = thisRenderCache + ? thisRenderCache.get(url, ctx) + : false; if (!__DEV__ && cached !== false) { ctx.body = cached; renderComplete(); @@ -255,7 +257,7 @@ const middlewareIsomorphic = (options = {}) => { if (result.body) { // HTML 结果暂存入缓存 - if (thisRenderCache) thisRenderCache.set(url, result.body); + if (thisRenderCache) thisRenderCache.set(url, result.body, ctx); ctx.body = result.body; renderComplete(); return; diff --git a/packages/koot/ReactApp/server/render-cache.js b/packages/koot/ReactApp/server/render-cache.js index d8cc3cd6a..8cc26c6e1 100644 --- a/packages/koot/ReactApp/server/render-cache.js +++ b/packages/koot/ReactApp/server/render-cache.js @@ -2,6 +2,7 @@ * @callback cacheGet * 缓存检查与吐出方法 * @param {String} url + * @param {Object} ctx KOA Context * @return {Boolean|String} 对该 URL 不使用缓存时返回 false，使用时返回缓存结果 String */ @@ -9,7 +10,8 @@ * @callback cacheSet * 缓存存储方法 * @param {String} url - * @param {String} html + * @param {String} html SSR 渲染结果 HTML + * @param {Object} ctx KOA Context */ const defaults = require('../../defaults/render-cache'); @@ -48,10 +50,12 @@ class KootReactRenderCache { /** * 缓存检查与吐出方法 * @param {String} url + * @param {Object} ctx KOA Context * @return {Boolean|String} 对该 URL 不使用缓存时返回 false，使用时返回缓存结果 String */ - get(url) { - if (typeof this.customGet === 'function') return this.customGet(url); + get(url, ctx) { + if (typeof this.customGet === 'function') + return this.customGet(url, ctx); // 没有该条结果，直接返回 false if (!this.list.has(url)) return false; @@ -75,10 +79,11 @@ class KootReactRenderCache { * 缓存存储方法 * @param {String} url * @param {String} html + * @param {Object} ctx KOA Context */ - set(url, html) { + set(url, html, ctx) { if (typeof this.customSet === 'function') - return this.customSet(url, html); + return this.customSet(url, html, ctx); // 如果当前已缓存的 URL 数量不少于设定的最大数量 // 移除已缓存列表里的第一条结果