创见博客

Next.js

收录 Next.js 路由、渲染模式、缓存策略、SEO 优化和全栈工程实践，沉淀现代 React 应用开发经验。

从用户协议排第一到首页 SEO 优化：一次内容站首页改造实践
记录 Visionary 在“创见博客”关键词下用户协议页排在首页前面的原因分析，以及通过首页 title、description、canonical、真实品牌内链和 ISR 首屏数据优化品牌主页 SEO 的实践过程。
SEONext.jsISRcanonical内容站
2026-07-25
Server Component 和 Client Component 是什么？有什么区别？
系统解释 Next.js App Router 中 Server Component 和 Client Component 的区别：Client Component 也能服务端预渲染，但会发送 JS 并 hydration；核心数据如果放在浏览器运行时请求，就会退化成 CSR。
Next.jsReact Server ComponentsClient ComponentSSRCSR
2026-07-16
给 Next.js 内容站补齐 sitemap 和 robots：一次 SEO 基建实践
记录 Visionary 站点新增 sitemap.xml 和 robots.txt 的设计与实现：动态输出公开文章 URL，sitemap 按天刷新，并禁止编辑器、预览页、API 和私有页面被抓取。
Next.jsSEOsitemaprobots内容站
2026-07-15
从 SSR 到 ISR：一次 Next.js Reader 页缓存与权限边界改造
记录 Visionary reader 页从 SSR 继续演进到 ISR 的实践：拆分公开阅读页与动态预览页，明确缓存和权限边界，并改为长期缓存配合 revalidatePath 按需刷新。
Next.jsISRSSRReact Server Components前端性能
2026-07-15
从客户端渲染到 SSR：一次 Next.js Reader 页首屏与 SEO 优化实践
记录 Visionary reader 页从客户端 runtime 渲染迁移到 SSR 的实践：拆分 Server Page 与 Client Shell，抽象 ReactMarkdown 的 SSR/CSR 双入口，保留用户交互并为后续 ISR 铺路。
Next.jsSSRReact Server Components前端性能SEO
2026-07-15
一个 <p> 包住 <div> 引发的 Hydration Error
从 Markdown 图片渲染 AntD Image 的真实案例出发，解释非法 HTML 结构为什么会导致 Next.js hydration error，以及如何修复。
ReactNext.jsHydrationHTMLMarkdown
2026-07-07