PEAR2020

摘要： 1. http-only cookie 首先我们肯定选择http-only cookie 来维护状态（为了防止XSS攻击，另一种方案：localStorage内保存token，有漏洞暴露给XSS攻击 如果改成http-only cookie，只会保存在浏览器cookie，并且只有http能够获取，j 阅读全文

摘要： 第一阶段： 前端 nextjs vercel -> 后端 nextjs langchain.js -> 向量数据库Qdrant Cloud 搜索向量 <免费额度（1GB存储、10K 查询）> -> Prompt 拼接 + 检索代码 Groq <免费额度（数百万 token）> 第二阶段：优化 缓存层 阅读全文

摘要： S – Situation（情境） 我在使用 shadcn/ui 的 Carousel 组件时，遇到了一个需要“从外部控制组件行为”的场景。具体来说，我希望从外部点击按钮，能够控制 Carousel 滚动到指定索引。 T – Task（任务） Carousel 内部使用了 Embla 提供的 scr 阅读全文

摘要： 🧩 前言 在使用 Zustand 进行状态管理时，我们很容易把注意力集中在组件本身，却忽略了状态模块背后的执行环境。当我在 Next.js App Router 中封装 useSortStore 自定义 hook 时，遇到一个看似莫名其妙的错误： Error: Switched to client 阅读全文

摘要： 🧩 问题描述 / Problem 在使用 flex flex-col 布局时，我遇到了一个明显的 layout shift（布局跳动）问题： 当页面加载 <Image /> 组件时，初始时容器高度较小，但图片加载完成后高度被撑大，导致整体布局被“顶开”，体验很不流畅。 ❗️This is a co 阅读全文

摘要： 🧠 背景 在传统前端中，我们通过 fetch('/api/xxx') 或 axios.post(...) 与后端通信，采用的是显式的 HTTP 请求调用。 但从 Next.js App Router 开始，我们有了一个全新的通信方式 —— Server Actions。 Server Action 阅读全文

摘要： How to Load Remote Images in Next.js: Two Approaches (with Anti-Hotlinking Proxy) 在构建基于 Next.js 的前端项目时，我们经常需要从外部加载图片。尤其是当图片来源于 CDN 或第三方站点时，有两个常用方式： Wh 阅读全文

摘要： 理解 npm 的 peerDependencies：踩坑、原理与解决方案（以 React 19 为例） 在使用 npm 安装第三方库时，尤其是在 React 项目中，你可能遇到过这样的错误提示： npm ERR! Could not resolve dependency: npm ERR! peer 阅读全文

摘要： 📌 背景 / Background Redux 用于集中式状态管理，而 React Query 管理异步数据及缓存。如何让它们协调：Redux 管状态意图，React Query 管异步数据，是构建复杂应用的关键技巧。 Redux is used for centralized state, wh 阅读全文

摘要： 📌背景 / Background 为了提升 React 应用的首屏性能，我们采用 SSR（服务端渲染）进行初始 HTML 输出；同时希望使用 React Query 管理异步数据缓存。但两者默认工作方式并不一致，需要特别设计协调机制。 To improve first-screen perform 阅读全文