首页
首页关于友链
react前端优化Next.js前端

博客问题汇总

一些说明

  • 网站这么慢的原因

    • 不存在了, 搬到国内了, 速度上来了

    • 懒得搞 api, 直接使用的 rpc 形式的 server action, 导致页面 cache-control 用不上, 始终是 no-store, 页面没法静态化, revalidate 失效;

      • 这个问题不想解决, 因为没人给我写后端, 而 next api 太孱弱, 新开一个 nest 项目又太麻烦, rpc 又太香了。。。

    • 选用了 aws 海外版, 只部署了首尔一个节点, ssl 握手就要花好几秒。穷就一个字, 我只说一次;

      • 这个问题理论上换到国内部署就能解决, 而由于 aws 有 amplify 便于部署, 所以也不想解决。。。

  • 偶尔会显示 服务器错误 是什么鬼

    • 大概率是超出了数据库最大连接数;
    • 数据库免费时长只有 750小时, 所以只开了一个实例;
    • 因为选用了免费的 aws mysql db.t3.micro 数据库, 1gb ram, 2 vCPUs, 最大连接数为 60, 而 Next.js Link viewport prefetch 导致并发请求, 由此导致数据库并发连接过高, 超出 max_connections;
    • 服务端对 5xx 错误做了过滤, 统一显示 "服务器错误, 请稍后再试";
    • 待采取的措施是: unstable_cache + 一个很长的过期时间 + 修改内容后自动更新相应的 unstable_cache 的 tag;
    • 已采取措施: 前台页面加 unstable_cache + 一个适当的过期时间, 以减少访问数据库;
    • 参考 prisma 的建议, connection_limit 改成 1
    • 取消使用 next/link prefetch

todos

  • 通知从钉钉机器人改到电报机器人 (本来白嫖的公司的钉钉机器人，可是不知道是不是钉钉收紧了，直接 over limit 了。。。) (傻乎乎的，没有梯子，怎么用电报机器人。。。)
  • 架一个梯子
  • 自动生成描述文本 (真的需要吗?)
  • 编辑的缓存
  • 账号过期机制
  • pre > code 添加复制按钮
  • api 日志
  • bf cache not working
  • 全站音乐(页面跳转音乐不断)
  • 全站字幕(页面跳转字幕不断)
  • tagList 加个背景，与其他部分分隔开(不需要)
  • 在自己的博文加上"编辑"按钮
  • sitemap
  • 添加 robots
  • 添加 rss (参考: https://taoshu.in/webfeed/lets-webfeed.html)
  • 标题(h1-h6)增加 hash & id, 支持点击修改 url
  • 新增 TODO/road map 页 (不需要了, 放在这个博文里)
  • 优化深色模式的实现逻辑(现在初次渲染时闪屏太严重了)
  • 部署问题 (用了 aws, 一键解决了)
    • nginx(不需要了)
    • ssl
  • 优化 a11y 及键盘导航
  • 上传功能
    • 非 admin 用户限制上传数量和文件大小 (注: 不支持非注册用户上传文件)
    • 文件上传支持图片预览 (因为上传的主要内容就是图片)
    • 支持粘贴式上传文件 (全站任意地方粘贴文件触发上传)
    • 支持拖拽式上传文件 (全站任意地方 drag and drop 触发上传)
    • 优化上传的交互 (如上传时的空状态等)
    • 上传弹窗的关闭按钮改为完成
  • react server component streaming with suspense
  • pwa 消息订阅与推送 (不用 pwa 了)
  • 前端路由时, 页面 title 不会变化; ( 这儿说解决了, 解决个毛线... )
    • 解决方案: 额外添加了前端修改 title
  • 内容页的编辑按钮直接打开编辑弹窗
  • 博文编辑完成后 revalidateTag
  • 需要配置 next-image config, 考虑下是否需要 next/image
  • 尝试把 title 放到article 中 (主要是考虑 UI)
  • 401 默认弹出登录弹窗
  • 统一弹窗 UX (存在部分弹窗关闭按钮在左侧)
    • 目前统一在右上角, 除了博文编辑, 右上角放保存和预览按钮, 放不下关闭按钮了
  • media 新增 loading 态
  • 弹窗支持物理返回键 (物理返回键功能实现见 我给弹窗添加了支持物理返回键 一)
  • 图片预览 (也支持物理返回键)
  • 考虑一下网站搬到国内服务器
  • s3 上的资源加缓存头
  • 自动生成博文目录
  • 固定图片尺寸 (可选方案: 尺寸信息放在 url 上)
  • 添加谷歌收录 (国内域名本来就做了)
  • 自动评估阅读时长
  • 新增 about me 页 (不需要, 直接放博文里吧)
  • 全站搜索功能 (当前支持博文搜索)
    • 待支持功能搜索、页面搜索
  • 新增 404 500 页面
  • 回复功能 (站点在国内, 估计上不了这个功能了)
  • 一次性链接 (支持访问密码 + 访问时间限制 + 访问次数限制)
  • 文章底部统一展示版权声明
  • 资源管理页 (管理个毛线, 不需要了)
  • 添加友链页面
  • 添加留言页面 (单向, 给站长留言, 其他人看不到)

bugs

  • !!! 高危 !!! server action 缓存和 service worker 发生了化学反应, 具体原因待查; 表现是, 版本更新后, 本地访问到了旧的页面, 旧的页面引用旧的 js, 然而旧的 js 资源已经失效了, 导致页面崩溃
    • 不用 pwa 了, html 也不用缓存了, 所以不会有这个问题了
  • tags 上面的数量，需要仅计算 published 的博客
  • 不可见博客的推荐阅读，第一条就是它自己
  • 博客编辑中，默认没有填充标签
    • md mui Autocomplete 自己有 bug, Chip 没加 key, 导致控制台一直报红色 warning, 很烦
  • tag/hash 页 tagName 颜色有误
  • mui Stack 注意换行问题
  • 在 pwa 应用中通过 target _blank 打开站内链接偶现直接展示出了 post response
    • 原因: 不是 post response, 是 get response, 因为在 next.config.js 中为页面设置了 cache-control, 浏览器直接读取了本地缓存...
    • 解决方案: 页面不缓存了...
  • pwa 封面图背景色有误 (不用 pwa 就不管了)
  • revalidateTag 更新内容后, 本地 pwa 没有更新, 导致刷新页面和前端路由切换页面时的数据不统一
    • 不用 pwa 了
  • /blog/[hash] 页面缓存仍有问题
    • unstable_cache 博客修改之后要更新一堆的东西, 考虑一下别用了
    • 国外接口耗时太久, 站点放到国内就没有这个问题了
  • 登录过期导致的 401 未能弹出登录弹窗
  • 更新博客后的 router.refresh() not work
    • 国外接口耗时太久, 站点放到国内就没有这个问题了

解决方案

疑问

  • 数据库的连接是怎么回事? 是不是我只要从数据库取一次东西, 就会占用一个连接?
    • 答: 部分正确, 查询完成后, 会将连接释放到连接池中可供后续请求使用; 所以当有并发请求时，数据库连接可能会过高','博客问题汇总','PUBLISHED','本博客待新增的 feature、待解决的 bug、已解决问题的解决方案的一个汇总

如非特别声明，本站作品均为原创，遵循【自由转载-保持署名-非商用-非衍生 创意共享 3.0 许可证】。

对于转载作品，如需二次转载，请遵循原作许可。