我经常说类似这样的话：“一个预渲染的网站可以轻松地服务数百个并发用户”，因为，嗯，我从未见过它失败。

但是它实际上能处理多少流量呢？我的网站能否真正应对像 Hacker News 首页这样的流量激增？它与服务器端渲染相比如何？而且，为了避开 SSR，我们真的值得费尽周折吗？

我四处寻找关于 Next.js 性能的硬性数据，但令人惊讶的是，可靠的数字很难找到。因此，我在自己的网站上做了一些测试，结果并不像我所预期的。而且，时机恰到好处，我关于谷歌翻译干扰 React 的文章第二天就登上了 Hacker News 的首页。

AI 摘要：预渲染 Next.js 网站在高并发下进行性能测试，对比 SSR 表现，并探讨服务器升级选型问题。

文章内容
本文通过大量实验数据对比了 Next.js 预渲染与服务器端渲染（SSR）的性能。作者首先使用 k6 工具在 VPS 上对预渲染首页进行负载测试，结果显示单页面请求的性能远低于预期，仅能支撑有限的并发访问。文章详细解析了页面加载时各个请求（HTML、CSS、图片、JS 等）带来的额外流量负担，并通过 Docker 水平扩展进一步测试性能提升，结果有限。随后，作者观察到来自 Hacker News 的意外流量峰值，并由此探讨各种替代方案：Cloudflare、Vercel、家用服务器、VPS，最终转向性价比较高的 Dedicated Server。测试表明，专用服务器在处理请求数量和响应速度上均有显著提升，而 SSR 在相同配置下明显吃不消。最后，作者总结出预渲染模式在扩展性上具有明显优势，并预告将来针对“hug of death”现象及其他优化方案进行进一步探索。

Martijn Hols

How much traffic can a pre-rendered Next.js site really handle? by Martijn Hols

How much traffic can a self-hosted Next.js site handle? I ran load tests, uncovered surprising limits, and compared pre-rendering with SSR.

AI 摘要：本文介绍将状态存储在 URL 中的方法，并分析其优缺点及适用场景。

文章探讨了如何通过在 URL 中存储状态，使得关键组件（如模态窗口）在页面刷新后仍然保持打开状态。为了应对单纯使用 React 的 useState 所带来的局限性，作者详细比较了多种状态存储方式，包括应用内存中的状态、浏览器存储（如 localStorage 与 sessionStorage）、服务器存储以及 URL 存储。每种方式均配有代码示例，展示如何实现状态的持久化。文章重点讨论了使用 URL 存储状态的诸多优势，如便于分享、读取速度快、全局性以及与浏览导航的兼容性，同时也指出了其在调试维护、扩展性和类型安全方面的挑战。最后，作者总结了不同场景下应选择不同存储方案的具体建议。

iamsahaj.xyz

The URL is a great place to store state in React

Why it's a good idea to use the URL to store state

Geek (@geekbb): 卡哇伊字体 Maple Mono
✨ 可变 - 无限的字体粗细，以及手工微调的斜体字形。
☁️ 丝滑 - 圆角，独特的 @ $ % & Q -> 字形和手写风格斜体。
💪 实用 - 大量的智能连字。
🎨 图标 - 提供 Nerd-Font 嵌入的版本，添加图标支持。
🔨 定制 - 可定制OpenType特性。
https://github.com/subframe7536/maple-font

FxTwitter / FixupX

Geek (@geekbb)

卡哇伊字体 Maple Mono
✨ 可变 - 无限的字体粗细，以及手工微调的斜体字形。
☁️ 丝滑 - 圆角，独特的 @ $ % & Q -> 字形和手写风格斜体。
💪 实用 - 大量的智能连字。
🎨 图标 - 提供 Nerd-Font 嵌入的版本，添加图标支持。
🔨 定制 - 可定制OpenType特性。
https://github.com/subframe7536/maple-font

AI 摘要：介绍 WebGPU 的基础知识及使用 GPU-Curtains 库创建 3D 场景的入门教程。

本文是 WebGPU 系列教程的第一部分，旨在帮助开发者从 WebGL 过渡到现代图形 API WebGPU。文章通过构建一个包含 4 个独立场景的落地页，逐步演示如何利用 GPU-Curtains 库实现以下功能：
1. 基础网格绘制：创建随机分布的立方体和球体，调整位置以适应视口。
2. 动画与交互：添加入场动画（GSAP 时间轴）和基于滚动的场景可见性控制。
3. 着色与光照：通过自定义 WGSL 着色器实现 Lambert 光照模型，管理环境光和定向光。
4. 性能优化：禁用视锥体裁剪、复用几何体缓冲、异步设备初始化等。
作者还对比了 WebGPU 与 WebGL 的优势（如异步调用、计算着色器、多画布渲染），并详细解析了 GPU-Curtains 库的设计思想与核心
API。

OKAY DEV®

Dive Into WebGPU—Part 1 (Tutorial)

Learn WebGPU with GPU-Curtains, a lightweight library for 3D scenes. Master shading, object manipulation, and particle systems in this 4-part tutorial.

用于改变色调、饱和度、亮度等的调色板生成器 —— 这里有很多东西可以摆弄，但主要功能是一组滑块，可让您使用 HSL 轻松“调整”调色板。还包括用于生成调色板、辅助功能等的工具。

Supercolorpalette

Super Color Palette - 100% Free Color Palette Generator

Generate super awesome color palettes by shifting hue, saturation, lightness, and more. 100% free without ads.

owlmo (@0owllmo0)：已经有人贴出来了，但我参考了您提供的视频。谢谢。

AI 摘要：本文介绍了如何利用复制动画到 ::view-transition-group，实现元素边框圆角、背景和边框的平滑过渡。

文章聚焦于 View Transitions 中元素状态转换时遇到的边框圆角（border-radius）动画问题。作者通过具体的 Demo 展示了当同一元素转换时，由于使用快照的特性，会导致圆角动画无法自然过渡，而是简单地淡出替换。为了解决这一问题，作者提出了将动画效果复制到 ::view-transition-group 内的方法，通过自定义关键帧（keyframes），实现圆角、背景以及边框等 CSS 属性的平滑过渡。文章还介绍了如何应对背景颜色变化和边框宽度变化的场景，解释了设置 overflow、box-sizing 以及隐藏部分快照的必要性，从而使动画效果达到最佳。最后，作者总结了如何通过分别捕获背景和前景，进而在 View Transition 中获得更理想的动画效果，并呼吁读者在社交媒体上分享此技术。

Bram.us

View Transitions Applied: Smoothly animating a border-radius with a View Transition

To smoothly animate things like borders as part of a View Transition, you need to duplicate that animation onto the ::view-transition-group. For best effect, have the View Transition separately capture the background and foreground of the element you’re animating.

Vibe 编码是一种依赖于 AI 的计算机编程实践，程序员用几句话描述问题，作为对针对编码进行调整的大型语言模型的提示。可以快速创建和调试软件，同时忽略生成代码的细节。Vibe 编码的倡导者声称，即使是业余程序员也可以制作软件，而无需进行以前编码所需的大量培训和技能。该术语由 Andrej Karpathy 于 2025 年 2 月提出。

owlmo（0owllmo0）: 🏷️25個目＊Toon風練習
#blender #b3d #blender初心者