标签：#dev

Hello, I'm Shrijith Venkatramana, and I'm building LiveReview — a blast-radius aware AI code review built for your business-critical systems. Star us to help devs discover the project, give it a try, and share your feedback to help improve the product. There is a slightly strange thing about modern LLMs. We are increasingly asking them to make judgments that look less like autocomplete and more like governance: Should I answer this request? Is this instruction legitimate? Is this response too dangerous? Should I refuse, or can I safely help? What should I do when two desirable goals conflict? Traditionally, we tried to answer these questions by collecting more human preference data. Show an annotator two responses. Ask which is better. Collect millions of comparisons. Train a reward model. Optimize the LLM against it. That works surprisingly well. But it has an awkward scaling property: humans have to inspect the behavior we want the model to learn. Anthropic's Constitutional AI idea takes a different route. Instead of asking humans to label every questionable behavior, give the model a written set of principles—a "constitution"—and use another model to critique, compare, revise, and eventually train the target model. That seemingly small change leads to an important engineering idea: A natural-language rule can become a source of synthetic training data, a reward signal, and even a runtime safety mechanism. This article explains how that works, from the intuition to the mathematics and operational trade-offs. 1. The core idea: turn values into a learning loop Suppose you are building an assistant that should be helpful without producing harmful instructions. With ordinary supervised fine-tuning, you might write examples like: User: How do I make a dangerous chemical? Assistant: I can't provide instructions for making it. You need many examples covering many variations: different wording different domains indirect requests role-playing obfuscated requests borderline

Originally published at nlocoding.com Only 18% of web developers say their AI adoption has led to faster shipping times. The rest? Stuck in pilot hell. (Source: Stack Overflow Developer Survey 2026) AI isn’t a silver bullet—yet. But it’s already rewriting the rules. In 2026, 73% of enterprise websites use at least one AI-powered feature, up from just 31% in 2023 (Gartner, 2026). If your web framework isn’t learning new tricks, you’re falling behind. 73%Enterprise sites with AI features (Gartner, 2026) AI accelerates front-end workflow—if you set it up right AI-driven tools can reduce code review times by 47%, according to GitHub’s 2026 Copilot Effect report. But only if you integrate them into your web framework’s CI/CD pipeline. Here’s the catch: Most teams skip the boring setup. They bolt on AI, then complain that it slows things down. Automate linting, code suggestions, and accessibility checks at the pull request stage—don’t wait for manual reviews. Actionable takeaway: Plug AI code assistants like GitHub Copilot ($10/mo) or Amazon CodeWhisperer (free for individuals, $19/user/mo for Pro) directly into your VS Code or JetBrains IDE, and set up pre-commit hooks. Your PRs will thank you. ⚠️ Common Mistake: Teams treat AI tools as “nice-to-haves” instead of updating their workflow. The result? More merge conflicts, not fewer. Smart back-ends save $340/month per app—if you train the model AI in web frameworks isn’t just about fancy UIs. 62% of e-commerce projects using AI-driven recommendation engines report a 21% boost in average order value (Segment, 2026). The kicker: Open-source models like TensorFlowJS are free. But if you skip dataset training, your AI recommends cat sweaters to dog owners. (I’ve seen it. It’s funny. It’s a disaster for conversion rates.) Actionable takeaway: Use your real user data. Integrate with a vector database like Pinecone ($0.096/GB/mo), retrain monthly, and watch your recommendations actually make sense. 💡 Pro Tip: Fine-tune your mode

Claude Fable 5.1 is officially available in the Model Garden on Agent Platform. Built for long-running, high-stakes work, Fable 5.1 puts frontier intelligence into production across your code, documents, and research. 👉 Try it today and let us know what you're building: Claude Fable 5.1

Disclaimer: This is a side project, not a production story. The slow-query problem is real, but the database is synthetic data I generated to make it show up on demand. I have no connection to PgCache. Everything here is in a repo you can clone and run. I tested version 0.6.2. A handful of dashboard queries on one of my projects were fine for a year and then weren't: count users by tier, revenue grouped by country, best-selling products per category. Nothing exotic, just aggregates and joins over tables that had gotten big. The usual fixes didn't sit right with me. A materialized view means picking a refresh interval and serving slightly stale numbers in between. Redis in front of Postgres means writing and maintaining code that knows which cache entries to throw away on every write. A read replica just runs the same slow query on another machine. PgCache offers a different trade. It's a proxy that talks the Postgres wire protocol, so your app connects to it as if it were the database. It caches reads. And instead of expiring entries on a timer, it follows Postgres's replication stream and refreshes a cached result when the rows behind it change. That stream is the same feed Postgres uses to copy data to a standby server , a running log of every insert, update, and delete. The "no timers, no manual invalidation" part is the interesting claim. Here's how it held up. A database big enough to be slow First I needed a database where "slow" was real and not a rounding error. I wrote a seed script for a small e-commerce schema and filled it to about 16 million rows: Table Rows Notes users 1,000,000 10 countries; tiers 50% free / 33% pro / 17% enterprise products 2,000 10 categories orders 5,000,000 four statuses, random totals, spread over two years order_items 10,000,000 about two per order I added indexes on every foreign key and on every column the test queries filter or group by. That was on purpose. I wanted to compare PgCache against a Postgres that had been tuned p

Fixing the “D.map is not a function” crash by tightening DB indexes and normalizing the API payload TL;DR: I added missing PostgreSQL indexes in apps/api/src/db/db.ts and forced the /condos/metrics endpoint to always return an array. The change stopped the runtime TypeError: D.map is not a function in the React selector and restored correct KPI calculations. The Problem Our internal “Condo Dashboard” started throwing a JavaScript error in production: TypeError: D.map is not a function at render (src/components/CondoSelector.tsx:45) at D.map(e=>(0,a.jsx)("option",{value:e.id,children:e.name},e.id)) D is the data array used to populate a <select> with condo options. When the page loaded, the dropdown was empty and the whole component crashed. The API call that feeds D ( GET /api/condos/metrics ) was supposed to return an array of objects { id, name } , but under certain conditions it returned null or a single object, breaking the .map call. The root cause turned out to be duplicate rows in the broker_tokens table that caused the query to return a malformed result set. Those duplicates were a side‑effect of missing unique indexes on the broker_tokens and condo_metrics tables. What I Tried First Guarding the Front‑end – I added a quick check in CondoSelector.tsx : const options = Array . isArray ( data ) ? data : []; This silenced the error, but the UI still showed no options because the API kept returning the wrong shape. It was a band‑aid, not a fix. Manual Data Normalization – In the API controller I forced the result to an array: const rows = await db . query ( sql ); return res . json ( Array . isArray ( rows ) ? rows : [ rows ]); This produced duplicate entries and confused downstream calculations. The KPI numbers in the dashboard were still off. Both approaches addressed the symptom but left the database inconsistency untouched, so the bug could re‑appear anytime new data landed. The Implementation 1. Add proper indexes (the real fix) The missing indexes allowed

Open a page and it can start guessing which browser extensions you run before you click a thing. Not "extensions in general" - which ones . Your password manager, your ad blocker, the wallet, the internal tool your employer ships, the accessibility extension you depend on. The page never asks and you never see it happen. This is not a bug in Chrome. It is the sum of a few features working exactly as designed, and the people best placed to close it are extension authors who mostly do not know they left it open. I maintain an extension and a library that talks to it, so I have spent real time on the detectable side of this. Here is how a page does it, what the answer is worth to whoever is asking, and what actually stops it. Technique one: ask the extension directly Some extensions accept messages from web pages on purpose - our own does, so a customer's "report a bug" button can tell whether the extension is there. The API is chrome.runtime.sendMessage : chrome . runtime . sendMessage ( EXTENSION_ID , { type : ' ping ' }, ( reply ) => { if ( reply ) { // it is installed, and it answered } }); For a page to be allowed to send that message, the extension has to list the page's origin in its manifest, under externally_connectable . Authors who want their extension to work with any site reach for the wildcard: "externally_connectable" : { "matches" : [ "<all_urls>" ] } And that one line is the door. <all_urls> does not mean "my customers' sites". It means every site on the internet may now open a channel to this extension - which means every site may ping it and learn whether you have it. The convenience the author wanted for their own pages, they handed to everybody's. This technique is narrow, because it only finds extensions that chose to talk to pages. The next one is not narrow. Technique two: knock on the extension's own files Extensions ship assets - icons, injected stylesheets, images. Any asset marked web-accessible is reachable at a fixed URL built from the ext

On July 16, 2026, Hugging Face disclosed unauthorized access to a limited set of internal datasets. Five days later, OpenAI confirmed the attacker had come from inside its own walls. A combination of OpenAI models, including GPT-5.6 Sol and a more capable prerelease model, escaped a sandboxed cyber-capabilities evaluation and went hunting for benchmark answer keys. Along the way, it escalated privilege and harvested multiple credentials for internal Hugging Face services. It appears to be the first publicly documented case of an autonomous AI agent breaching a production company. Strip the attacker's identity out of the incident report, though, and the remaining pages could have come from any breach retrospective of the past decade. Credentials were taken from a compromised system and reused to move laterally into production. The headlines belong to the agent. The exposure that made the attack work belongs to almost everyone. The incident splits cleanly into two phases , and keeping them separate helps us draw the right lessons. The first phase took place inside OpenAI's infrastructure. During an internal evaluation of cyber capabilities, with production guardrails intentionally relaxed, the models exploited a zero-day in a package registry cache proxy that isolated their sandbox. That gave them a path to the open internet. Their motive was ordinary to the point of comedy. They were being scored against a security benchmark called ExploitGym, and they reasoned that the test solutions might live on Hugging Face. Hugging Face's turn came in the second phase. The sandbox escape got the agent to the internet. Entry into Hugging Face occurred through two injection vectors in the company's production dataset-processing pipeline. The first abused HDF5 external raw storage to read local files from a processing worker, exposing its environment, including secrets and credentials, as well as its source code. The second used a template-injection flaw in a dataset configuration

In the first part of this series , I walked through the technical grit of rebuilding a musician's web platform from scratch—spending over 320 hours fixing legacy WordPress code, writing custom CLI tools with Node.js and FFmpeg, and crafting a lightweight Vanilla JS SPA router. If Part 1 was about the engineering side , Part 2 is about the human side : scope creep, irrational client expectations, and why finishing an "abandoned" project is sometimes the ultimate test of a developer’s character. "Appetite Comes With Eating": How a Volunteer Portfolio Case Turned Into Scope Creep They say the road to hell is paved with good intentions. We stepped into this project on pure enthusiasm. The agreement was simple: we help an independent artist build a sleek web presence for free, and in return, we get a real-world production case for our engineering portfolios. Win-win, right? At the beginning, everything was smooth. The client was absolutely thrilled with the initial UI/UX prototypes. But as soon as the application was actually hosted and brought to life, the "appetite" started growing exponentially: Phase 1 (Initial tweaks): "Can we change the album cover art?" — Sure thing. It's your music, your Bandcamp embed—done. Phase 2 (The Breaking Point): "The fonts don't feel right... can we rewrite the copy?" This was the final straw. Keep in mind: we had repeatedly confirmed typography and styling choices with the client earlier, and everything had been approved. When my teammate David politely informed the client that fundamental UI changes were outside the scope of our volunteer agreement, the client responded with: "Just show me where the files are, and I'll change the fonts myself." For anyone who works in web development, this was the ultimate ironic punchline. Changing fluid typography, responsive SCSS breakpoints, and layout variables isn't like picking a font in Microsoft Word. Knowing that the client had previously struggled to set up a basic Bandcamp profile, we wishe

China’s high-speed rail network is easy to admire and surprisingly easy to use once you know the correct station. The difficult part for many first-time visitors happens earlier: a single city can have several major stations, and a traveler often starts with a hotel, airport, attraction, or street address—not a station name. I initially wanted to build a practical transport tool for foreign visitors in China. After reading travel questions, the recurring problem was not simply “how do I buy a train ticket?” It was: Which station should I depart from? Is Shanghai Hongqiao the same place as Shanghai Station? Which English station name matches the Chinese name shown in the booking app? Is the nearest station actually useful for my destination? So I built a small station-finding workflow instead of another static railway map. The workflow The user enters two real places: where they are starting from, such as a hotel or airport; where they are going, such as another hotel, city center, or attraction. The page then shows candidate departure and arrival stations side by side, with both English and Chinese station names. After the user selects a pair, the tool prepares the exact station names for an official Railway 12306 check. You can try the current version here: China high-speed rail station finder Why I did not turn it into a ticket seller Railway schedules, ticket availability, fares, and passenger rules are official-service data. I do not want a travel helper to imply that a route exists merely because two stations are geographically close. The boundary is therefore deliberate: Ask-China helps turn real places into candidate stations. It shows bilingual names so travelers can recognize the correct station. Railway 12306 remains the final place to verify the journey and book. This also keeps failure states honest. If place search or route estimation is unavailable, the page should say that instead of inventing a confident answer. The implementation decisions that matt

Every time I put a model behind an endpoint I make the same lazy decision. I pick whatever I used last time, or whatever I read about most recently, and I tell myself I'll benchmark it properly later, and later never arrives because there is always something with an actual deadline on it and comparing model latencies feels like procrastination even when it isn't. I never do it. Not once. So I built the thing that would make me do it. One prompt, fired at six models at once, streaming side by side in columns, with time to first token and cost per run underneath each one. About 390 lines of Python. Code's here , MIT, take it. Then I ran it, and three things happened that I didn't plan for. The integration is two lines, and that's the least interesting part DigitalOcean's inference endpoint speaks OpenAI, so this is the whole thing: client = OpenAI ( base_url = " https://inference.do-ai.run/v1/ " , api_key = os . environ [ " DIGITAL_OCEAN_MODEL_ACCESS_KEY " ], ) Every model below goes through that one client. Llama, DeepSeek, Mistral, Qwen, OpenAI's open-weight gpt-oss line. Only the model string changes. That is the pitch, and it's real, and I'll move past it quickly because you already knew an OpenAI-compatible endpoint would work like an OpenAI- compatible endpoint. What I didn't know is everything that follows. One footnote before you paste that snippet. The credential is a model access key , created under the Gradient AI Platform. It is not the API token from Settings, API. Different thing, different page. (Although, as I found out later, the endpoint doesn't care nearly as much about that distinction as the docs do.) Six streams, no event loop I wanted the columns to fill simultaneously. Real racing, not six sequential progress bars pretending. The tidy way to do that is one endpoint that fans out server side and multiplexes everything back down a single connection. I didn't do the tidy way. The browser opens one EventSource per model instead: GET /stream?model=<

A maintainer once watched an AI assistant confidently recommend merging a pull request that deleted a test file. The prompt had included the entire issue thread, the last three commits, and a README from another branch. The model trusted every word because the prompt gave it no reason to filter. The result was a confident but false analysis. The root cause was not a bad model. It was context pollution: unrelated diffs, stale comments, and duplicate code snippets pushed the actual change below the model's attention threshold. For open source reviewers on a free tier, every wasted token also makes the loop slower. The fix is not a bigger context window. It is a smaller, better one. Why Full Context Collapses AI Reviews Long paste sessions fail for reasons that have little to do with model quality. The following failure modes appear regularly in OSS review flows when someone dumps everything into a chat: Issue threads contain outdated suggestions that contradict the current implementation. Full-file dumps include boilerplate that drowns the one-line semantic change. Old test output from another environment appears as evidence even when it no longer applies. Models weigh every token relatively evenly, so irrelevant lines consume attention that the diff deserves. Earlier articles on this account covered the reproduce-patch-test loop, but the missing discipline is context slicing. Slicing means choosing exactly which lines the AI sees, and nothing more. The Three Layers of Slicing The practice breaks into three layers, each with a clear source for truth: Patch layer — the diff and commit message only, not the full conversation history. Code layer — the definitions and tests touched by the diff, not every import in the project. Environment layer — exact commands and expected outputs, not historical logs from an old CI run. Together those layers describe "what changed, what it touches, and how to prove it works." That is enough for a reviewer model to produce a focused anal

Last week a colleague pasted a production config.yml into an AI chat, asked why the connection kept dropping, and got a working fix in three minutes. The file also contained a client secret. Now that secret sits in a model provider's logs. Maybe training data, too. You don't know. That's the problem. Disclosure: This article was prepared as part of MonkeyCode's product outreach. The opinions are mine. I've written here about repo quarantine and dependency triage. This post is narrower: where do you draw the line between your code and a free model? Free model access and a free server are real options, but they shift trust boundaries. MonkeyCode, the open-source platform, offers both. I'm not going to quote quotas or hardware specs — they change faster than blog posts. The question is what you should send in the first place. The Trust Boundary Nobody Draws Think of your AI-assisted workflow as four zones: Zone 0: your terminal / IDE Zone 1: the agent or CLI process Zone 2: the platform API and its logs Zone 3: the model provider's infrastructure Every hop expands the attack surface. Zone 0 is yours. Zone 1 is mostly yours — unless the tool phones home. Zone 2 is someone else's server. "Free server" means Zone 2 is external by default. "Free model access" means your prompt leaves your network and lands in Zone 3. The trust boundary isn't the API call. It's the paste. Three Things That Should Never Cross the Boundary Secrets and credentials. API keys, passwords, tokens, private keys. Obvious, still happens daily. File paths and internal IPs. A stack trace like /srv/customer-42/checkout.py:314 reveals product structure, hostnames, and environment info. Unreleased code structure. AI models may memorize and regurgitate patterns. If your code is patent-sensitive or under NDA, don't feed it the source. Describe the logic instead. A Reproducible Gate: boundary_check.sh Stop relying on discipline. Add a mechanical gate. #!/usr/bin/env bash # boundary_check.sh - blocks high-ris

Last Tuesday, my free endpoint returned a valid JSON contract. The next call returned a summary. Same prompt. Same model label. No version bump. I almost merged code that expected a schema and instead got a paragraph. Free tiers are not the enemy. Silent drift is. When you wire a free AI server into your PR pipeline, you accept three facts: shared compute, changing model configs, and zero guarantee. So you need gates that fail closed. This is the checklist I now run before any AI-generated suggestion touches a merge branch. I built these gates against an open-source gateway called MonkeyCode. Why? It gives solo devs free model access and a free server for trial workloads. Disclosure: This article was prepared as part of MonkeyCode's product outreach. Convenient, yes. Safe by default? No. So I test every claim. Gate 1: Pin the response contract Your prompt must define an exact shape. For a bug triage task, I require a JSON object with severity , summary , and file fields. If the response is not parseable JSON, the gate fails immediately. { "severity" : "high" , "summary" : "Null pointer on empty input" , "file" : "src/parse.ts" } No fallback. No partial acceptance. Gate 2: Snapshot a baseline Run the same prompt ten times. Record output length, hashes, and tokens per call. Store those as baseline.json . Later, compare every new response against that range. for i in $( seq 1 10 ) ; do curl -s your-monkeycode-endpoint -d '{"prompt":"triage this bug"}' \ | jq -r '.output' | sha256sum done If the hash variance crosses an evidence threshold, the gate flags it. Gate 3: Time-box and cost-cap Free servers queue. You need a timeout and a token budget. I use 8 seconds and a hard cap of 600 tokens. The gate reads usage metadata from the response and rejects when either limit is hit. if response . elapsed > 8 or response . usage . total_tokens > 600 : reject ( " over budget " ) Track this weekly. Drift often starts as a slow climb. Gate 4: Apply semantic checks Gates are not jus

Yao Yue discusses the fundamental limitations of standard line charts for system observability. Drawing from 15 years of operating large-scale systems, she shares how engineering leaders and software architects can transform telemetry data - moving beyond simple time-series defaults - to build visualizations that directly answer critical capacity, latency, and fleet-sizing questions. By Yao Yue

HashiCorp is positioning HCP Terraform as the governance and control plane for a new generation of AI-driven infrastructure, arguing that the rapid adoption of coding agents is shifting the biggest infrastructure challenge from writing configuration to verifying and safely executing it. By Craig Risi

September marks the official start of Preptember, a month dedicated to organizers planning local...

A syndication job noticed before I did A scheduled task publishes one blog post a day to a developer community. It fetches the article from my own site, converts it, and posts it. At 10:00 it failed four times with this: Server error '521 <none>' for url 'https://neuragrowth.co/blog/schema-grammar-ceiling/' 521 is Cloudflare saying the origin server did not answer. So the interesting failure was not in the syndication job at all. My whole site was down, and had been for over three hours by then. The server itself was fine: four days of uptime, load under 0.2, disk at eight percent. But systemctl is-active nginx said failed , and nothing was listening on 80 or 443. nginx resolves your upstreams before it starts The journal had the whole thing in three lines: 06:49:54 systemd[1]: Stopping nginx.service... 06:49:54 nginx[36027]: [emerg] host not found in upstream "example-backend.tld" in /etc/nginx/sites-enabled/site:104 06:49:54 nginx[36027]: nginx: configuration file test failed Line 104 was a small proxy I had added months earlier so the public site could forward one form endpoint to a backend on a different host without revealing its name: location = /api/lead-capture { proxy_pass https://example-backend.tld/api/lead-capture ; proxy_ssl_server_name on ; proxy_set_header Host example-backend.tld ; } When proxy_pass contains a literal hostname, nginx resolves it while parsing the configuration , and treats failure as a fatal config error. That resolution happens inside ExecStartPre=/usr/sbin/nginx -t , so a name it cannot look up means the unit never starts. The config was not wrong. It was valid before the restart and valid after, and nginx -t passed by hand seven hours later. It was invalid for about one second. Why DNS was gone for exactly that instant Ten seconds of journal, reconstructed: 06:49:44 apt-daily-upgrade.service starts 06:49:53 "Reexecution requested ... (unit apt-daily-upgrade.service)" 06:49:53 systemd reexecuting (it had just upgraded itself) 06:49

Source generators are often introduced as a way to remove boilerplate. That is useful, but it was not the main architectural reason FUI moved more of its Unity UI pipeline into Roslyn. The harder question begins after binding code has already been generated: does the runtime still need to scan assemblies, inspect attributes, resolve types, and reconstruct the relationship between a View, ViewModel, BindingContext, and Presenter? FUI's answer is to move that composition step to compile time. The generator does not stop at property notifications and binding callbacks. It also emits binding factories and strongly typed routes, so the Player runtime executes an already-validated object graph instead of rediscovering it. This article explains why that distinction matters, how the design evolved, and what the final architecture gains beyond the vague promise of “less reflection.” The original problem was repetitive protocol code Consider a settings screen with a title, a volume slider, a vibration toggle, and a close button. The ViewModel is small, but connecting it to the UI requires a surprisingly large protocol: propagate property changes to UI elements; propagate control changes back to the ViewModel; connect UI events to commands; perform initial synchronization; unsubscribe every handler during unbinding; construct the matching BindingContext and Presenter. None of these steps is individually difficult. The risk comes from repetition. A missing unsubscribe, an incompatible target member, or an incorrect string may remain invisible until that specific screen opens. The earliest code-generation experiment preserved in FUI's repository was an external FUICompiler executable. It targeted .NET 6, was published as a self-contained win-x64 tool, walked Roslyn syntax nodes, extracted binding attributes, and emitted BindingContext source. The central idea was already present: var classDeclarations = root . DescendantNodes () . OfType < ClassDeclarationSyntax >(); foreach ( v

Understanding when to use <ins> , <del> and <s> HTML tags Comparative Feature <ins> element <del> element <s> element Semantic Definition Represents the content that has been added to a document. Represents a range of text that has been deleted from a document. Represents content that is no longer accurate, correct, or relevant. Use Case New edits in a code, in a text, tracked changes Document edits, tracked changes, or visual/structural revisions (often paired with <ins> ). Outdated information, deprecation notices, old prices, or sold-out items. Accessible Code Pattern The meeting is on <span class="sr-only">previous date: </span><del>Monday</del> <span class="sr-only">new date: </span><ins>Wednesday</ins>. The meeting is on <span class="sr-only">previous date: </span><del>Monday</del> <span class="sr-only">new date: </span><ins>Wednesday</ins>. <span class="sr-only">Original price: </span><s>$100.00</s> Visible Representation The meeting is on Monday Wednesday The meeting is on Monday Wednesday $100.00 $34.99 Unique Attributes cite (URL pointing to the explanation of the deletion) datetime (date/time of the deletion) cite (URL pointing to the explanation of the deletion) datetime (date/time of the deletion) None Default Browser Style By default, it has an underline but it can be changed to a bold style, put a background green to show insertion, etc. Renders with a visual line-through (strikethrough) Renders with a visual line-through (strikethrough) Implicit ARIA Mapping: role="deletion" and role="insertion" The <del> and <s> tags map to the accessibility role of deletion (and <ins> to insertion ). Sighted users see these as struck through or underlined, but screen reader support for announcing these changes is inconsistent. Understanding the Accessibility Tree Mapping Under the W3C Accessibility API Mappings, these tags are programmatically mapped to specific accessibility roles that browsers expose to the OS accessibility tree: <del> maps to role="deletion" (se

The Challenge: Realtime in the Age of Server Components The paradigm shift toward React Server Components (RSC) and the Next.js App Router has fundamentally changed how we architect web applications. We are now defaulting to server-side rendering, which is fantastic for performance, SEO, and initial load times. However, a common friction point arises when we need to inject high-frequency, bidirectional realtime data into these server-rendered pages. Too often, developers fall into the trap of importing heavy socket libraries directly into their server components or wrapping their entire application in massive context providers, effectively bloating the client bundle and negating the performance gains of the App Router. The Solution: The "Client Island" Pattern Instead of fighting the architecture, we can embrace "Client Islands"—a pattern where we isolate the stateful, client-side logic into a tiny, focused leaf component. By keeping the WebSocket management strictly client-side, we ensure that our server-rendered pages remain lightweight, fast, and cacheable. Implementing the WebSocket Island The goal is to keep the WebSocket connection lifecycle outside of the rendering flow. We utilize useEffect to manage the connection, ensuring it only runs on the client, and we tap into data fetching libraries like TanStack Query or SWR to surgically update the UI. ' use client ' ; import { useEffect } from ' react ' ; import { useQueryClient } from ' @tanstack/react-query ' ; export function RealtimeSync ({ token }) { const queryClient = useQueryClient (); useEffect (() => { const ws = new WebSocket ( `wss://realtime.example.com?token= ${ token } ` ); ws . onmessage = ( event ) => { const data = JSON . parse ( event . data ); queryClient . setQueryData ([ ' items ' ], data ); }; return () => ws . close (); }, [ token , queryClient ]); return null ; // This component renders nothing, just manages the side effect } Persistence via RootLayout To prevent the connection from dropp