{"componentChunkName":"component---gatsby-theme-spaceout-src-templates-article-template-tsx","path":"/langchain-langgraph-and-agentic-ai-patterns","result":{"pageContext":{"article":{"id":"b56bbab0-103a-5aae-8b92-f235683de9d4","slug":"/langchain-langgraph-and-agentic-ai-patterns","secret":false,"title":"LangChain, LangGraph, and Agentic AI Patterns","author":"Luke Celitan","date":"June 30th, 2025","dateForSEO":"2025-06-30T00:00:00.000Z","timeToRead":6,"excerpt":"A guide to LangChain and LangGraph","subscription":true,"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"LangChain, LangGraph, and Agentic AI Patterns\",\n \"excerpt\": \"A guide to LangChain and LangGraph\",\n \"date\": \"2025-06-30T00:00:00.000Z\",\n \"hero\": \"cover.png\",\n \"author\": \"Luke Celitan\",\n \"category\": \"Post\",\n \"tech\": [\"TS\", \"JS\"]\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", {\n \"id\": \"langchain-langgraph-and-agentic-ai-patterns\"\n }, \"LangChain, LangGraph, and Agentic AI Patterns\"), mdx(\"h3\", {\n \"id\": \"introduction\"\n }, \"Introduction\"), mdx(\"p\", null, \"The world of AI is rapidly evolving, and with the rise of large language models (LLMs), the need for robust, flexible, and controllable agentic systems has never been greater. Two of the most exciting frameworks in this space are \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"LangChain\"), \" and \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"LangGraph\"), \". These libraries empower developers to build advanced, agentic AI applications that can reason, plan, use tools, collaborate, and even reflect on their own actions.\"), mdx(\"p\", null, \"In this post, I\\u2019ll take you on a comprehensive journey through LangChain and LangGraph, exploring their architectures, the agentic AI patterns they enable, and how to use them in practice. We\\u2019ll cover everything from the basics to advanced multi-agent workflows, with plenty of code, diagrams, best practices, and real-world use cases. Whether you\\u2019re building a knowledge assistant, a data analysis pipeline, or a fully autonomous agentic system, this guide will serve as your definitive technical reference.\"), mdx(\"h2\", {\n \"id\": \"langchain-overview\"\n }, \"LangChain Overview\"), mdx(\"h3\", {\n \"id\": \"what-is-langchain\"\n }, \"What is LangChain?\"), mdx(\"p\", null, \"LangChain is a powerful open-source framework designed to make it easy to build applications with LLMs. It provides abstractions for chains, agents, tools, memory, and more, allowing you to compose complex workflows that leverage the reasoning and generative capabilities of modern language models.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Key Concepts:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Chains:\"), \" Sequences of calls (to LLMs, APIs, or other functions) that form a deterministic workflow.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Agents:\"), \" Systems that use an LLM to decide their own control flow, enabling dynamic, tool-using, and autonomous behaviors.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Tools:\"), \" External functions or APIs that agents can call (e.g., web search, calculators, databases).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Memory:\"), \" Mechanisms for storing and recalling information across interactions (short-term, long-term, or custom).\")), mdx(\"p\", null, \"LangChain is available in both Python and TypeScript/JavaScript, and is widely used for building chatbots, RAG systems, tool-using agents, and more.\"), mdx(\"h3\", {\n \"id\": \"chains-vs-agents\"\n }, \"Chains vs. Agents\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Chains\"), \" are like scripts: they execute a fixed sequence of steps every time.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Agents\"), \" are like autonomous workers: they use an LLM to decide what to do next, which tool to use, or when to stop.\")), mdx(\"p\", null, \"LangChain\\u2019s agent abstractions make it easy to build systems that can reason, use tools, and adapt to new tasks.\"), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"langgraph-overview\"\n }, \"LangGraph Overview\"), mdx(\"h3\", {\n \"id\": \"what-is-langgraph\"\n }, \"What is LangGraph?\"), mdx(\"p\", null, \"LangGraph is a next-generation framework for building \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"graph-based agentic workflows\"), \". While LangChain introduced the world to chains and agents, LangGraph takes things further by letting you define your application as a \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"graph of nodes and edges\"), \", where each node is a function (often an LLM call or tool) and edges define the control flow.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Why LangGraph?\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Controllability:\"), \" Explicitly define the flow of your application as a graph.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Persistence:\"), \" Built-in support for checkpointing, state management, and time travel.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Streaming:\"), \" First-class support for streaming outputs and events.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Debugging:\"), \" Visualize and debug your agentic workflows with LangGraph Studio.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Modularity:\"), \" Compose complex systems from reusable subgraphs and nodes.\")), mdx(\"p\", null, \"LangGraph is especially powerful for building advanced agentic systems: multi-agent collaboration, self-reflective RAG, planning and execution, human-in-the-loop, and more.\"), mdx(\"h3\", {\n \"id\": \"core-concepts\"\n }, \"Core Concepts\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"State:\"), \" A shared data structure representing the current snapshot of your application (e.g., messages, memory, documents).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Nodes:\"), \" Functions that perform work (LLM calls, tool invocations, grading, etc.).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Edges:\"), \" Define which node(s) to execute next, based on the current state (can be conditional or fixed).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Reducers:\"), \" Functions that specify how updates from nodes are applied to the state.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Example: Minimal LangGraph Workflow (TypeScript)\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"import { StateGraph, Annotation, START, END } from \\\"@langchain/langgraph\\\";\\n\\nconst State = Annotation.Root({\\n input: Annotation,\\n output: Annotation,\\n});\\n\\nconst nodeA = async (state: typeof State.State) => {\\n return { output: `Hello, ${state.input}!` };\\n};\\n\\nconst graph = new StateGraph(State)\\n .addNode(\\\"nodeA\\\", nodeA)\\n .addEdge(START, \\\"nodeA\\\")\\n .addEdge(\\\"nodeA\\\", END)\\n .compile();\\n\\nawait graph.invoke({ input: \\\"World\\\" }); // { output: \\\"Hello, World!\\\" }\\n\")), mdx(\"p\", null, \"LangGraph\\u2019s explicit graph structure makes it easy to build, debug, and extend complex agentic workflows.\"), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"agentic-ai-patterns\"\n }, \"Agentic AI Patterns\"), mdx(\"h3\", {\n \"id\": \"what-is-an-agent-in-ai\"\n }, \"What is an Agent in AI?\"), mdx(\"p\", null, \"An \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"agent\"), \" is a system that uses an LLM to decide the control flow of an application. Unlike a chain (which always runs the same steps), an agent can choose which tools to use, when to stop, and how to adapt to new situations. This autonomy enables more flexible, powerful, and intelligent applications.\"), mdx(\"h3\", {\n \"id\": \"why-agentic-patterns\"\n }, \"Why Agentic Patterns?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Dynamic Control Flow:\"), \" Agents can make decisions, branch, and adapt.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Tool Use:\"), \" Agents can call external APIs, search engines, databases, and more.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Collaboration:\"), \" Multiple agents can work together, each specializing in different tasks.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Reflection:\"), \" Agents can grade, critique, and improve their own outputs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Human-in-the-Loop:\"), \" Agents can pause for human feedback or approval.\")), mdx(\"h3\", {\n \"id\": \"common-agentic-patterns\"\n }, \"Common Agentic Patterns\"), mdx(\"h4\", {\n \"id\": \"1-react-reasoning-and-acting\"\n }, \"1. ReAct (Reasoning and Acting)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The agent alternates between reasoning (LLM) and acting (tool use).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Example: \\u201CTo answer this, I need to search the web. \", \"[calls search tool]\", \" Now, based on the results\\u2026\\u201D\")), mdx(\"h4\", {\n \"id\": \"2-plan-and-execute\"\n }, \"2. Plan-and-Execute\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The agent first plans a sequence of steps, then executes them (possibly using tools).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Example: \\u201CPlan: 1) Find the winner of the 2023 Australian Open. 2) Find their hometown.\\u201D\")), mdx(\"h4\", {\n \"id\": \"3-tool-using-agents\"\n }, \"3. Tool-Using Agents\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The agent decides which tool to use at each step (search, calculator, database, etc.).\")), mdx(\"h4\", {\n \"id\": \"4-router-agents\"\n }, \"4. Router Agents\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The agent routes tasks to specialized sub-agents or workflows.\")), mdx(\"h4\", {\n \"id\": \"5-multi-agent-collaboration\"\n }, \"5. Multi-Agent Collaboration\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Multiple agents (or agent types) work together, often in a supervisor/worker or divide-and-conquer pattern.\")), mdx(\"h4\", {\n \"id\": \"6-reflection-and-self-correction-crag-self-rag\"\n }, \"6. Reflection and Self-Correction (CRAG, Self-RAG)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The agent grades or critiques its own outputs, possibly re-running steps if needed.\")), mdx(\"h4\", {\n \"id\": \"7-human-in-the-loop\"\n }, \"7. Human-in-the-Loop\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The agent pauses for human input, approval, or correction at key steps.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Diagram: Agentic Patterns\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"[User] -> [Agent] -> [Tool/LLM] -> [Reflection/Grader] -> [Output]\\n |-> [Sub-Agent/Worker]\\n |-> [Human-in-the-Loop]\\n\")), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"practical-usage-langchain-and-langgraph-in-practice\"\n }, \"Practical Usage: LangChain and LangGraph in Practice\"), mdx(\"p\", null, \"Let\\u2019s dive into how to use these frameworks to build real-world agentic AI systems. I\\u2019ll walk through several patterns, with code and explanations.\"), mdx(\"h3\", {\n \"id\": \"1-retrieval-augmented-generation-rag-with-langgraph\"\n }, \"1. Retrieval-Augmented Generation (RAG) with LangGraph\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"RAG\"), \" is a foundational pattern for knowledge assistants: retrieve relevant documents, then generate an answer grounded in those documents.\"), mdx(\"h4\", {\n \"id\": \"step-by-step-building-a-rag-agent-in-langgraph\"\n }, \"Step-by-Step: Building a RAG Agent in LangGraph\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Load Documents:\"), \" Use loaders (e.g., CheerioWebBaseLoader) to fetch and parse web pages.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Split Documents:\"), \" Use text splitters to chunk documents for retrieval.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Vector Store:\"), \" Embed and index chunks for similarity search.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Retriever:\"), \" Query the vector store for relevant chunks.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Agent State:\"), \" Track messages, retrieved docs, and conversation history.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Nodes:\"), \" Define functions for retrieval, grading, rewriting, and generation.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Edges:\"), \" Control flow: retrieve -> grade -> generate or rewrite -> \\u2026\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Example: Minimal RAG Graph (TypeScript)\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"import { CheerioWebBaseLoader } from \\\"@langchain/community/document_loaders/web/cheerio\\\";\\nimport { RecursiveCharacterTextSplitter } from \\\"@langchain/textsplitters\\\";\\nimport { MemoryVectorStore } from \\\"langchain/vectorstores/memory\\\";\\nimport { OpenAIEmbeddings } from \\\"@langchain/openai\\\";\\nimport { StateGraph, Annotation, START, END } from \\\"@langchain/langgraph\\\";\\n\\n// 1. Load and split documents\\nconst urls = [\\\"https://lilianweng.github.io/posts/2023-06-23-agent/\\\"];\\nconst docs = await Promise.all(urls.map(url => new CheerioWebBaseLoader(url).load()));\\nconst docsList = docs.flat();\\nconst textSplitter = new RecursiveCharacterTextSplitter({ chunkSize: 500, chunkOverlap: 50 });\\nconst docSplits = await textSplitter.splitDocuments(docsList);\\n\\n// 2. Create vector store and retriever\\nconst vectorStore = await MemoryVectorStore.fromDocuments(docSplits, new OpenAIEmbeddings());\\nconst retriever = vectorStore.asRetriever();\\n\\n// 3. Define state and nodes\\nconst GraphState = Annotation.Root({\\n question: Annotation(),\\n documents: Annotation({ reducer: (x, y) => y ?? x ?? [] }),\\n answer: Annotation(),\\n});\\n\\nconst retrieve = async (state) => ({ documents: await retriever.invoke(state.question) });\\nconst generate = async (state) => ({ answer: `Answer based on: ${state.documents.map(d => d.pageContent).join(\\\" \\\")}` });\\n\\n// 4. Build the graph\\nconst workflow = new StateGraph(GraphState)\\n .addNode(\\\"retrieve\\\", retrieve)\\n .addNode(\\\"generate\\\", generate)\\n .addEdge(START, \\\"retrieve\\\")\\n .addEdge(\\\"retrieve\\\", \\\"generate\\\")\\n .addEdge(\\\"generate\\\", END)\\n .compile();\\n\\nconst result = await workflow.invoke({ question: \\\"What are agentic patterns?\\\" });\\nconsole.log(result.answer);\\n\")), mdx(\"h4\", {\n \"id\": \"advanced-corrective-rag-crag-self-rag\"\n }, \"Advanced: Corrective RAG (CRAG), Self-RAG\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"CRAG:\"), \" Grade retrieved docs for relevance; if not relevant, rewrite query or use web search.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Self-RAG:\"), \" Reflect on the answer; if not grounded or useful, re-run steps.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Key Nodes:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"gradeDocuments\"), \": LLM grades each doc for relevance.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"transformQuery\"), \": LLM rewrites the query for better retrieval.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"webSearch\"), \": Fallback to web search if retrieval fails.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"generateGenerationVDocumentsGrade\"), \": Grade if answer is grounded in docs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"generateGenerationVQuestionGrade\"), \": Grade if answer is useful for the question.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Edge Logic:\"), \" Use conditional edges to decide next steps based on grades.\"), mdx(\"h3\", {\n \"id\": \"2-multi-agent-collaboration\"\n }, \"2. Multi-Agent Collaboration\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Pattern:\"), \" Divide-and-conquer with specialized agents (e.g., Researcher + Chart Generator).\"), mdx(\"h4\", {\n \"id\": \"example-researcher--chart-generator\"\n }, \"Example: Researcher + Chart Generator\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Researcher Agent:\"), \" Uses web search to gather data.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Chart Generator Agent:\"), \" Uses D3.js (via a tool) to generate charts from data.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"State:\"), \" Tracks messages and sender.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Edge Logic:\"), \" Route between agents based on task completion.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Code Sketch:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"import { StateGraph, Annotation, START, END } from \\\"@langchain/langgraph\\\";\\n// ... (define agents, tools, and nodes as in the context)\\n\\nconst AgentState = Annotation.Root({\\n messages: Annotation({ reducer: (x, y) => x.concat(y) }),\\n sender: Annotation({ reducer: (x, y) => y ?? x ?? \\\"user\\\" }),\\n});\\n\\n// Define nodes for Researcher, ChartGenerator, and tool calls\\n// ...\\n\\nconst workflow = new StateGraph(AgentState)\\n .addNode(\\\"Researcher\\\", researchNode)\\n .addNode(\\\"ChartGenerator\\\", chartNode)\\n .addNode(\\\"call_tool\\\", toolNode)\\n // ... (add conditional edges for routing)\\n .addEdge(START, \\\"Researcher\\\")\\n .compile();\\n\")), mdx(\"h4\", {\n \"id\": \"advanced-hierarchical-agent-teams\"\n }, \"Advanced: Hierarchical Agent Teams\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Compose subgraphs for teams (e.g., research team, writing team).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use a supervisor agent to delegate tasks.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Enables scalable, modular multi-agent systems.\")), mdx(\"h3\", {\n \"id\": \"3-planning-and-reasoning-patterns\"\n }, \"3. Planning and Reasoning Patterns\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Pattern:\"), \" ReWOO (plan, execute, solve)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Planner Node:\"), \" LLM generates a plan (sequence of tool calls).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Tool Executor Node:\"), \" Executes each step, with variable substitution.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Solver Node:\"), \" LLM generates the final answer based on evidence.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Code Sketch:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// ... (define state, planner, tool executor, solver as in context)\\nconst workflow = new StateGraph(GraphState)\\n .addNode(\\\"plan\\\", getPlan)\\n .addNode(\\\"tool\\\", toolExecution)\\n .addNode(\\\"solve\\\", solve)\\n .addEdge(START, \\\"plan\\\")\\n .addEdge(\\\"plan\\\", \\\"tool\\\")\\n .addConditionalEdges(\\\"tool\\\", routeFn)\\n .addEdge(\\\"solve\\\", END)\\n .compile();\\n\")), mdx(\"h3\", {\n \"id\": \"4-human-in-the-loop-and-evaluation\"\n }, \"4. Human-in-the-Loop and Evaluation\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Pattern:\"), \" Interrupts, breakpoints, simulation\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Simulated User:\"), \" LLM acts as a user for chatbot evaluation.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Chatbot Node:\"), \" LLM acts as the bot.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Edge Logic:\"), \" Continue or end based on conversation length or special tokens.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Code Sketch:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// ... (define simulatedUserNode, chatBotNode, shouldContinue)\\nconst workflow = new StateGraph(MessagesAnnotation)\\n .addNode('user', simulatedUserNode)\\n .addNode('chatbot', chatBotNode)\\n .addEdge('chatbot', 'user')\\n .addConditionalEdges('user', shouldContinue, { [END]: END, continue: 'chatbot' })\\n .addEdge(START, 'chatbot')\\n .compile();\\n\")), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"advanced-concepts-and-best-practices\"\n }, \"Advanced Concepts and Best Practices\"), mdx(\"h3\", {\n \"id\": \"memory-in-agentic-systems\"\n }, \"Memory in Agentic Systems\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Short-term memory:\"), \" In-context (conversation history)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Long-term memory:\"), \" External vector stores, databases\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Sensory memory:\"), \" Embeddings for raw inputs (text, images)\")), mdx(\"h3\", {\n \"id\": \"state-management-and-reducers\"\n }, \"State Management and Reducers\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use reducers to control how state updates are applied (e.g., append, overwrite, merge).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"For message histories, use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"messagesStateReducer\"), \" for robust handling.\")), mdx(\"h3\", {\n \"id\": \"persistence-checkpointing-and-time-travel\"\n }, \"Persistence, Checkpointing, and Time Travel\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use built-in checkpointers to save and resume graph state.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Enables human-in-the-loop, debugging, and fault-tolerance.\")), mdx(\"h3\", {\n \"id\": \"streaming-debugging-and-visualization\"\n }, \"Streaming, Debugging, and Visualization\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Stream outputs and events for responsive UX.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use LangGraph Studio for graph visualization and step-by-step debugging.\")), mdx(\"h3\", {\n \"id\": \"subgraphs-and-modularity\"\n }, \"Subgraphs and Modularity\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Compose complex systems from reusable subgraphs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Enables hierarchical agent teams and scalable architectures.\")), mdx(\"h3\", {\n \"id\": \"performance-considerations\"\n }, \"Performance Considerations\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Minimize unnecessary LLM/tool calls.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use conditional edges to avoid redundant steps.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Profile and monitor token usage and latency.\")), mdx(\"h3\", {\n \"id\": \"troubleshooting\"\n }, \"Troubleshooting\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use graph visualization to debug control flow.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Add logging to nodes for step-by-step tracing.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Handle edge cases (e.g., empty retrieval, tool failures) with fallback logic.\")), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"real-world-use-cases\"\n }, \"Real-World Use Cases\"), mdx(\"h3\", {\n \"id\": \"knowledge-assistants\"\n }, \"Knowledge Assistants\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"RAG, CRAG, Self-RAG for document Q&A, research, and summarization.\")), mdx(\"h3\", {\n \"id\": \"data-analysis-and-visualization\"\n }, \"Data Analysis and Visualization\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Multi-agent workflows for data gathering, analysis, and chart generation.\")), mdx(\"h3\", {\n \"id\": \"automated-research-and-report-generation\"\n }, \"Automated Research and Report Generation\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Planning, tool use, and multi-agent collaboration for end-to-end research pipelines.\")), mdx(\"h3\", {\n \"id\": \"customer-support-bots\"\n }, \"Customer Support Bots\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Simulation and evaluation with human-in-the-loop for robust, user-friendly bots.\")), mdx(\"h3\", {\n \"id\": \"workflow-automation\"\n }, \"Workflow Automation\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Planning, execution, and tool use for automating business processes and decision-making.\")), mdx(\"hr\", null), mdx(\"video\", {\n width: \"1150px\",\n height: \"100%\",\n autoPlay: true,\n muted: true,\n style: {\n margin: 'auto'\n }\n }, mdx(\"source\", {\n src: \"/28477cffc362798cb08bb544d106d89c/intro.mp4\",\n type: \"video/mp4\"\n }), \"Your browser does not support the video tag\"), mdx(\"h2\", {\n \"id\": \"conclusion\"\n }, \"Conclusion\"), mdx(\"p\", null, \"LangChain and LangGraph represent the cutting edge of agentic AI development. LangChain makes it easy to build chains and agents, while LangGraph empowers you to design, debug, and deploy complex, controllable agentic workflows as graphs. By mastering these frameworks and the agentic patterns they enable, you can build AI systems that are not only powerful and flexible, but also reliable, debuggable, and ready for real-world deployment.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"When to use which?\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"LangChain\"), \" for simple chains, basic agents, and rapid prototyping.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"LangGraph\"), \" for advanced agentic systems: multi-agent, self-reflective, human-in-the-loop, or production-grade workflows.\")), mdx(\"p\", null, \"The future of AI is agentic, and with LangChain and LangGraph, you have the tools to build it. Happy hacking!\"));\n}\n;\nMDXContent.isMDXComponent = true;","tech":["TS","JS"],"category":"Post","appDescription":null,"hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAD70lEQVQ4y31U7U/TVxT+/QNGk+2TH8xQM6JfXIDyMoEhMQpMlAWjvBRJxMz4sklcpEUZW2gpDAHHoBj7QcGs8kEcSyQQspIwwCXMtlAobLy1/f36Agj/w7NzDm2pW7IPT+5z7z157nPPOfcqGxsb2Hr3DuFIBFowiGAotDsSQsR5HgyGZK7FoAWhapogoKrvQXE6nXD85oDX60U4HKZgDRE6JH5AFHtiWhyq+r6gyoL1RiO+KClBW1sbtrd3sLy8gomJCSwuLokoB7KjuEgCdkU0EVKjXLFYLMjLy0NjYyNevx7G8PAw7t9/gNraWgmKsGggIALskEX8NOdDQnSjmDM16lhhsrq2BofDgRZLC+qN9SgsLERBQQFmZmawsLCAza0tyaXP55MDeM6iU1NTAt4Tp1pUkINWV1dx/cvrSE1JRVbWp8I7OzpRU1ODly8HMTj4Ci6XG6Ojo3KTvr4+vLC/oNwvxp3HBQMBVQricIzL1W1PbBgbG0Npaam4vXOnFhO/T+Kt04WrV6+hqOhzPOvrpxv8KXlmDXYsV96rmIrNzS0qzDY2Njel0svLy3j69Bl+GfoVfxPv7u5BcfF55H6Wh/7+59JunK619XVw+8UdqlFRKT+dFAPnhl2Mj4+jvb0DVVVXUFGpR0FhEQn2y4E2mw2mJpOkQNomsQ0S28Lv90vyR0ZGoCeRixcv4dLlMmRmZiE/Px8mkwlWq5VyOwizuVnybrfbSVDV4hVKdMrNvLKyAvvPdty4cRMXLpRAl56O7OwcDAwMYGhoCF1dXbA0W8S5TqdDQ8O3LLjXlPEmjTp8TtdiF2/e/IHJySlyO4qlpb+wvbMDt9uNunt1JFaFEyc+EcH2hw+hJOZMjeaQ3/D09DRe0XU8Ho+scRdwoThmnYrA46POR0hLTYMuTYfvqDtm3bNQQhQkoMrGeJi4j69NPEKVDPK75nfOIM7zWJxrbg6z8/OIUL4ZSq9ej96KCljLy/BYX4nHVXri5cJ5vYf47lyPnrLLsHKsrJeht7ICtupqPKm+QmvlAuXrDz5Ec0YGzJSD1pwc4a3Z2Wg4dgwPkpNpPV3WLVTFH3Jz0XLyJMxUHMNHSbi1bx9uHziA2/v34ysaGUrd4cPoOncOPxYVoZt+nebMTLSdOoWOM2fQefas7P10vhjtp0+j4fhxGCjekJSEe4cO4e7Bg/iGcDcBivHjZLTk5KKVfhxTegaa6PTvU1IEZhK3UJs0kUvmhiNHUEdibIK58ehRGP4FZckzDy+90QWClx6/lyolIL7gcmH+rVNG3l+a84DjeVyMYXYO3gQoKjWwyt9PkEG/BoP7kP+9/4GPWum/8OMfvLW0/tBH62QAAAAASUVORK5CYII=","aspectRatio":1,"src":"/static/8d0121465a537b8fbe67dfe613c29ab7/a1946/cover.png","srcSet":"/static/8d0121465a537b8fbe67dfe613c29ab7/5b37e/cover.png 236w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/49058/cover.png 472w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/a1946/cover.png 944w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/6050d/cover.png 1200w","srcWebp":"/static/8d0121465a537b8fbe67dfe613c29ab7/99fbb/cover.webp","srcSetWebp":"/static/8d0121465a537b8fbe67dfe613c29ab7/77392/cover.webp 236w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/1f177/cover.webp 472w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/99fbb/cover.webp 944w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/9000d/cover.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M21%2032l-3%201-6%204c-5%204-6%205-6%202%200-2-3-6-5-6l1%202c2%203%203%204%200%206-2%202-3%207%200%207%202-1%202-1%201%206%200%2011%204%2019%2013%2024%205%202%2013%204%2013%202h3l3-1c0-2%204-1%208%202s9%203%2011%200%203-2%202%201-1%204%203%205%206-1%207-5l1-4c0-2%200-2-2-1l-2%202c0%202-1%201-3-1l-4-3c-1-1-2-2-1-3%200-3%203-1%204%202%201%202%202%203%203%202l1-7-1%201c0%202-5-1-8-4s-3-6-2-6c1-1%200-12-2-17-2-4-8-9-14-11H21m0%203h-3l-1%201-1%203c-1%200-2%202-1%203l-3%203-2%201h8c2%201%205%200%205-2h1c0%202%200%202%203%201%201-2%202-2%202-1h1c1-1%200-2-1-3s-1-1%202-1%204-1%203-4l-1-1-1%203v1l-7-4h-4m92%2018v1l-1%201c-2%201-2%201%200%203h3l1%202v6c1%202%201%202-1%203-2%200-2%200-1%201s1%203-1%203v-1l-2-1c-3%200-3-3%200-3%203-1%204-3%202-3l-3-2-3-1%201%202c2%203%202%204-1%203-1%200-3%202-3%205%200%201-1%202-1%200l-2-1h-2v3h-1c0-3-2-2-3%201s-1%203%202%204c3%200%204%201%202%202h-2c-1-2-2-1-2%203l-1%203v-1l-1-1h-2c-2%202-2%204-1%204l1%202h-1c-1-2-4-1-6%202s-2%203-3%201c-2-1-2-2%200-2v-5c-1-4-3-6-3-3h-7l-1%201c-1%200-1-4%201-6l1-2c0-2-2%200-4%202v6l2%205%202%202%201-1h5l-1%203c-2-1-1%201%201%202v2h-3l-1-1c1%200%200-2-2-3l-3-2-2%203c-2%202-4%202-4-2l-1-1-1%203h-2l-1%201%203%201h2l2%201%202%201-1%201c-3-1-2%201%200%203%202%201%202%202%201%203l-2-1-2-3-1-2c0-1-1-2-2-1-3%200-3%200-2%201v5c-2%202%2010%2020%2012%2018l1%201v1h2l1%201v1l1%201c1-1%202%200%202%201l2%201h1c0%201%207%203%208%202%200-1%205%200%207%202h2c0-2%202-3%202-2v2c2%201%208%200%206-1h-4l2-2h10c2%200%203%200%202-1l2-1%201-2%201-2%204-1c5-1%2013%202%2015%206%204%209%2016%2014%2027%2010%208-3%207-3%206%201-3%204-5%2016-4%2017l1-1%202-1v-1l1-1h3c0-1%201-2%203-2%202%201%2011-5%2011-6l-4%201-4%202c0-1%201-2%203-2l4-3%202-2v2h2c2-1%203-3%200-3v-2l2-3c0-2%204-6%204-5h4v-1c0-2-1-2-2-1h-1l1-1v-1l3-3c3-2%204-1%202%201v1l3-3%204-3%202-2c0-1-1-2-2-1l-1-1%203-1%202-1v-1l1-1c1-1%201-1-1-1-3%200-7%204-6%206%201%201%200%201-1%201l-3%202-2%201%202-3c3-3%205-7%203-7l-3%203c-1%202-3%203-3%202v2h-1c-1-1-2-1-3%201h-2l2-2-1-2v-1c1%201%202%200%203-1l1-2h2v-2c-2-2-10%203-16%209l-5%205v-5c0-9-5-18-12-21-6-2-13-3-15-2-1%201-1%201%201%201l2%202h1c2-2%203-1%202%201l1%202%201%201v1l1%201h-1c-2-1-3%200-1%202l-2%202-4%204h-2c1-1%200-2-1-2l-1%201c1%201-2%202-6%202a235%20235%200%2000-7-2h2c2%200%201-4-1-6h-2c-1%201-1%201-1-1l2-3c2-1%203-9%202-9v-3c2-7-2-18-9-25l-5-5c-1-2-2-3-3-2l-3-1c-1-1-3-2-4-1l-2-1c1-2-2-2-2-1m198%2046c-6%201-7%204-3%204l3%203v4h-1v2c-1-1-3%205-2%206%202%201%2011-17%209-19h-6m-20%203l-18%2012-4%204-4-3c-7-6-10-6-12-1l-2%203-1%204-3%202v1h2l-1%201-2%202-3%204c-2%201-3%203-2%203l-1%201v1l-1%201c-1-1-1%200-1%201l-2%203-1%203c1%201%200%201-1%201-3%200-6%204-5%205l-2%203c-3%201-6%205-6%207v1l-2-1-2-1%201%202%201%202-2-1-4%202c-2%201-3%203-2%203l-1%201c-2%200-7%203-6%204l-4%201-1%201-1%202-2%201h-1l-2%201v3l-1%201c-1-1-5%200-7%202l-3%201h-6c0%202-2%202-2%201-1-3-3-2-3%200-1%202%202%209%203%2010v3c-2%202-1%203%201%201h1l-7%208a126%20126%200%2000-11%2011c0-2-3-1-8%205-10%2011-12%2015-11%2016s1%201%206-6c1-2%203-3%203-2l1-1v-1h1c2%200%201%201-2%205-5%207-4%2011%202%2011%206-1%2022-10%2021-11%200-2-1-1-7%201-7%204-11%205-13%204-2%200-2-3%200-4l1-1%204-7%203-7c1-1%2016-17%2017-16l-4%205c-6%206-11%2013-10%2014l-1%201h-1v1l-1%202-1%201-2%201%201%201%201%201c1%203%205%202%2012-1l4-2%2013-8%201-1c0%201%202%200%202-2l2-2%203%202%205%203c3%200%203%200%201%202v1l2-1h7c21%205%2042-1%2057-14%205-4%2010-7%209-4-1%201%203%202%205%201h1c0%202%203%203%209%204%203%201%206%200%204-1l-1-2h1c2%202%202%202%205%201%204-2%2012-2%2012%200s6%206%2010%206c5%200%2014%203%2012%204l-8%201c-5%201-6%202-4%202l5%201h4l4%202h-2l-2%201-1%201-1-1h-5l-3-1-4%201h-2l-3-3c-1-5-8-9-11-6-1%202-3%2011-1%2010%201-1%204%204%203%206l-3%203-3%201%202%203c11%2019%2031%2027%2053%2023%2012-2%2029-13%2028-18v-2c2%200%206-5%205-6v-1c2%200%203%202%203%204%202%205%2012%2011%2012%207l-4-3c-4-2-6-4-3-5%201-1%201-4-1-4-1%201-1%200-1-2%200-1%203-1%207%201l2-1-5-3-4-3v-4l1-2v-19l-6-14-1-1-7-11a58%2058%200%2000-50-11c-12%204-19%2011-12%2011v1c-2%201%200%201%204%201l7-1v-1l1%201%201%201h4a61%2061%200%200013%203c6%200%2020%206%2021%207%201%202%200%202-3%201l-26-1a163%20163%200%2001-27%200h-4l-5-4c-4-3-6-3-10-2-1%201-3%200-4-1-2-2-2-2-1-9l1-13-1-6%208-9%208-10v-1c2%201%204-1%203-2l-5%203-4%203h-1l-1%202v1l-5%205-1%201h-4l1-2v-1c-2%200-3-2%200-2l1-2h-1c-3%202-2%200%201-4%204-5%207-11%206-11l-5%207-6%206c-1%200-6-10-5-11%201-2%2013-8%2014-7l2%201v-2c1-2%202-1%202%201s2%204%204%203v-2c-1-1-1-3%201-3l1%201%203-2%201-4h-2l-1-2c-2%200-20%207-21%209h-1l-1%201c1%200-4%204-6%204s13-11%2025-18l2-2-9%204-9%205c0-1%201-2%2010-7%205-3%206-4%204-4-1-1-3%200-5%201m0%2082c-1%201%200%201%202%201%203%200%206%203%204%206l-1-1c0-1-1-2-4-1l-3%202c0%201%204%204%206%204l3%202c0%202%201%202%202%200l2-4c3-3%202-6-2-8-3-2-9-3-9-1m56%205c-3%202-14%202-16%201h-22l-1%201-1%201c0%202%205%203%2011%203%207%200%2015%202%2011%203h11l7-2%203-1-3-1-3-1%203-2%204-3-4%201m-174%2022l-2%205-1%204-1-1c1-3%200-2-3%200-2%203-1%205%201%204%201-1%201%200%201%201l1%202v-1l1-1c1%201%201%200%201-1%200-2%200-2%201-1%200%203%203%202%2011-2s8-4%203-8c-4-5-5-5-7-2-1%202-4%202-3-1%201-2-1-1-3%202M0%20324v37h401v-75H0v38m273-19l-1%203c1%201%200%203-1%205-2%204%200%207%208%207%205-1%206-1%204-3v-5l-1%202c0%202-1%201-5-2-4-4-3-6%201-6l2-1c-1-2-6-1-7%200m-213%205c-4%203-1%2011%204%2010%201-1%202%200%202%201s-3%202-5%201l-2%201h8l1-8v-6l-3-1c-3%200-4%201-5%202m126%200c-3%204-1%2011%204%2010h3c0%202-3%203-5%203h-2l3%201c5%200%206-2%206-10v-6h-4l-5%202m51%206l1%208%201-2c0-2%201-3%203-3%205%201%207-4%205-8-1-2-2-3-6-3h-4v8M36%20334c-4%203-1%2011%204%2010%201-1%202%200%202%201s-3%202-5%201l-2%201h8l1-8v-6l-3-1c-3%200-4%201-5%202'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAD70lEQVQ4y31U7U/TVxT+/QNGk+2TH8xQM6JfXIDyMoEhMQpMlAWjvBRJxMz4sklcpEUZW2gpDAHHoBj7QcGs8kEcSyQQspIwwCXMtlAobLy1/f36Agj/w7NzDm2pW7IPT+5z7z157nPPOfcqGxsb2Hr3DuFIBFowiGAotDsSQsR5HgyGZK7FoAWhapogoKrvQXE6nXD85oDX60U4HKZgDRE6JH5AFHtiWhyq+r6gyoL1RiO+KClBW1sbtrd3sLy8gomJCSwuLokoB7KjuEgCdkU0EVKjXLFYLMjLy0NjYyNevx7G8PAw7t9/gNraWgmKsGggIALskEX8NOdDQnSjmDM16lhhsrq2BofDgRZLC+qN9SgsLERBQQFmZmawsLCAza0tyaXP55MDeM6iU1NTAt4Tp1pUkINWV1dx/cvrSE1JRVbWp8I7OzpRU1ODly8HMTj4Ci6XG6Ojo3KTvr4+vLC/oNwvxp3HBQMBVQricIzL1W1PbBgbG0Npaam4vXOnFhO/T+Kt04WrV6+hqOhzPOvrpxv8KXlmDXYsV96rmIrNzS0qzDY2Njel0svLy3j69Bl+GfoVfxPv7u5BcfF55H6Wh/7+59JunK619XVw+8UdqlFRKT+dFAPnhl2Mj4+jvb0DVVVXUFGpR0FhEQn2y4E2mw2mJpOkQNomsQ0S28Lv90vyR0ZGoCeRixcv4dLlMmRmZiE/Px8mkwlWq5VyOwizuVnybrfbSVDV4hVKdMrNvLKyAvvPdty4cRMXLpRAl56O7OwcDAwMYGhoCF1dXbA0W8S5TqdDQ8O3LLjXlPEmjTp8TtdiF2/e/IHJySlyO4qlpb+wvbMDt9uNunt1JFaFEyc+EcH2hw+hJOZMjeaQ3/D09DRe0XU8Ho+scRdwoThmnYrA46POR0hLTYMuTYfvqDtm3bNQQhQkoMrGeJi4j69NPEKVDPK75nfOIM7zWJxrbg6z8/OIUL4ZSq9ej96KCljLy/BYX4nHVXri5cJ5vYf47lyPnrLLsHKsrJeht7ICtupqPKm+QmvlAuXrDz5Ec0YGzJSD1pwc4a3Z2Wg4dgwPkpNpPV3WLVTFH3Jz0XLyJMxUHMNHSbi1bx9uHziA2/v34ysaGUrd4cPoOncOPxYVoZt+nebMTLSdOoWOM2fQefas7P10vhjtp0+j4fhxGCjekJSEe4cO4e7Bg/iGcDcBivHjZLTk5KKVfhxTegaa6PTvU1IEZhK3UJs0kUvmhiNHUEdibIK58ehRGP4FZckzDy+90QWClx6/lyolIL7gcmH+rVNG3l+a84DjeVyMYXYO3gQoKjWwyt9PkEG/BoP7kP+9/4GPWum/8OMfvLW0/tBH62QAAAAASUVORK5CYII=","aspectRatio":1,"src":"/static/8d0121465a537b8fbe67dfe613c29ab7/3ddd4/cover.png","srcSet":"/static/8d0121465a537b8fbe67dfe613c29ab7/078a8/cover.png 163w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/e56da/cover.png 327w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/3ddd4/cover.png 653w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/c5cc7/cover.png 980w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/6050d/cover.png 1200w","srcWebp":"/static/8d0121465a537b8fbe67dfe613c29ab7/0acdf/cover.webp","srcSetWebp":"/static/8d0121465a537b8fbe67dfe613c29ab7/ac59e/cover.webp 163w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/7660b/cover.webp 327w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/0acdf/cover.webp 653w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/75470/cover.webp 980w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/9000d/cover.webp 1200w","sizes":"(max-width: 653px) 100vw, 653px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M21%2032l-3%201-6%204c-5%204-6%205-6%202%200-2-3-6-5-6l1%202c2%203%203%204%200%206-2%202-3%207%200%207%202-1%202-1%201%206%200%2011%204%2019%2013%2024%205%202%2013%204%2013%202h3l3-1c0-2%204-1%208%202s9%203%2011%200%203-2%202%201-1%204%203%205%206-1%207-5l1-4c0-2%200-2-2-1l-2%202c0%202-1%201-3-1l-4-3c-1-1-2-2-1-3%200-3%203-1%204%202%201%202%202%203%203%202l1-7-1%201c0%202-5-1-8-4s-3-6-2-6c1-1%200-12-2-17-2-4-8-9-14-11H21m0%203h-3l-1%201-1%203c-1%200-2%202-1%203l-3%203-2%201h8c2%201%205%200%205-2h1c0%202%200%202%203%201%201-2%202-2%202-1h1c1-1%200-2-1-3s-1-1%202-1%204-1%203-4l-1-1-1%203v1l-7-4h-4m92%2018v1l-1%201c-2%201-2%201%200%203h3l1%202v6c1%202%201%202-1%203-2%200-2%200-1%201s1%203-1%203v-1l-2-1c-3%200-3-3%200-3%203-1%204-3%202-3l-3-2-3-1%201%202c2%203%202%204-1%203-1%200-3%202-3%205%200%201-1%202-1%200l-2-1h-2v3h-1c0-3-2-2-3%201s-1%203%202%204c3%200%204%201%202%202h-2c-1-2-2-1-2%203l-1%203v-1l-1-1h-2c-2%202-2%204-1%204l1%202h-1c-1-2-4-1-6%202s-2%203-3%201c-2-1-2-2%200-2v-5c-1-4-3-6-3-3h-7l-1%201c-1%200-1-4%201-6l1-2c0-2-2%200-4%202v6l2%205%202%202%201-1h5l-1%203c-2-1-1%201%201%202v2h-3l-1-1c1%200%200-2-2-3l-3-2-2%203c-2%202-4%202-4-2l-1-1-1%203h-2l-1%201%203%201h2l2%201%202%201-1%201c-3-1-2%201%200%203%202%201%202%202%201%203l-2-1-2-3-1-2c0-1-1-2-2-1-3%200-3%200-2%201v5c-2%202%2010%2020%2012%2018l1%201v1h2l1%201v1l1%201c1-1%202%200%202%201l2%201h1c0%201%207%203%208%202%200-1%205%200%207%202h2c0-2%202-3%202-2v2c2%201%208%200%206-1h-4l2-2h10c2%200%203%200%202-1l2-1%201-2%201-2%204-1c5-1%2013%202%2015%206%204%209%2016%2014%2027%2010%208-3%207-3%206%201-3%204-5%2016-4%2017l1-1%202-1v-1l1-1h3c0-1%201-2%203-2%202%201%2011-5%2011-6l-4%201-4%202c0-1%201-2%203-2l4-3%202-2v2h2c2-1%203-3%200-3v-2l2-3c0-2%204-6%204-5h4v-1c0-2-1-2-2-1h-1l1-1v-1l3-3c3-2%204-1%202%201v1l3-3%204-3%202-2c0-1-1-2-2-1l-1-1%203-1%202-1v-1l1-1c1-1%201-1-1-1-3%200-7%204-6%206%201%201%200%201-1%201l-3%202-2%201%202-3c3-3%205-7%203-7l-3%203c-1%202-3%203-3%202v2h-1c-1-1-2-1-3%201h-2l2-2-1-2v-1c1%201%202%200%203-1l1-2h2v-2c-2-2-10%203-16%209l-5%205v-5c0-9-5-18-12-21-6-2-13-3-15-2-1%201-1%201%201%201l2%202h1c2-2%203-1%202%201l1%202%201%201v1l1%201h-1c-2-1-3%200-1%202l-2%202-4%204h-2c1-1%200-2-1-2l-1%201c1%201-2%202-6%202a235%20235%200%2000-7-2h2c2%200%201-4-1-6h-2c-1%201-1%201-1-1l2-3c2-1%203-9%202-9v-3c2-7-2-18-9-25l-5-5c-1-2-2-3-3-2l-3-1c-1-1-3-2-4-1l-2-1c1-2-2-2-2-1m198%2046c-6%201-7%204-3%204l3%203v4h-1v2c-1-1-3%205-2%206%202%201%2011-17%209-19h-6m-20%203l-18%2012-4%204-4-3c-7-6-10-6-12-1l-2%203-1%204-3%202v1h2l-1%201-2%202-3%204c-2%201-3%203-2%203l-1%201v1l-1%201c-1-1-1%200-1%201l-2%203-1%203c1%201%200%201-1%201-3%200-6%204-5%205l-2%203c-3%201-6%205-6%207v1l-2-1-2-1%201%202%201%202-2-1-4%202c-2%201-3%203-2%203l-1%201c-2%200-7%203-6%204l-4%201-1%201-1%202-2%201h-1l-2%201v3l-1%201c-1-1-5%200-7%202l-3%201h-6c0%202-2%202-2%201-1-3-3-2-3%200-1%202%202%209%203%2010v3c-2%202-1%203%201%201h1l-7%208a126%20126%200%2000-11%2011c0-2-3-1-8%205-10%2011-12%2015-11%2016s1%201%206-6c1-2%203-3%203-2l1-1v-1h1c2%200%201%201-2%205-5%207-4%2011%202%2011%206-1%2022-10%2021-11%200-2-1-1-7%201-7%204-11%205-13%204-2%200-2-3%200-4l1-1%204-7%203-7c1-1%2016-17%2017-16l-4%205c-6%206-11%2013-10%2014l-1%201h-1v1l-1%202-1%201-2%201%201%201%201%201c1%203%205%202%2012-1l4-2%2013-8%201-1c0%201%202%200%202-2l2-2%203%202%205%203c3%200%203%200%201%202v1l2-1h7c21%205%2042-1%2057-14%205-4%2010-7%209-4-1%201%203%202%205%201h1c0%202%203%203%209%204%203%201%206%200%204-1l-1-2h1c2%202%202%202%205%201%204-2%2012-2%2012%200s6%206%2010%206c5%200%2014%203%2012%204l-8%201c-5%201-6%202-4%202l5%201h4l4%202h-2l-2%201-1%201-1-1h-5l-3-1-4%201h-2l-3-3c-1-5-8-9-11-6-1%202-3%2011-1%2010%201-1%204%204%203%206l-3%203-3%201%202%203c11%2019%2031%2027%2053%2023%2012-2%2029-13%2028-18v-2c2%200%206-5%205-6v-1c2%200%203%202%203%204%202%205%2012%2011%2012%207l-4-3c-4-2-6-4-3-5%201-1%201-4-1-4-1%201-1%200-1-2%200-1%203-1%207%201l2-1-5-3-4-3v-4l1-2v-19l-6-14-1-1-7-11a58%2058%200%2000-50-11c-12%204-19%2011-12%2011v1c-2%201%200%201%204%201l7-1v-1l1%201%201%201h4a61%2061%200%200013%203c6%200%2020%206%2021%207%201%202%200%202-3%201l-26-1a163%20163%200%2001-27%200h-4l-5-4c-4-3-6-3-10-2-1%201-3%200-4-1-2-2-2-2-1-9l1-13-1-6%208-9%208-10v-1c2%201%204-1%203-2l-5%203-4%203h-1l-1%202v1l-5%205-1%201h-4l1-2v-1c-2%200-3-2%200-2l1-2h-1c-3%202-2%200%201-4%204-5%207-11%206-11l-5%207-6%206c-1%200-6-10-5-11%201-2%2013-8%2014-7l2%201v-2c1-2%202-1%202%201s2%204%204%203v-2c-1-1-1-3%201-3l1%201%203-2%201-4h-2l-1-2c-2%200-20%207-21%209h-1l-1%201c1%200-4%204-6%204s13-11%2025-18l2-2-9%204-9%205c0-1%201-2%2010-7%205-3%206-4%204-4-1-1-3%200-5%201m0%2082c-1%201%200%201%202%201%203%200%206%203%204%206l-1-1c0-1-1-2-4-1l-3%202c0%201%204%204%206%204l3%202c0%202%201%202%202%200l2-4c3-3%202-6-2-8-3-2-9-3-9-1m56%205c-3%202-14%202-16%201h-22l-1%201-1%201c0%202%205%203%2011%203%207%200%2015%202%2011%203h11l7-2%203-1-3-1-3-1%203-2%204-3-4%201m-174%2022l-2%205-1%204-1-1c1-3%200-2-3%200-2%203-1%205%201%204%201-1%201%200%201%201l1%202v-1l1-1c1%201%201%200%201-1%200-2%200-2%201-1%200%203%203%202%2011-2s8-4%203-8c-4-5-5-5-7-2-1%202-4%202-3-1%201-2-1-1-3%202M0%20324v37h401v-75H0v38m273-19l-1%203c1%201%200%203-1%205-2%204%200%207%208%207%205-1%206-1%204-3v-5l-1%202c0%202-1%201-5-2-4-4-3-6%201-6l2-1c-1-2-6-1-7%200m-213%205c-4%203-1%2011%204%2010%201-1%202%200%202%201s-3%202-5%201l-2%201h8l1-8v-6l-3-1c-3%200-4%201-5%202m126%200c-3%204-1%2011%204%2010h3c0%202-3%203-5%203h-2l3%201c5%200%206-2%206-10v-6h-4l-5%202m51%206l1%208%201-2c0-2%201-3%203-3%205%201%207-4%205-8-1-2-2-3-6-3h-4v8M36%20334c-4%203-1%2011%204%2010%201-1%202%200%202%201s-3%202-5%201l-2%201h8l1-8v-6l-3-1c-3%200-4%201-5%202'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAD70lEQVQ4y31U7U/TVxT+/QNGk+2TH8xQM6JfXIDyMoEhMQpMlAWjvBRJxMz4sklcpEUZW2gpDAHHoBj7QcGs8kEcSyQQspIwwCXMtlAobLy1/f36Agj/w7NzDm2pW7IPT+5z7z157nPPOfcqGxsb2Hr3DuFIBFowiGAotDsSQsR5HgyGZK7FoAWhapogoKrvQXE6nXD85oDX60U4HKZgDRE6JH5AFHtiWhyq+r6gyoL1RiO+KClBW1sbtrd3sLy8gomJCSwuLokoB7KjuEgCdkU0EVKjXLFYLMjLy0NjYyNevx7G8PAw7t9/gNraWgmKsGggIALskEX8NOdDQnSjmDM16lhhsrq2BofDgRZLC+qN9SgsLERBQQFmZmawsLCAza0tyaXP55MDeM6iU1NTAt4Tp1pUkINWV1dx/cvrSE1JRVbWp8I7OzpRU1ODly8HMTj4Ci6XG6Ojo3KTvr4+vLC/oNwvxp3HBQMBVQricIzL1W1PbBgbG0Npaam4vXOnFhO/T+Kt04WrV6+hqOhzPOvrpxv8KXlmDXYsV96rmIrNzS0qzDY2Njel0svLy3j69Bl+GfoVfxPv7u5BcfF55H6Wh/7+59JunK619XVw+8UdqlFRKT+dFAPnhl2Mj4+jvb0DVVVXUFGpR0FhEQn2y4E2mw2mJpOkQNomsQ0S28Lv90vyR0ZGoCeRixcv4dLlMmRmZiE/Px8mkwlWq5VyOwizuVnybrfbSVDV4hVKdMrNvLKyAvvPdty4cRMXLpRAl56O7OwcDAwMYGhoCF1dXbA0W8S5TqdDQ8O3LLjXlPEmjTp8TtdiF2/e/IHJySlyO4qlpb+wvbMDt9uNunt1JFaFEyc+EcH2hw+hJOZMjeaQ3/D09DRe0XU8Ho+scRdwoThmnYrA46POR0hLTYMuTYfvqDtm3bNQQhQkoMrGeJi4j69NPEKVDPK75nfOIM7zWJxrbg6z8/OIUL4ZSq9ej96KCljLy/BYX4nHVXri5cJ5vYf47lyPnrLLsHKsrJeht7ICtupqPKm+QmvlAuXrDz5Ec0YGzJSD1pwc4a3Z2Wg4dgwPkpNpPV3WLVTFH3Jz0XLyJMxUHMNHSbi1bx9uHziA2/v34ysaGUrd4cPoOncOPxYVoZt+nebMTLSdOoWOM2fQefas7P10vhjtp0+j4fhxGCjekJSEe4cO4e7Bg/iGcDcBivHjZLTk5KKVfhxTegaa6PTvU1IEZhK3UJs0kUvmhiNHUEdibIK58ehRGP4FZckzDy+90QWClx6/lyolIL7gcmH+rVNG3l+a84DjeVyMYXYO3gQoKjWwyt9PkEG/BoP7kP+9/4GPWum/8OMfvLW0/tBH62QAAAAASUVORK5CYII=","aspectRatio":1,"src":"/static/8d0121465a537b8fbe67dfe613c29ab7/502b1/cover.png","srcSet":"/static/8d0121465a537b8fbe67dfe613c29ab7/f2e6d/cover.png 114w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/4ddba/cover.png 229w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/502b1/cover.png 457w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/7ddc2/cover.png 686w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/435bf/cover.png 914w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/6050d/cover.png 1200w","srcWebp":"/static/8d0121465a537b8fbe67dfe613c29ab7/15384/cover.webp","srcSetWebp":"/static/8d0121465a537b8fbe67dfe613c29ab7/31fce/cover.webp 114w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/e3e25/cover.webp 229w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/15384/cover.webp 457w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/0258d/cover.webp 686w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/64ea2/cover.webp 914w,\n/static/8d0121465a537b8fbe67dfe613c29ab7/9000d/cover.webp 1200w","sizes":"(max-width: 457px) 100vw, 457px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M21%2032l-3%201-6%204c-5%204-6%205-6%202%200-2-3-6-5-6l1%202c2%203%203%204%200%206-2%202-3%207%200%207%202-1%202-1%201%206%200%2011%204%2019%2013%2024%205%202%2013%204%2013%202h3l3-1c0-2%204-1%208%202s9%203%2011%200%203-2%202%201-1%204%203%205%206-1%207-5l1-4c0-2%200-2-2-1l-2%202c0%202-1%201-3-1l-4-3c-1-1-2-2-1-3%200-3%203-1%204%202%201%202%202%203%203%202l1-7-1%201c0%202-5-1-8-4s-3-6-2-6c1-1%200-12-2-17-2-4-8-9-14-11H21m0%203h-3l-1%201-1%203c-1%200-2%202-1%203l-3%203-2%201h8c2%201%205%200%205-2h1c0%202%200%202%203%201%201-2%202-2%202-1h1c1-1%200-2-1-3s-1-1%202-1%204-1%203-4l-1-1-1%203v1l-7-4h-4m92%2018v1l-1%201c-2%201-2%201%200%203h3l1%202v6c1%202%201%202-1%203-2%200-2%200-1%201s1%203-1%203v-1l-2-1c-3%200-3-3%200-3%203-1%204-3%202-3l-3-2-3-1%201%202c2%203%202%204-1%203-1%200-3%202-3%205%200%201-1%202-1%200l-2-1h-2v3h-1c0-3-2-2-3%201s-1%203%202%204c3%200%204%201%202%202h-2c-1-2-2-1-2%203l-1%203v-1l-1-1h-2c-2%202-2%204-1%204l1%202h-1c-1-2-4-1-6%202s-2%203-3%201c-2-1-2-2%200-2v-5c-1-4-3-6-3-3h-7l-1%201c-1%200-1-4%201-6l1-2c0-2-2%200-4%202v6l2%205%202%202%201-1h5l-1%203c-2-1-1%201%201%202v2h-3l-1-1c1%200%200-2-2-3l-3-2-2%203c-2%202-4%202-4-2l-1-1-1%203h-2l-1%201%203%201h2l2%201%202%201-1%201c-3-1-2%201%200%203%202%201%202%202%201%203l-2-1-2-3-1-2c0-1-1-2-2-1-3%200-3%200-2%201v5c-2%202%2010%2020%2012%2018l1%201v1h2l1%201v1l1%201c1-1%202%200%202%201l2%201h1c0%201%207%203%208%202%200-1%205%200%207%202h2c0-2%202-3%202-2v2c2%201%208%200%206-1h-4l2-2h10c2%200%203%200%202-1l2-1%201-2%201-2%204-1c5-1%2013%202%2015%206%204%209%2016%2014%2027%2010%208-3%207-3%206%201-3%204-5%2016-4%2017l1-1%202-1v-1l1-1h3c0-1%201-2%203-2%202%201%2011-5%2011-6l-4%201-4%202c0-1%201-2%203-2l4-3%202-2v2h2c2-1%203-3%200-3v-2l2-3c0-2%204-6%204-5h4v-1c0-2-1-2-2-1h-1l1-1v-1l3-3c3-2%204-1%202%201v1l3-3%204-3%202-2c0-1-1-2-2-1l-1-1%203-1%202-1v-1l1-1c1-1%201-1-1-1-3%200-7%204-6%206%201%201%200%201-1%201l-3%202-2%201%202-3c3-3%205-7%203-7l-3%203c-1%202-3%203-3%202v2h-1c-1-1-2-1-3%201h-2l2-2-1-2v-1c1%201%202%200%203-1l1-2h2v-2c-2-2-10%203-16%209l-5%205v-5c0-9-5-18-12-21-6-2-13-3-15-2-1%201-1%201%201%201l2%202h1c2-2%203-1%202%201l1%202%201%201v1l1%201h-1c-2-1-3%200-1%202l-2%202-4%204h-2c1-1%200-2-1-2l-1%201c1%201-2%202-6%202a235%20235%200%2000-7-2h2c2%200%201-4-1-6h-2c-1%201-1%201-1-1l2-3c2-1%203-9%202-9v-3c2-7-2-18-9-25l-5-5c-1-2-2-3-3-2l-3-1c-1-1-3-2-4-1l-2-1c1-2-2-2-2-1m198%2046c-6%201-7%204-3%204l3%203v4h-1v2c-1-1-3%205-2%206%202%201%2011-17%209-19h-6m-20%203l-18%2012-4%204-4-3c-7-6-10-6-12-1l-2%203-1%204-3%202v1h2l-1%201-2%202-3%204c-2%201-3%203-2%203l-1%201v1l-1%201c-1-1-1%200-1%201l-2%203-1%203c1%201%200%201-1%201-3%200-6%204-5%205l-2%203c-3%201-6%205-6%207v1l-2-1-2-1%201%202%201%202-2-1-4%202c-2%201-3%203-2%203l-1%201c-2%200-7%203-6%204l-4%201-1%201-1%202-2%201h-1l-2%201v3l-1%201c-1-1-5%200-7%202l-3%201h-6c0%202-2%202-2%201-1-3-3-2-3%200-1%202%202%209%203%2010v3c-2%202-1%203%201%201h1l-7%208a126%20126%200%2000-11%2011c0-2-3-1-8%205-10%2011-12%2015-11%2016s1%201%206-6c1-2%203-3%203-2l1-1v-1h1c2%200%201%201-2%205-5%207-4%2011%202%2011%206-1%2022-10%2021-11%200-2-1-1-7%201-7%204-11%205-13%204-2%200-2-3%200-4l1-1%204-7%203-7c1-1%2016-17%2017-16l-4%205c-6%206-11%2013-10%2014l-1%201h-1v1l-1%202-1%201-2%201%201%201%201%201c1%203%205%202%2012-1l4-2%2013-8%201-1c0%201%202%200%202-2l2-2%203%202%205%203c3%200%203%200%201%202v1l2-1h7c21%205%2042-1%2057-14%205-4%2010-7%209-4-1%201%203%202%205%201h1c0%202%203%203%209%204%203%201%206%200%204-1l-1-2h1c2%202%202%202%205%201%204-2%2012-2%2012%200s6%206%2010%206c5%200%2014%203%2012%204l-8%201c-5%201-6%202-4%202l5%201h4l4%202h-2l-2%201-1%201-1-1h-5l-3-1-4%201h-2l-3-3c-1-5-8-9-11-6-1%202-3%2011-1%2010%201-1%204%204%203%206l-3%203-3%201%202%203c11%2019%2031%2027%2053%2023%2012-2%2029-13%2028-18v-2c2%200%206-5%205-6v-1c2%200%203%202%203%204%202%205%2012%2011%2012%207l-4-3c-4-2-6-4-3-5%201-1%201-4-1-4-1%201-1%200-1-2%200-1%203-1%207%201l2-1-5-3-4-3v-4l1-2v-19l-6-14-1-1-7-11a58%2058%200%2000-50-11c-12%204-19%2011-12%2011v1c-2%201%200%201%204%201l7-1v-1l1%201%201%201h4a61%2061%200%200013%203c6%200%2020%206%2021%207%201%202%200%202-3%201l-26-1a163%20163%200%2001-27%200h-4l-5-4c-4-3-6-3-10-2-1%201-3%200-4-1-2-2-2-2-1-9l1-13-1-6%208-9%208-10v-1c2%201%204-1%203-2l-5%203-4%203h-1l-1%202v1l-5%205-1%201h-4l1-2v-1c-2%200-3-2%200-2l1-2h-1c-3%202-2%200%201-4%204-5%207-11%206-11l-5%207-6%206c-1%200-6-10-5-11%201-2%2013-8%2014-7l2%201v-2c1-2%202-1%202%201s2%204%204%203v-2c-1-1-1-3%201-3l1%201%203-2%201-4h-2l-1-2c-2%200-20%207-21%209h-1l-1%201c1%200-4%204-6%204s13-11%2025-18l2-2-9%204-9%205c0-1%201-2%2010-7%205-3%206-4%204-4-1-1-3%200-5%201m0%2082c-1%201%200%201%202%201%203%200%206%203%204%206l-1-1c0-1-1-2-4-1l-3%202c0%201%204%204%206%204l3%202c0%202%201%202%202%200l2-4c3-3%202-6-2-8-3-2-9-3-9-1m56%205c-3%202-14%202-16%201h-22l-1%201-1%201c0%202%205%203%2011%203%207%200%2015%202%2011%203h11l7-2%203-1-3-1-3-1%203-2%204-3-4%201m-174%2022l-2%205-1%204-1-1c1-3%200-2-3%200-2%203-1%205%201%204%201-1%201%200%201%201l1%202v-1l1-1c1%201%201%200%201-1%200-2%200-2%201-1%200%203%203%202%2011-2s8-4%203-8c-4-5-5-5-7-2-1%202-4%202-3-1%201-2-1-1-3%202M0%20324v37h401v-75H0v38m273-19l-1%203c1%201%200%203-1%205-2%204%200%207%208%207%205-1%206-1%204-3v-5l-1%202c0%202-1%201-5-2-4-4-3-6%201-6l2-1c-1-2-6-1-7%200m-213%205c-4%203-1%2011%204%2010%201-1%202%200%202%201s-3%202-5%201l-2%201h8l1-8v-6l-3-1c-3%200-4%201-5%202m126%200c-3%204-1%2011%204%2010h3c0%202-3%203-5%203h-2l3%201c5%200%206-2%206-10v-6h-4l-5%202m51%206l1%208%201-2c0-2%201-3%203-3%205%201%207-4%205-8-1-2-2-3-6-3h-4v8M36%20334c-4%203-1%2011%204%2010%201-1%202%200%202%201s-3%202-5%201l-2%201h8l1-8v-6l-3-1c-3%200-4%201-5%202'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"seo":{"src":"/static/8d0121465a537b8fbe67dfe613c29ab7/6050d/cover.png"}}},"authors":[{"authorsPage":true,"bio":"Hello everybody 👋 ! My name is Luke and I am the creator and owner of the spaceout.pl. Personally, I am a big geek with huge love for Star Wars, Marvel and DC comic books, Funk and 80s music. I take most of my design inspiration from offline experiences like going to art museums, galleries and working with other creative people on various projects. I also work with various Activist and NGO groups as a pro-bono designer and developer.\n","id":"f69d27c7-7f9a-5fbd-b05d-1a324fd10c0a","name":"Luke Celitan","featured":true,"social":[{"url":"https://www.facebook.com/spaceout/"},{"url":"https://twitter.com/spaceout.pl"},{"url":"https://www.instagram.com/spaceout.pl/"},{"url":"https://huggingface.co/MassivDash"},{"url":"https://bsky.app/profile/lukecelitan.bsky.social"}],"slug":"/authors/luke-celitan","avatar":{"small":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIFAQME/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABvOTVgtERIAH/xAAaEAEBAQEAAwAAAAAAAAAAAAACAQMEABAS/9oACAEBAAEFAmoDjs0/Oq1a9kUzN+j7/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHhAAAgEDBQAAAAAAAAAAAAAAAQIAAxESECAxMlH/2gAIAQEABj8CLHgTGqmBPXSlTANsrmKyXLK0B92f/8QAHhABAAECBwAAAAAAAAAAAAAAAREAIRAgMUFhcdH/2gAIAQEAAT8hUmKFDbjke4JaIOG01Fthsd0YugnJ/9oADAMBAAIAAwAAABDzzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAfEAEBAAEDBQEAAAAAAAAAAAABETEAQWEQICFxgZH/2gAIAQEAAT8QhmFXf0c6oSU1s8jwz0W5QpAeFf1+Gp7aimCmBvvoV0CRyUvZ/9k=","aspectRatio":1,"src":"/static/4f53b0980dc97328dd1294bbc374fd0e/fa1ea/spaceghost.jpg","srcSet":"/static/4f53b0980dc97328dd1294bbc374fd0e/afb2b/spaceghost.jpg 13w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/7c20e/spaceghost.jpg 25w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/fa1ea/spaceghost.jpg 50w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/03612/spaceghost.jpg 75w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/61cdf/spaceghost.jpg 100w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/442ab/spaceghost.jpg 305w","srcWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/e7b2c/spaceghost.webp","srcSetWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/58718/spaceghost.webp 13w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/74aad/spaceghost.webp 25w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/e7b2c/spaceghost.webp 50w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/ed320/spaceghost.webp 75w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/66016/spaceghost.webp 100w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/85828/spaceghost.webp 305w","sizes":"(max-width: 50px) 100vw, 50px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M189%2065A519%20519%200%200065%20299c-5%2020-5%2018%203%2015%208-4%2039-10%2057-12%2011-1%2010%200%2010-11%200-29%206-103%2010-121%204-21%2016-36%2033-43%206-2%208-2%2020-2%2018%200%2024%202%2036%2013%2020%2021%2025%2046%2029%20138l2%2026h10a267%20267%200%200168%2014l-6-26A607%20607%200%2000218%2071c-10-10-15-15-18-15-2%200-6%203-11%209m47%20129c-14%208-26%2015-26%2017%200%203%2018%205%2024%202%205-3%209-10%209-18%200-5%200-5-7-1m-82%201l1%205c1%2011%209%2018%2020%2017%207-1%2013-3%2013-5s-32-19-34-17'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"medium":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIFAQME/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABvOTVgtERIAH/xAAaEAEBAQEAAwAAAAAAAAAAAAACAQMEABAS/9oACAEBAAEFAmoDjs0/Oq1a9kUzN+j7/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHhAAAgEDBQAAAAAAAAAAAAAAAQIAAxESECAxMlH/2gAIAQEABj8CLHgTGqmBPXSlTANsrmKyXLK0B92f/8QAHhABAAECBwAAAAAAAAAAAAAAAREAIRAgMUFhcdH/2gAIAQEAAT8hUmKFDbjke4JaIOG01Fthsd0YugnJ/9oADAMBAAIAAwAAABDzzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAfEAEBAAEDBQEAAAAAAAAAAAABETEAQWEQICFxgZH/2gAIAQEAAT8QhmFXf0c6oSU1s8jwz0W5QpAeFf1+Gp7aimCmBvvoV0CRyUvZ/9k=","aspectRatio":1,"src":"/static/4f53b0980dc97328dd1294bbc374fd0e/61cdf/spaceghost.jpg","srcSet":"/static/4f53b0980dc97328dd1294bbc374fd0e/7c20e/spaceghost.jpg 25w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/fa1ea/spaceghost.jpg 50w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/61cdf/spaceghost.jpg 100w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/59538/spaceghost.jpg 150w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/fd013/spaceghost.jpg 200w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/442ab/spaceghost.jpg 305w","srcWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/66016/spaceghost.webp","srcSetWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/74aad/spaceghost.webp 25w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/e7b2c/spaceghost.webp 50w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/66016/spaceghost.webp 100w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/d9b14/spaceghost.webp 150w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/6b183/spaceghost.webp 200w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/85828/spaceghost.webp 305w","sizes":"(max-width: 100px) 100vw, 100px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M189%2065A519%20519%200%200065%20299c-5%2020-5%2018%203%2015%208-4%2039-10%2057-12%2011-1%2010%200%2010-11%200-29%206-103%2010-121%204-21%2016-36%2033-43%206-2%208-2%2020-2%2018%200%2024%202%2036%2013%2020%2021%2025%2046%2029%20138l2%2026h10a267%20267%200%200168%2014l-6-26A607%20607%200%2000218%2071c-10-10-15-15-18-15-2%200-6%203-11%209m47%20129c-14%208-26%2015-26%2017%200%203%2018%205%2024%202%205-3%209-10%209-18%200-5%200-5-7-1m-82%201l1%205c1%2011%209%2018%2020%2017%207-1%2013-3%2013-5s-32-19-34-17'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"large":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIFAQME/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABvOTVgtERIAH/xAAaEAEBAQEAAwAAAAAAAAAAAAACAQMEABAS/9oACAEBAAEFAmoDjs0/Oq1a9kUzN+j7/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHhAAAgEDBQAAAAAAAAAAAAAAAQIAAxESECAxMlH/2gAIAQEABj8CLHgTGqmBPXSlTANsrmKyXLK0B92f/8QAHhABAAECBwAAAAAAAAAAAAAAAREAIRAgMUFhcdH/2gAIAQEAAT8hUmKFDbjke4JaIOG01Fthsd0YugnJ/9oADAMBAAIAAwAAABDzzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAfEAEBAAEDBQEAAAAAAAAAAAABETEAQWEQICFxgZH/2gAIAQEAAT8QhmFXf0c6oSU1s8jwz0W5QpAeFf1+Gp7aimCmBvvoV0CRyUvZ/9k=","aspectRatio":1,"src":"/static/4f53b0980dc97328dd1294bbc374fd0e/442ab/spaceghost.jpg","srcSet":"/static/4f53b0980dc97328dd1294bbc374fd0e/a2637/spaceghost.jpg 82w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/15203/spaceghost.jpg 164w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/442ab/spaceghost.jpg 305w","srcWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/85828/spaceghost.webp","srcSetWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/2d087/spaceghost.webp 82w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/29d87/spaceghost.webp 164w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/85828/spaceghost.webp 305w","sizes":"(max-width: 305px) 100vw, 305px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M189%2065A519%20519%200%200065%20299c-5%2020-5%2018%203%2015%208-4%2039-10%2057-12%2011-1%2010%200%2010-11%200-29%206-103%2010-121%204-21%2016-36%2033-43%206-2%208-2%2020-2%2018%200%2024%202%2036%2013%2020%2021%2025%2046%2029%20138l2%2026h10a267%20267%200%200168%2014l-6-26A607%20607%200%2000218%2071c-10-10-15-15-18-15-2%200-6%203-11%209m47%20129c-14%208-26%2015-26%2017%200%203%2018%205%2024%202%205-3%209-10%209-18%200-5%200-5-7-1m-82%201l1%205c1%2011%209%2018%2020%2017%207-1%2013-3%2013-5s-32-19-34-17'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"}}}],"basePath":"/","tech":["TS","JS"],"category":"Post","slug":"/langchain-langgraph-and-agentic-ai-patterns","id":"b56bbab0-103a-5aae-8b92-f235683de9d4","title":"LangChain, LangGraph, and Agentic AI Patterns","appDescription":null,"mailchimp":false,"next":[{"id":"a40c3f4d-6dd1-5d6a-acd0-074c684dceb3","slug":"/react-server-components-and-the-future-of-full-stack-react","secret":false,"title":"React Server Components and the Future of Full-Stack React","author":"Luke Celitan","date":"June 29th, 2025","dateForSEO":"2025-06-29T00:00:00.000Z","timeToRead":6,"excerpt":"A comprehensive deep-dive into React Server Components, streaming SSR, selective hydration, performance, migration strategies, best practices for data fetching, and building production-ready apps with Next.js 14+.","subscription":true,"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"React Server Components and the Future of Full-Stack React\",\n \"excerpt\": \"A comprehensive deep-dive into React Server Components, streaming SSR, selective hydration, performance, migration strategies, best practices for data fetching, and building production-ready apps with Next.js 14+.\",\n \"date\": \"2025-06-29T00:00:00.000Z\",\n \"hero\": \"react.png\",\n \"author\": \"Luke Celitan\",\n \"category\": \"Post\",\n \"tech\": [\"ReactIcon\", \"Nodejs\", \"TS\"]\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"react-server-components-and-the-future-of-full-stack-react\"\n }, \"React Server Components and the Future of Full-Stack React\"), mdx(\"h2\", {\n \"id\": \"introduction\"\n }, \"Introduction\"), mdx(\"p\", null, \"The React ecosystem has always been at the forefront of web innovation, from pioneering client-side rendering (CSR) to enabling server-side rendering (SSR) and static site generation (SSG). But as web applications grow in complexity and user expectations for speed and interactivity soar, traditional rendering models start to show their limitations. Enter React Server Components (RSC)\\u2014a paradigm shift that promises to redefine how we build, ship, and scale full-stack React applications.\"), mdx(\"p\", null, \"In this deep-dive, I\\u2019ll walk you through the architecture of React Server Components, the mechanics of streaming SSR and selective hydration, performance implications, migration strategies, best practices for data fetching, and how to build production-ready applications with Next.js 14+. We\\u2019ll explore real-world code, performance metrics, and advanced concepts, all while keeping an eye on the future of full-stack React.\"), mdx(\"h2\", {\n \"id\": \"react-rendering-models-a-brief-history\"\n }, \"React Rendering Models: A Brief History\"), mdx(\"p\", null, \"Before we dive into RSC, let\\u2019s set the stage with a quick overview of React\\u2019s rendering models:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Client-Side Rendering (CSR):\"), \" The browser downloads a JavaScript bundle and renders everything on the client. Fast interactivity, but slow initial load and SEO challenges.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Server-Side Rendering (SSR):\"), \" The server renders HTML for each request, improving initial load and SEO, but often at the cost of slower interactivity and heavier server load.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Static Site Generation (SSG):\"), \" HTML is pre-rendered at build time, offering fast loads and great SEO, but limited to content that doesn\\u2019t change frequently.\")), mdx(\"p\", null, \"Each model has trade-offs. The React team\\u2019s goal with RSC is to combine the best of all worlds: minimal JavaScript shipped to the client, fast initial loads, seamless interactivity, and a first-class developer experience.\"), mdx(\"h2\", {\n \"id\": \"the-motivation-for-react-server-components\"\n }, \"The Motivation for React Server Components\"), mdx(\"p\", null, \"Why do we need Server Components? The answer lies in the ever-increasing complexity of web apps and the demand for both performance and maintainability. Traditional SSR and SSG approaches still require shipping large JavaScript bundles to the client, even for non-interactive UI. RSC allows us to:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Reduce bundle size\"), \" by keeping non-interactive logic on the server (20-30% smaller on average)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Fetch data closer to the source\"), \" (database, APIs) without exposing secrets\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Progressively enhance\"), \" the UI, ensuring core functionality works even without JavaScript\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Stream content\"), \" to the browser for faster Time to First Byte (TTFB)\")), mdx(\"p\", null, \"With Next.js 14+ embracing RSC as a first-class citizen, the future of full-stack React is here.\"), mdx(\"h2\", {\n \"id\": \"react-server-components-architecture\"\n }, \"React Server Components Architecture\"), mdx(\"h3\", {\n \"id\": \"what-are-server-components\"\n }, \"What Are Server Components?\"), mdx(\"p\", null, \"Server Components are React components that run exclusively on the server. They can fetch data, access server-side resources, and return serialized UI to the client. Unlike traditional SSR, Server Components never ship their logic or dependencies to the browser\\u2014only the rendered result.\"), mdx(\"h4\", {\n \"id\": \"server-vs-client-components\"\n }, \"Server vs. Client Components\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Server Components:\"), \" Run on the server, can access databases, secrets, and APIs. Never included in the client bundle.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Client Components:\"), \" Run in the browser, handle interactivity, and can use browser APIs. Marked with \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"'use client'\"), \" at the top of the file.\")), mdx(\"p\", null, \"This separation is enforced by the \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"boundary pattern\"), \"\\u2014a clear demarcation between server and client logic.\"), mdx(\"h4\", {\n \"id\": \"the-boundary-pattern\"\n }, \"The Boundary Pattern\"), mdx(\"p\", null, \"A Server Component can render Client Components, but not vice versa. This ensures that sensitive logic and data fetching stay on the server, while interactivity is handled on the client.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/components/UserProfile.server.tsx\\nimport { getUserFromDB } from '@/lib/db';\\nimport UserAvatar from './UserAvatar'; // Client Component\\n\\nexport default async function UserProfile({ userId }: { userId: string }) {\\n const user = await getUserFromDB(userId);\\n return (\\n
\\n

{user.name}

\\n \\n
\\n );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/components/UserAvatar.tsx\\n'use client';\\n\\nexport default function UserAvatar({ user }) {\\n return {user.name};\\n}\\n\")), mdx(\"h4\", {\n \"id\": \"the-data-cascade-pattern\"\n }, \"The Data Cascade Pattern\"), mdx(\"p\", null, \"Server Components fetch data as close to the source as possible, reducing network hops and improving security. This is known as the \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"data cascade pattern\"), \"\\u2014data flows from the server down to the client, never the other way around.\"), mdx(\"h4\", {\n \"id\": \"progressive-enhancement\"\n }, \"Progressive Enhancement\"), mdx(\"p\", null, \"Because Server Components render to HTML on the server, your app\\u2019s core functionality works even if JavaScript fails to load. This is a huge win for accessibility and resilience.\"), mdx(\"h3\", {\n \"id\": \"minimal-server-component-example\"\n }, \"Minimal Server Component Example\"), mdx(\"p\", null, \"Here\\u2019s a simple Server Component that fetches data from a database:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/components/PostsList.server.tsx\\nimport { getPosts } from '@/lib/db';\\n\\nexport default async function PostsList() {\\n const posts = await getPosts();\\n return (\\n
    \\n {posts.map(post => (\\n
  • {post.title}
    • \\n ))}\\n
\\n );\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"streaming-ssr-and-selective-hydration\"\n }, \"Streaming SSR and Selective Hydration\"), mdx(\"h3\", {\n \"id\": \"how-streaming-ssr-works\"\n }, \"How Streaming SSR Works\"), mdx(\"p\", null, \"React 18+ and Next.js 14+ introduce \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"streaming SSR\"), \"\\u2014the ability to send HTML to the browser as soon as it\\u2019s ready, rather than waiting for the entire page to render. This dramatically improves TTFB (by 40-60% in benchmarks) and enables progressive rendering.\"), mdx(\"h4\", {\n \"id\": \"suspense-boundaries-for-streaming\"\n }, \"Suspense Boundaries for Streaming\"), mdx(\"p\", null, \"React\\u2019s \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component lets you define loading boundaries. When a Server Component is waiting for data, React streams the rest of the page and fills in the Suspense boundary when data arrives.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/page.tsx\\nimport PostsList from './components/PostsList.server';\\nimport { Suspense } from 'react';\\n\\nexport default function HomePage() {\\n return (\\n
\\n

Welcome!

\\n Loading posts...}>\\n \\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"selective-hydration\"\n }, \"Selective Hydration\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Selective hydration\"), \" means React only hydrates (activates) the parts of the page that need interactivity. This reduces JavaScript execution time by up to 50% compared to hydrating the entire page.\"), mdx(\"h4\", {\n \"id\": \"example-selective-hydration-in-practice\"\n }, \"Example: Selective Hydration in Practice\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/components/InteractiveButton.tsx\\n'use client';\\n\\nexport default function InteractiveButton() {\\n const [count, setCount] = useState(0);\\n return ;\\n}\\n\\n// Used inside a Server Component\\nimport InteractiveButton from './InteractiveButton';\\n\\nexport default function SomeServerComponent() {\\n return (\\n
\\n

Server-rendered content

\\n {/* Only this part is hydrated! */}\\n
\\n );\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"performance-implications\"\n }, \"Performance Implications\"), mdx(\"h3\", {\n \"id\": \"key-metrics\"\n }, \"Key Metrics\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Bundle size reduction:\"), \" 20-30% smaller client bundles\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"TTFB:\"), \" 40-60% faster with streaming SSR\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"JavaScript execution time:\"), \" Up to 50% less due to selective hydration\")), mdx(\"h3\", {\n \"id\": \"how-rsc-impacts-performance\"\n }, \"How RSC Impacts Performance\"), mdx(\"p\", null, \"By moving non-interactive logic to the server, you ship less JavaScript, reduce parse/execute time, and improve both initial load and runtime performance. Data fetching on the server is faster and more secure, and streaming SSR ensures users see content sooner.\"), mdx(\"h3\", {\n \"id\": \"caching-strategies\"\n }, \"Caching Strategies\"), mdx(\"p\", null, \"Server-rendered components can be cached at multiple levels:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Database/query caching:\"), \" Cache expensive queries on the server\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Edge caching:\"), \" Use CDN or edge functions to cache rendered HTML\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Component-level caching:\"), \" Next.js 14+ supports \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"revalidate\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"cache\"), \" options for granular control\")), mdx(\"h4\", {\n \"id\": \"example-caching-a-server-component\"\n }, \"Example: Caching a Server Component\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/components/ExpensiveData.server.tsx\\nimport { cache } from 'react';\\n\\nconst getExpensiveData = cache(async () => {\\n // Expensive DB call\\n});\\n\\nexport default async function ExpensiveData() {\\n const data = await getExpensiveData();\\n return
{data.value}
;\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"monitoring-and-debugging\"\n }, \"Monitoring and Debugging\"), mdx(\"p\", null, \"Monitoring performance across server and client boundaries is crucial. Next.js provides built-in analytics, and you can add custom logging for deeper insights.\"), mdx(\"h4\", {\n \"id\": \"example-custom-performance-logging\"\n }, \"Example: Custom Performance Logging\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/api/log-performance.ts\\nexport async function logPerformance(metric: string, value: number) {\\n // Send to your logging backend\\n}\\n\\n// Usage in a Server Component\\nimport { logPerformance } from '@/app/api/log-performance';\\n\\nawait logPerformance('db_query_time', queryTime);\\n\")), mdx(\"h2\", {\n \"id\": \"migration-strategies-from-traditional-react-apps\"\n }, \"Migration Strategies from Traditional React Apps\"), mdx(\"h3\", {\n \"id\": \"analyzing-components-for-migration\"\n }, \"Analyzing Components for Migration\"), mdx(\"p\", null, \"Not all components should become Server Components. Start by identifying:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Pure UI components\"), \" with no interactivity \\u2192 Server Components\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Data-fetching components\"), \" \\u2192 Server Components\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Interactive components\"), \" (forms, buttons) \\u2192 Client Components\")), mdx(\"h3\", {\n \"id\": \"handling-state-management\"\n }, \"Handling State Management\"), mdx(\"p\", null, \"Libraries like Redux or Zustand must be used within Client Components. Use the boundary pattern to isolate stateful logic.\"), mdx(\"h4\", {\n \"id\": \"example-client-boundary-for-state-management\"\n }, \"Example: Client Boundary for State Management\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/components/Counter.tsx\\n'use client';\\nimport { useSelector, useDispatch } from 'react-redux';\\n\\nexport default function Counter() {\\n // Redux logic here\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"dealing-with-third-party-libraries\"\n }, \"Dealing with Third-Party Libraries\"), mdx(\"p\", null, \"Some libraries (e.g., those that access the DOM or window) are not compatible with Server Components. Wrap them in Client Components.\"), mdx(\"h3\", {\n \"id\": \"step-by-step-migration-plan\"\n }, \"Step-by-Step Migration Plan\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Audit your codebase:\"), \" Identify which components can move to the server\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Refactor data fetching:\"), \" Move API/database calls to Server Components\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Isolate interactivity:\"), \" Mark interactive components with \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"'use client'\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Test boundaries:\"), \" Ensure data flows correctly from server to client\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Monitor performance:\"), \" Use metrics to validate improvements\")), mdx(\"h4\", {\n \"id\": \"example-refactoring-a-traditional-component\"\n }, \"Example: Refactoring a Traditional Component\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Before:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// Old: Client-side data fetching\\nimport { useEffect, useState } from 'react';\\n\\nexport default function Posts() {\\n const [posts, setPosts] = useState([]);\\n useEffect(() => {\\n fetch('/api/posts').then(res => res.json()).then(setPosts);\\n }, []);\\n return
    {posts.map(p =>
  • {p.title}
    • )}
;\\n}\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"After:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// New: Server Component\\nimport { getPosts } from '@/lib/db';\\n\\nexport default async function Posts() {\\n const posts = await getPosts();\\n return
    {posts.map(p =>
  • {p.title}
    • )}
;\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"best-practices-for-data-fetching\"\n }, \"Best Practices for Data Fetching\"), mdx(\"h3\", {\n \"id\": \"server-vs-client-data-fetching\"\n }, \"Server vs. Client Data Fetching\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Server Components:\"), \" Fetch data directly from the database or API. Never expose secrets or credentials to the client.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Client Components:\"), \" Fetch data only when interactivity or real-time updates are needed.\")), mdx(\"h3\", {\n \"id\": \"using-the-data-cascade-pattern\"\n }, \"Using the Data Cascade Pattern\"), mdx(\"p\", null, \"Let data flow from the server down to the client. Avoid fetching data in Client Components if it can be fetched on the server.\"), mdx(\"h3\", {\n \"id\": \"error-boundaries-for-robust-data-fetching\"\n }, \"Error Boundaries for Robust Data Fetching\"), mdx(\"p\", null, \"Use error boundaries to catch and handle errors gracefully at both server and client boundaries.\"), mdx(\"h4\", {\n \"id\": \"example-error-handling-in-server-components\"\n }, \"Example: Error Handling in Server Components\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/components/ErrorBoundary.tsx\\n'use client';\\nimport { ErrorBoundary } from 'react-error-boundary';\\n\\nexport default function MyErrorBoundary({ children }) {\\n return (\\n Something went wrong.}>\\n {children}\\n \\n );\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"security-considerations\"\n }, \"Security Considerations\"), mdx(\"p\", null, \"Never leak secrets or sensitive data to the client. Always keep authentication and authorization logic on the server.\"), mdx(\"h4\", {\n \"id\": \"example-secure-data-fetching\"\n }, \"Example: Secure Data Fetching\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/components/AdminPanel.server.tsx\\nimport { getAdminData } from '@/lib/secure-db';\\n\\nexport default async function AdminPanel({ userId }) {\\n const data = await getAdminData(userId); // Only runs on the server\\n return
{data.secretInfo}
;\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"building-production-ready-apps-with-nextjs-14\"\n }, \"Building Production-Ready Apps with Next.js 14+\"), mdx(\"h3\", {\n \"id\": \"nextjs-14-features-supporting-rsc\"\n }, \"Next.js 14+ Features Supporting RSC\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"App directory:\"), \" Enables file-based routing with Server and Client Components\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Streaming:\"), \" Out-of-the-box support for streaming SSR\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Granular caching:\"), \" Control over revalidation and cache lifetimes\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Edge and serverless deployment:\"), \" Deploy at the edge for global performance\")), mdx(\"h3\", {\n \"id\": \"caching-incremental-adoption-and-deployment\"\n }, \"Caching, Incremental Adoption, and Deployment\"), mdx(\"p\", null, \"Adopt RSC incrementally\\u2014migrate a few pages or components at a time. Use Next.js\\u2019s caching primitives to optimize performance.\"), mdx(\"h4\", {\n \"id\": \"example-nextjs-14-app-structure\"\n }, \"Example: Next.js 14+ App Structure\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"/app\\n /page.tsx // Server Component (default)\\n /layout.tsx // Server Component\\n /components\\n /NavBar.tsx // Server Component\\n /LoginButton.tsx // Client Component ('use client')\\n\")), mdx(\"h4\", {\n \"id\": \"example-caching-and-error-boundaries\"\n }, \"Example: Caching and Error Boundaries\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"// app/components/CachedData.server.tsx\\nimport { cache } from 'react';\\n\\nconst getData = cache(async () => { /* ... */ });\\n\\nexport default async function CachedData() {\\n try {\\n const data = await getData();\\n return
{data.value}
;\\n } catch (e) {\\n return
Error loading data.
;\\n }\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"monitoring-logging-and-debugging\"\n }, \"Monitoring, Logging, and Debugging\"), mdx(\"p\", null, \"Use Next.js analytics, custom logging, and error boundaries to monitor production issues across server and client boundaries.\"), mdx(\"h3\", {\n \"id\": \"real-world-case-study-example-app-structure\"\n }, \"Real-World Case Study: Example App Structure\"), mdx(\"p\", null, \"Imagine a SaaS dashboard:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Server Components:\"), \" Fetch and render user data, analytics, reports\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Client Components:\"), \" Handle charts, forms, and real-time updates\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Streaming:\"), \" Stream dashboard widgets as data loads\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Caching:\"), \" Cache expensive analytics queries\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Error boundaries:\"), \" Isolate failures to individual widgets\")), mdx(\"h2\", {\n \"id\": \"advanced-concepts-and-future-outlook\"\n }, \"Advanced Concepts and Future Outlook\"), mdx(\"h3\", {\n \"id\": \"edge-rendering-and-serverless-deployment\"\n }, \"Edge Rendering and Serverless Deployment\"), mdx(\"p\", null, \"With RSC, you can deploy your app to edge runtimes (e.g., Vercel Edge Functions), bringing your UI closer to users for ultra-low latency.\"), mdx(\"h3\", {\n \"id\": \"integration-with-other-frameworks-and-apis\"\n }, \"Integration with Other Frameworks and APIs\"), mdx(\"p\", null, \"RSC is framework-agnostic at its core. You can integrate with REST, GraphQL, or even legacy APIs, as long as data fetching happens on the server.\"), mdx(\"h3\", {\n \"id\": \"the-evolving-react-ecosystem\"\n }, \"The Evolving React Ecosystem\"), mdx(\"p\", null, \"Expect more libraries and tools to embrace RSC, with improved developer tooling, debugging, and performance monitoring. The boundary between server and client will become even more seamless.\"), mdx(\"h2\", {\n \"id\": \"troubleshooting-and-common-pitfalls\"\n }, \"Troubleshooting and Common Pitfalls\"), mdx(\"h3\", {\n \"id\": \"debugging-serverclient-boundary-issues\"\n }, \"Debugging Server/Client Boundary Issues\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Hydration mismatches:\"), \" Ensure server and client render the same initial markup\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Unsupported libraries:\"), \" Wrap DOM-dependent libraries in Client Components\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Data leaks:\"), \" Never pass sensitive data from server to client unintentionally\")), mdx(\"h3\", {\n \"id\": \"handling-hydration-mismatches\"\n }, \"Handling Hydration Mismatches\"), mdx(\"p\", null, \"If you see hydration warnings, check that your Server Components don\\u2019t use browser-only APIs or non-deterministic data.\"), mdx(\"h3\", {\n \"id\": \"dealing-with-unsupported-libraries\"\n }, \"Dealing with Unsupported Libraries\"), mdx(\"p\", null, \"If a library doesn\\u2019t support SSR or RSC, isolate it in a Client Component and lazy-load if possible.\"), mdx(\"h2\", {\n \"id\": \"conclusion\"\n }, \"Conclusion\"), mdx(\"p\", null, \"React Server Components represent a major leap forward for full-stack React development. By moving non-interactive logic to the server, embracing streaming SSR, and adopting selective hydration, you can build faster, more secure, and more maintainable applications. Next.js 14+ makes this future accessible today, with robust support for RSC, streaming, and edge deployment.\"), mdx(\"p\", null, \"Migrating to RSC requires careful planning, but the performance and developer experience gains are well worth the effort. As the React ecosystem evolves, expect even more powerful abstractions and tools to emerge\\u2014making full-stack React development more productive and enjoyable than ever.\"), mdx(\"p\", null, \"Ready to take the plunge? Start experimenting with Server Components in your Next.js 14+ app, and join the next wave of web innovation!\"));\n}\n;\nMDXContent.isMDXComponent = true;","tech":["ReactIcon","Nodejs","TS"],"category":"Post","appDescription":null,"hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAD80lEQVQ4y3WTa0yTZxTH3yVgogtjyjI0NVxliuIEHXPrJxLcJgui+0Ky6Bg3QVKKg0LLuBRKpTVhiCZsFEEyI1NcwAUGIbKQLCHOxbDEoJmYIIuGywoLbUFkUNrf3r60QJ2c5LzP857L//mfc55HcDqdOAFpdbJOPXZwOBzS3iOO1VjnmroxBNcH98968QS6xDY7y9LSEpOTk9J+eXlZVIfkn59/4RXvBfg/hm7fwsIChUVFKBQKGk2N3Lr1k2SfmZnBYrWu5ItVuERweAF6s3W4g8xmMzKZjM1btvBWQABxcXE8ePCQifEJHg0PMyEyZ6OSna844KGYXFxcTHx8PFlZWbS2/sDQ0BA1NTUEBQXR3d0jxblasSFDl9MlAwMDZGZkUl9fT1dXFz09PTQ0NHA04Sg+vr4SW6vNtsZwI0C73S7tTSYTIaGhBIeESGXLZDt5Z/dutu/YQXR0DAaDYbU9GwK6nJ7+ucRoNCIIAlu3bWVfVBRvBwYil8tpa7spMv+Wp0+freat6yFeg/AMIzc3lwt1ddRdvEhnZyft7e2kpqai1+vR6XSUlZaJV8r+iqGsA5uamkKtVrMrIgLfTZs4efIUtbW1ZGRk8F5sLImJiSQnJ/PRkSO0tLR4l/zyFVlcXKS62sAb/v74+flx/PgJlEqlOAAfqezEY8cYHBwUJ9tNb2+v++U41i62Y91EXczS0tKkyRXkF5CQkMDdu7+LAH8QGbmX9PR0Ojo6sMxYGBsbZ/6F+5U41p6g4HpCLpmemkZdpKawsJCRkRGezz3n+vUbEpNnYtNV4gHDw4+l2OysbELDwsRr9PPK/bMvr4CKKngG0NffR/+v/V7vOSUtheCwYJI+S6Lu0gXGJscku1an5bD8ML23e3lZhKYvr9CceoXvM65yQ9FG46nLXP6iCZO4KqPzUBzI5ePNn/DVoXy++7yBq6evUZP0jeQzfnpejG+iKaVZzGmWVuHM67lUxugpidSiCtJQskeLJryU4ogyyvfo0McYqZHXoXv3HKWRFZLv613lVEUbUMk0pL+WRaZvDpk+ZyQVzgaqqJafR/++gbKoSioP6qUDqg5Voz2gQxstgn5olPxVsdWiGjj3gVG0V5EfWIRyW76kijfPSioUhhSLiVWU7q0QGWipEMHK9+tQhWtQh5eIwCsHle7XrsZVHhTZ7tNy2j+HnAAledsLUO3UUCBTI9j+mcNqtmEzz2KbmsUyacU+t0znj11UaCq41tRK580uHt1/vOL/28qibYn+nn7ysvMwXWrkz/vDLNj+xTY9uzbl9TI+MYZ52sy9wXv0/XKbO7/dYX5h3ivGYrMw+tcoT0afsGhfWrX/B0P/4UFQzLU/AAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/a1946/react.png","srcSet":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/5b37e/react.png 236w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/49058/react.png 472w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/a1946/react.png 944w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/6050d/react.png 1200w","srcWebp":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/99fbb/react.webp","srcSetWebp":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/77392/react.webp 236w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/1f177/react.webp 472w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/99fbb/react.webp 944w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/9000d/react.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M189%2021l5%2025%206%2024-3%203c-3%204-2%208%202%208l4%203c1%203%203%204%205%203h1l3%201%2013%204-5%203c-7%205-7%206-7%204%201-2-2-4-10-5l-4-1c0-3-4-3-8-1-5%202-5%205-1%204l4-2h1l7%203%206%201-7%203-6%202-8-2-7-1-3%204c-3%203-7%2015-7%2019v8l2%207c0%201%201%202%203%202%206%202%207%201%207-2%201-4%202-3%203%201l1%205%202%203v1l1%202%203%203c1%200%202%201%202%204l4%208%202%205h-3l-5%203c-2%201-2%201-6-5s-6-7-11-3c-3%203-4%203-6%202h-4c-1%202-1%202%201%202h3l-2%202c-3%202-6%202-4-1v-1l-2%202-1%202-3%201-3%202-5%203c-3%202-5%203-6%202l-2%201c1%201%200%202-2%202l-2-1-1-1-1%202c1%201%200%201-2%201-7%200-8%200-6%201%201%201%201%201-1%201l-2%201c1%201-4%205-6%205-1-1-7%202-7%203%200%204%205%205%209%202%202-3%202-3%203-1v2c-6%204-13%2011-11%2011%201%201%202%200%205-2l4-2-18%2016c-14%209-15%209-22%205-7-5-11-2-4%204%204%204%204%203-5%2012-4%204-8%207-7%208h-2c1%200%200%202-2%203l-1%203%201-1%2025-18-7%207-13%2010-14%2010c-1%201-2%201-3-1h-3c-1%201%206%2010%208%2010l13-8a199%20199%200%200126-18h4c2-1%203-1%206%201h4c2-1%201-6%200-7-2%200-1-2%201-2l1-1%202-1%207-5c5-4%206-4%206-2l1%203%205%206c8%207%2010%207%2016%203%203-3%204-4%205-2h3l2-1c2%200%205-4%205-6-1-2%200-3%203-6l6-6c1-2%201-2%201%200-1%201%200%202%201%202l1-1c0-2%201-2%203-2s3%200%202-1c-5-2-5-8%200-11l1-3c0-2%202-1%202%202s1%204%203%204%203-1%205-6l4-6-1%203c-3%207-1%2020%204%2022v3l-2%202h1c1-2%202%202%201%206l-1%207c0%203%201%201%203-8l1-3c3%200%2014%2016%2014%2020l1%202c1-1%202%205%201%2010%200%204%203%207%204%204%201-2%202-3%204-3%201%200%202-1%201-8-2-15-2-16-1-16l1-2c0-1%200-2-1-1-2%200-2%200%200-4%201-4%201-5%203-4h1c0-1%200-2-1-1l-1-1c0-2%203-2%203-1%202%204%208%206%2016%205h8c1%200%201-1-1-8-2-9-1-17%203-17l1%201c-1%201%201%203%202%202v-6l-2-7%202%205c2%207%203%208%205%206v-4l-1-5c0-2%201%200%202%203l1%205%209-4h3l1-3v-3l1%202c1%203%203%204%204%202v-6c-3-8-3-8%202-7l6-1c2-2%203%200%201%201l-3%202c-3-2-5%201-2%203l1%203%201%204%204%207h1v1l5%201c6-1%207-1%2012-4%202-2%205-4%204-5h1l4-1%206-1c4%200%204%200%208-6%205-9%205-12%200-6-4%205-6%204-7-4%200-4%200-5%201-4l3-2c2-2%202-2%203%200%201%201%201%201%201-2l2-5%201-4%201-2%203-4%203-4%201-2c-2-6-14-12-19-10-2%201-2%201%202%201%209%200%206%204-3%204-6%201-7%200-6-1l3-1%202-1-2-1c-4%201-4%200%201-2%205-3%207-7%205-8s-1-2%202-2%203%200%203%204c-1%202-1%203%201%204%204%203%208%203%207%201%200-3-3-8-4-7s-4-3-3-4%200-2-5-3c-4-1-6-5-2-5%202%200%202%200%201-3l-1-3c2-1%203%202%203%205l2%204%201-2c-2-7-3-7%204-11%206-4%209-7%205-5-1%200-2-1-1-5l1-10c0-8%201-9%203-4%203%206%205%207%206%204v-3l-1-3c0-3-9-14-12-14-4-1-4%200%200%203%201%202%203%204%202%205l1%201h-7c-4-1-6-1-10%201l-4%201h-1v3h-1l-2%203-6%206-23%2014-3%201-4%201c-4%201-6-3-6-20%200-10%201-14%206-17l2-3c-1-1%200-2%201-2l-2-3-3-4-4-3-3-1v-8c2-19%202-24%201-21l-2%2014a279%20279%200%2001-1%2013l-5-1%202-1c6%200-3-7-17-13-17-9-26-8-36%201-4%203-4%203-2%204%201%201%201%201-1%201h-1l-1%201v1h-1c-1-1-6%209-6%2013%200%205-2-1-6-21l-5-20h-1m34%2017c-3%200-5%202-4%203l-1%201c-1-1-3%200-4%201v2l1-1c2-2%2011-2%2014%200%203%201%203%201%202%202v1c2-1%202-1%202%201-1%200-1%201%200%200l1%205h1c1-1%201-1%201%201h1c1-1%201-1%201%201%200%203%202%204%203%201%201-2%201-2%201%200l1-1%201-1%201%201c1%200%202%200%201%202%200%202%200%202%201%201l2-1%202%202%202%202c1%201%201%200%201-1%200-9-7-20-16-22h-15m74%2037c-6%202-8%2012-4%2017%206%205%2015%200%2015-9%200-6-6-10-11-8m-31%2015a58%2058%200%2001-21%205l-8%202-16%204-10%202-1%201-2%201-2%201%201%201v1h-2c0%203%200%204-3%204h-2l2-3%201-2a120%20120%200%2000-20%2019l2-1c4-3%2030-11%2035-10%202%201%2010%200%2019-2l21-3c9-1%2010-2%2010-10l2-9h-1l-4-1h-1m2%2021v2l-2-1-2-1-2%201%2012%2019c3%201%200-15-3-16l-1-1-1-3-1-2v2m38%2022l-2%205c-2%205-2%205%200%205s1%2010-2%2014c-2%203-7%205-11%204s-4-1-3%202c0%201%201%202%202%201%203-2%206%202%206%208%200%203%200%204%202%204v2l2-1%203-1c4%201%206%200%204-2-2-1-2-2%200-4l1-4c-1-1%201-5%202-5h1l1-3v-4l1-4c2-3%202-4%201-5l-1-3c1-2%200-4-2-6l-3-2-1-1h-1m13%2017l-3%203-2%204-2%204%203-1%204-1%206%203%205%204%202-5%201-6v-2c4-2-8-5-14-3m-76%2011c-12%202-13%202-13%205l-2%202c-17%204-21%204-21%202%200-1-2-1-6%201l-7%203c-4%201-4%205%200%2013%203%205%203%206%206%206l3-1c-1-1%200-2%204-3%2013-3%2026-5%2027-4%201%202%208-1%2015-8%208-9%209-9%2017-6a160%20160%200%200021%207c2%200%202%200%200-4s-7-7-9-5l-1-1-7-3-6-3-3-2h-6l-1-1-11%202m-111%2066l-3%204%204%205c4%204%206%205%207%204h4l2-1-2-2-2-4-2-3-3-4-1-2-4%203m149%2014c-6%201-11%203-11%204l-1%205c0%203%200%203-1%201l-2-3c-1%200-1%201%201%204%201%206%201%208-1%205l-1-5c0-2-2-1-2%202%200%202%200%202-2-1l-2-3c-2%203%208%2022%2011%2021v1c-2%202-2%202-1%206l2%206v2h-47v-2l-3-5-3-3%203-4%203-5c0-1-2%200-3%202-5%207-12%2014-12%2011l-1-3v1l-2%201c-1%200-2%200-1%201l-1%201-1-4c0-3-1-5-3-7-4-4-5-4-12-4-3%200-5-1-5-2l-2-3-3-4c-1-3-3-4-7-5-7-3-8-2-6%202l1%203c-1%201-5%200-7-1-2-2-7-5-11-6-2-1-2-1-2%203l-1%208a173%20173%200%2000-4%2024l-71%201H0v37l1%2038h126l2%204%207%207c5%203%206%205%203%205l-2%201-3%202c-3%200-3%200-1%201%205%201%209%202%208%203h13c2%200%202-1%202-2-1-3%205-3%207%200l3%202%201%201%202%203c1%201%205%200%208-4l3-1c4%201%204%200-1-2-3-2-3-2-1-2l6%201c4%202%203%201-1-2s-6-4-9-3l-1-1c0-2-13%201-16%204-2%202-4%201-4-2%201-2%201-4%203-4%201-1%200-1-2-1-4%201-6%200-6-4l-1-3c-1%200-2-1-1-2%200-1%2058-2%2058%200l-4%202-3%202%203%201c3%201%205%200%203-1-1-1-1-1%201-2l2-2c-3-2%2084-1%2088%201%202%201%203%201%202%202l-2%201-2%202%201%202%201%203%201%203v1c-1%201-1%201%201%201v1l-1%202c2%202%205%202%207%200l3-2%202-1h14l15-1c1-2%203%201%205%205s3%204%202%200l-1-5-3-4-3-2c0-2-3-1-3%201h-2l-4-1-3-1%202-1%202-1h-1l-1-1-1-2-3-1c-1-2%200-2%207-2%207-1%2010-1%207%201l-3%203c-1%203%200%204%205%202l-1-1c-1-1%200-1%203-1%209%200%209%200%209-2l-1-3h26c23%200%2026%200%2026-2l1-37v-36h-42c-41%200-49%200-46-2%201-1%201-2-1-5-3-10-3-10-1-19%201-7%201-10-2-16-2-5-4-6-4-2l-2%204c-2%201-2%201-4-1l-8-8-10%204m17%2017c-1%200-1%203%201%2010l2%209v2c2%202%202%204-1%205-2%202-2%202%203%202s6%200%206-2c-2-4-4-17-3-18v-2l-2-1-2-2c0-4-1-5-4-3M20%20311l1%207%201-3c0-2%200-3%202-3l3%203%203%203-1-3v-4c3-4%200-8-6-8h-3v8m170-3v14l1-2c0-1%201-2%203-2%207-1%206-11%200-11l-4%201m59%2022v14l1-3c0-4%203-4%206%200s4%203%201%200v-11h-8'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAD80lEQVQ4y3WTa0yTZxTH3yVgogtjyjI0NVxliuIEHXPrJxLcJgui+0Ky6Bg3QVKKg0LLuBRKpTVhiCZsFEEyI1NcwAUGIbKQLCHOxbDEoJmYIIuGywoLbUFkUNrf3r60QJ2c5LzP857L//mfc55HcDqdOAFpdbJOPXZwOBzS3iOO1VjnmroxBNcH98968QS6xDY7y9LSEpOTk9J+eXlZVIfkn59/4RXvBfg/hm7fwsIChUVFKBQKGk2N3Lr1k2SfmZnBYrWu5ItVuERweAF6s3W4g8xmMzKZjM1btvBWQABxcXE8ePCQifEJHg0PMyEyZ6OSna844KGYXFxcTHx8PFlZWbS2/sDQ0BA1NTUEBQXR3d0jxblasSFDl9MlAwMDZGZkUl9fT1dXFz09PTQ0NHA04Sg+vr4SW6vNtsZwI0C73S7tTSYTIaGhBIeESGXLZDt5Z/dutu/YQXR0DAaDYbU9GwK6nJ7+ucRoNCIIAlu3bWVfVBRvBwYil8tpa7spMv+Wp0+freat6yFeg/AMIzc3lwt1ddRdvEhnZyft7e2kpqai1+vR6XSUlZaJV8r+iqGsA5uamkKtVrMrIgLfTZs4efIUtbW1ZGRk8F5sLImJiSQnJ/PRkSO0tLR4l/zyFVlcXKS62sAb/v74+flx/PgJlEqlOAAfqezEY8cYHBwUJ9tNb2+v++U41i62Y91EXczS0tKkyRXkF5CQkMDdu7+LAH8QGbmX9PR0Ojo6sMxYGBsbZ/6F+5U41p6g4HpCLpmemkZdpKawsJCRkRGezz3n+vUbEpNnYtNV4gHDw4+l2OysbELDwsRr9PPK/bMvr4CKKngG0NffR/+v/V7vOSUtheCwYJI+S6Lu0gXGJscku1an5bD8ML23e3lZhKYvr9CceoXvM65yQ9FG46nLXP6iCZO4KqPzUBzI5ePNn/DVoXy++7yBq6evUZP0jeQzfnpejG+iKaVZzGmWVuHM67lUxugpidSiCtJQskeLJryU4ogyyvfo0McYqZHXoXv3HKWRFZLv613lVEUbUMk0pL+WRaZvDpk+ZyQVzgaqqJafR/++gbKoSioP6qUDqg5Voz2gQxstgn5olPxVsdWiGjj3gVG0V5EfWIRyW76kijfPSioUhhSLiVWU7q0QGWipEMHK9+tQhWtQh5eIwCsHle7XrsZVHhTZ7tNy2j+HnAAledsLUO3UUCBTI9j+mcNqtmEzz2KbmsUyacU+t0znj11UaCq41tRK580uHt1/vOL/28qibYn+nn7ysvMwXWrkz/vDLNj+xTY9uzbl9TI+MYZ52sy9wXv0/XKbO7/dYX5h3ivGYrMw+tcoT0afsGhfWrX/B0P/4UFQzLU/AAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/3ddd4/react.png","srcSet":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/078a8/react.png 163w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/e56da/react.png 327w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/3ddd4/react.png 653w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/c5cc7/react.png 980w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/6050d/react.png 1200w","srcWebp":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/0acdf/react.webp","srcSetWebp":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/ac59e/react.webp 163w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/7660b/react.webp 327w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/0acdf/react.webp 653w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/75470/react.webp 980w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/9000d/react.webp 1200w","sizes":"(max-width: 653px) 100vw, 653px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M189%2021l5%2025%206%2024-3%203c-3%204-2%208%202%208l4%203c1%203%203%204%205%203h1l3%201%2013%204-5%203c-7%205-7%206-7%204%201-2-2-4-10-5l-4-1c0-3-4-3-8-1-5%202-5%205-1%204l4-2h1l7%203%206%201-7%203-6%202-8-2-7-1-3%204c-3%203-7%2015-7%2019v8l2%207c0%201%201%202%203%202%206%202%207%201%207-2%201-4%202-3%203%201l1%205%202%203v1l1%202%203%203c1%200%202%201%202%204l4%208%202%205h-3l-5%203c-2%201-2%201-6-5s-6-7-11-3c-3%203-4%203-6%202h-4c-1%202-1%202%201%202h3l-2%202c-3%202-6%202-4-1v-1l-2%202-1%202-3%201-3%202-5%203c-3%202-5%203-6%202l-2%201c1%201%200%202-2%202l-2-1-1-1-1%202c1%201%200%201-2%201-7%200-8%200-6%201%201%201%201%201-1%201l-2%201c1%201-4%205-6%205-1-1-7%202-7%203%200%204%205%205%209%202%202-3%202-3%203-1v2c-6%204-13%2011-11%2011%201%201%202%200%205-2l4-2-18%2016c-14%209-15%209-22%205-7-5-11-2-4%204%204%204%204%203-5%2012-4%204-8%207-7%208h-2c1%200%200%202-2%203l-1%203%201-1%2025-18-7%207-13%2010-14%2010c-1%201-2%201-3-1h-3c-1%201%206%2010%208%2010l13-8a199%20199%200%200126-18h4c2-1%203-1%206%201h4c2-1%201-6%200-7-2%200-1-2%201-2l1-1%202-1%207-5c5-4%206-4%206-2l1%203%205%206c8%207%2010%207%2016%203%203-3%204-4%205-2h3l2-1c2%200%205-4%205-6-1-2%200-3%203-6l6-6c1-2%201-2%201%200-1%201%200%202%201%202l1-1c0-2%201-2%203-2s3%200%202-1c-5-2-5-8%200-11l1-3c0-2%202-1%202%202s1%204%203%204%203-1%205-6l4-6-1%203c-3%207-1%2020%204%2022v3l-2%202h1c1-2%202%202%201%206l-1%207c0%203%201%201%203-8l1-3c3%200%2014%2016%2014%2020l1%202c1-1%202%205%201%2010%200%204%203%207%204%204%201-2%202-3%204-3%201%200%202-1%201-8-2-15-2-16-1-16l1-2c0-1%200-2-1-1-2%200-2%200%200-4%201-4%201-5%203-4h1c0-1%200-2-1-1l-1-1c0-2%203-2%203-1%202%204%208%206%2016%205h8c1%200%201-1-1-8-2-9-1-17%203-17l1%201c-1%201%201%203%202%202v-6l-2-7%202%205c2%207%203%208%205%206v-4l-1-5c0-2%201%200%202%203l1%205%209-4h3l1-3v-3l1%202c1%203%203%204%204%202v-6c-3-8-3-8%202-7l6-1c2-2%203%200%201%201l-3%202c-3-2-5%201-2%203l1%203%201%204%204%207h1v1l5%201c6-1%207-1%2012-4%202-2%205-4%204-5h1l4-1%206-1c4%200%204%200%208-6%205-9%205-12%200-6-4%205-6%204-7-4%200-4%200-5%201-4l3-2c2-2%202-2%203%200%201%201%201%201%201-2l2-5%201-4%201-2%203-4%203-4%201-2c-2-6-14-12-19-10-2%201-2%201%202%201%209%200%206%204-3%204-6%201-7%200-6-1l3-1%202-1-2-1c-4%201-4%200%201-2%205-3%207-7%205-8s-1-2%202-2%203%200%203%204c-1%202-1%203%201%204%204%203%208%203%207%201%200-3-3-8-4-7s-4-3-3-4%200-2-5-3c-4-1-6-5-2-5%202%200%202%200%201-3l-1-3c2-1%203%202%203%205l2%204%201-2c-2-7-3-7%204-11%206-4%209-7%205-5-1%200-2-1-1-5l1-10c0-8%201-9%203-4%203%206%205%207%206%204v-3l-1-3c0-3-9-14-12-14-4-1-4%200%200%203%201%202%203%204%202%205l1%201h-7c-4-1-6-1-10%201l-4%201h-1v3h-1l-2%203-6%206-23%2014-3%201-4%201c-4%201-6-3-6-20%200-10%201-14%206-17l2-3c-1-1%200-2%201-2l-2-3-3-4-4-3-3-1v-8c2-19%202-24%201-21l-2%2014a279%20279%200%2001-1%2013l-5-1%202-1c6%200-3-7-17-13-17-9-26-8-36%201-4%203-4%203-2%204%201%201%201%201-1%201h-1l-1%201v1h-1c-1-1-6%209-6%2013%200%205-2-1-6-21l-5-20h-1m34%2017c-3%200-5%202-4%203l-1%201c-1-1-3%200-4%201v2l1-1c2-2%2011-2%2014%200%203%201%203%201%202%202v1c2-1%202-1%202%201-1%200-1%201%200%200l1%205h1c1-1%201-1%201%201h1c1-1%201-1%201%201%200%203%202%204%203%201%201-2%201-2%201%200l1-1%201-1%201%201c1%200%202%200%201%202%200%202%200%202%201%201l2-1%202%202%202%202c1%201%201%200%201-1%200-9-7-20-16-22h-15m74%2037c-6%202-8%2012-4%2017%206%205%2015%200%2015-9%200-6-6-10-11-8m-31%2015a58%2058%200%2001-21%205l-8%202-16%204-10%202-1%201-2%201-2%201%201%201v1h-2c0%203%200%204-3%204h-2l2-3%201-2a120%20120%200%2000-20%2019l2-1c4-3%2030-11%2035-10%202%201%2010%200%2019-2l21-3c9-1%2010-2%2010-10l2-9h-1l-4-1h-1m2%2021v2l-2-1-2-1-2%201%2012%2019c3%201%200-15-3-16l-1-1-1-3-1-2v2m38%2022l-2%205c-2%205-2%205%200%205s1%2010-2%2014c-2%203-7%205-11%204s-4-1-3%202c0%201%201%202%202%201%203-2%206%202%206%208%200%203%200%204%202%204v2l2-1%203-1c4%201%206%200%204-2-2-1-2-2%200-4l1-4c-1-1%201-5%202-5h1l1-3v-4l1-4c2-3%202-4%201-5l-1-3c1-2%200-4-2-6l-3-2-1-1h-1m13%2017l-3%203-2%204-2%204%203-1%204-1%206%203%205%204%202-5%201-6v-2c4-2-8-5-14-3m-76%2011c-12%202-13%202-13%205l-2%202c-17%204-21%204-21%202%200-1-2-1-6%201l-7%203c-4%201-4%205%200%2013%203%205%203%206%206%206l3-1c-1-1%200-2%204-3%2013-3%2026-5%2027-4%201%202%208-1%2015-8%208-9%209-9%2017-6a160%20160%200%200021%207c2%200%202%200%200-4s-7-7-9-5l-1-1-7-3-6-3-3-2h-6l-1-1-11%202m-111%2066l-3%204%204%205c4%204%206%205%207%204h4l2-1-2-2-2-4-2-3-3-4-1-2-4%203m149%2014c-6%201-11%203-11%204l-1%205c0%203%200%203-1%201l-2-3c-1%200-1%201%201%204%201%206%201%208-1%205l-1-5c0-2-2-1-2%202%200%202%200%202-2-1l-2-3c-2%203%208%2022%2011%2021v1c-2%202-2%202-1%206l2%206v2h-47v-2l-3-5-3-3%203-4%203-5c0-1-2%200-3%202-5%207-12%2014-12%2011l-1-3v1l-2%201c-1%200-2%200-1%201l-1%201-1-4c0-3-1-5-3-7-4-4-5-4-12-4-3%200-5-1-5-2l-2-3-3-4c-1-3-3-4-7-5-7-3-8-2-6%202l1%203c-1%201-5%200-7-1-2-2-7-5-11-6-2-1-2-1-2%203l-1%208a173%20173%200%2000-4%2024l-71%201H0v37l1%2038h126l2%204%207%207c5%203%206%205%203%205l-2%201-3%202c-3%200-3%200-1%201%205%201%209%202%208%203h13c2%200%202-1%202-2-1-3%205-3%207%200l3%202%201%201%202%203c1%201%205%200%208-4l3-1c4%201%204%200-1-2-3-2-3-2-1-2l6%201c4%202%203%201-1-2s-6-4-9-3l-1-1c0-2-13%201-16%204-2%202-4%201-4-2%201-2%201-4%203-4%201-1%200-1-2-1-4%201-6%200-6-4l-1-3c-1%200-2-1-1-2%200-1%2058-2%2058%200l-4%202-3%202%203%201c3%201%205%200%203-1-1-1-1-1%201-2l2-2c-3-2%2084-1%2088%201%202%201%203%201%202%202l-2%201-2%202%201%202%201%203%201%203v1c-1%201-1%201%201%201v1l-1%202c2%202%205%202%207%200l3-2%202-1h14l15-1c1-2%203%201%205%205s3%204%202%200l-1-5-3-4-3-2c0-2-3-1-3%201h-2l-4-1-3-1%202-1%202-1h-1l-1-1-1-2-3-1c-1-2%200-2%207-2%207-1%2010-1%207%201l-3%203c-1%203%200%204%205%202l-1-1c-1-1%200-1%203-1%209%200%209%200%209-2l-1-3h26c23%200%2026%200%2026-2l1-37v-36h-42c-41%200-49%200-46-2%201-1%201-2-1-5-3-10-3-10-1-19%201-7%201-10-2-16-2-5-4-6-4-2l-2%204c-2%201-2%201-4-1l-8-8-10%204m17%2017c-1%200-1%203%201%2010l2%209v2c2%202%202%204-1%205-2%202-2%202%203%202s6%200%206-2c-2-4-4-17-3-18v-2l-2-1-2-2c0-4-1-5-4-3M20%20311l1%207%201-3c0-2%200-3%202-3l3%203%203%203-1-3v-4c3-4%200-8-6-8h-3v8m170-3v14l1-2c0-1%201-2%203-2%207-1%206-11%200-11l-4%201m59%2022v14l1-3c0-4%203-4%206%200s4%203%201%200v-11h-8'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAD80lEQVQ4y3WTa0yTZxTH3yVgogtjyjI0NVxliuIEHXPrJxLcJgui+0Ky6Bg3QVKKg0LLuBRKpTVhiCZsFEEyI1NcwAUGIbKQLCHOxbDEoJmYIIuGywoLbUFkUNrf3r60QJ2c5LzP857L//mfc55HcDqdOAFpdbJOPXZwOBzS3iOO1VjnmroxBNcH98968QS6xDY7y9LSEpOTk9J+eXlZVIfkn59/4RXvBfg/hm7fwsIChUVFKBQKGk2N3Lr1k2SfmZnBYrWu5ItVuERweAF6s3W4g8xmMzKZjM1btvBWQABxcXE8ePCQifEJHg0PMyEyZ6OSna844KGYXFxcTHx8PFlZWbS2/sDQ0BA1NTUEBQXR3d0jxblasSFDl9MlAwMDZGZkUl9fT1dXFz09PTQ0NHA04Sg+vr4SW6vNtsZwI0C73S7tTSYTIaGhBIeESGXLZDt5Z/dutu/YQXR0DAaDYbU9GwK6nJ7+ucRoNCIIAlu3bWVfVBRvBwYil8tpa7spMv+Wp0+freat6yFeg/AMIzc3lwt1ddRdvEhnZyft7e2kpqai1+vR6XSUlZaJV8r+iqGsA5uamkKtVrMrIgLfTZs4efIUtbW1ZGRk8F5sLImJiSQnJ/PRkSO0tLR4l/zyFVlcXKS62sAb/v74+flx/PgJlEqlOAAfqezEY8cYHBwUJ9tNb2+v++U41i62Y91EXczS0tKkyRXkF5CQkMDdu7+LAH8QGbmX9PR0Ojo6sMxYGBsbZ/6F+5U41p6g4HpCLpmemkZdpKawsJCRkRGezz3n+vUbEpNnYtNV4gHDw4+l2OysbELDwsRr9PPK/bMvr4CKKngG0NffR/+v/V7vOSUtheCwYJI+S6Lu0gXGJscku1an5bD8ML23e3lZhKYvr9CceoXvM65yQ9FG46nLXP6iCZO4KqPzUBzI5ePNn/DVoXy++7yBq6evUZP0jeQzfnpejG+iKaVZzGmWVuHM67lUxugpidSiCtJQskeLJryU4ogyyvfo0McYqZHXoXv3HKWRFZLv613lVEUbUMk0pL+WRaZvDpk+ZyQVzgaqqJafR/++gbKoSioP6qUDqg5Voz2gQxstgn5olPxVsdWiGjj3gVG0V5EfWIRyW76kijfPSioUhhSLiVWU7q0QGWipEMHK9+tQhWtQh5eIwCsHle7XrsZVHhTZ7tNy2j+HnAAledsLUO3UUCBTI9j+mcNqtmEzz2KbmsUyacU+t0znj11UaCq41tRK580uHt1/vOL/28qibYn+nn7ysvMwXWrkz/vDLNj+xTY9uzbl9TI+MYZ52sy9wXv0/XKbO7/dYX5h3ivGYrMw+tcoT0afsGhfWrX/B0P/4UFQzLU/AAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/502b1/react.png","srcSet":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/f2e6d/react.png 114w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/4ddba/react.png 229w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/502b1/react.png 457w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/7ddc2/react.png 686w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/435bf/react.png 914w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/6050d/react.png 1200w","srcWebp":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/15384/react.webp","srcSetWebp":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/31fce/react.webp 114w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/e3e25/react.webp 229w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/15384/react.webp 457w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/0258d/react.webp 686w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/64ea2/react.webp 914w,\n/static/7a5e4b3bb1f6af2388a2ec91d4706e25/9000d/react.webp 1200w","sizes":"(max-width: 457px) 100vw, 457px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M189%2021l5%2025%206%2024-3%203c-3%204-2%208%202%208l4%203c1%203%203%204%205%203h1l3%201%2013%204-5%203c-7%205-7%206-7%204%201-2-2-4-10-5l-4-1c0-3-4-3-8-1-5%202-5%205-1%204l4-2h1l7%203%206%201-7%203-6%202-8-2-7-1-3%204c-3%203-7%2015-7%2019v8l2%207c0%201%201%202%203%202%206%202%207%201%207-2%201-4%202-3%203%201l1%205%202%203v1l1%202%203%203c1%200%202%201%202%204l4%208%202%205h-3l-5%203c-2%201-2%201-6-5s-6-7-11-3c-3%203-4%203-6%202h-4c-1%202-1%202%201%202h3l-2%202c-3%202-6%202-4-1v-1l-2%202-1%202-3%201-3%202-5%203c-3%202-5%203-6%202l-2%201c1%201%200%202-2%202l-2-1-1-1-1%202c1%201%200%201-2%201-7%200-8%200-6%201%201%201%201%201-1%201l-2%201c1%201-4%205-6%205-1-1-7%202-7%203%200%204%205%205%209%202%202-3%202-3%203-1v2c-6%204-13%2011-11%2011%201%201%202%200%205-2l4-2-18%2016c-14%209-15%209-22%205-7-5-11-2-4%204%204%204%204%203-5%2012-4%204-8%207-7%208h-2c1%200%200%202-2%203l-1%203%201-1%2025-18-7%207-13%2010-14%2010c-1%201-2%201-3-1h-3c-1%201%206%2010%208%2010l13-8a199%20199%200%200126-18h4c2-1%203-1%206%201h4c2-1%201-6%200-7-2%200-1-2%201-2l1-1%202-1%207-5c5-4%206-4%206-2l1%203%205%206c8%207%2010%207%2016%203%203-3%204-4%205-2h3l2-1c2%200%205-4%205-6-1-2%200-3%203-6l6-6c1-2%201-2%201%200-1%201%200%202%201%202l1-1c0-2%201-2%203-2s3%200%202-1c-5-2-5-8%200-11l1-3c0-2%202-1%202%202s1%204%203%204%203-1%205-6l4-6-1%203c-3%207-1%2020%204%2022v3l-2%202h1c1-2%202%202%201%206l-1%207c0%203%201%201%203-8l1-3c3%200%2014%2016%2014%2020l1%202c1-1%202%205%201%2010%200%204%203%207%204%204%201-2%202-3%204-3%201%200%202-1%201-8-2-15-2-16-1-16l1-2c0-1%200-2-1-1-2%200-2%200%200-4%201-4%201-5%203-4h1c0-1%200-2-1-1l-1-1c0-2%203-2%203-1%202%204%208%206%2016%205h8c1%200%201-1-1-8-2-9-1-17%203-17l1%201c-1%201%201%203%202%202v-6l-2-7%202%205c2%207%203%208%205%206v-4l-1-5c0-2%201%200%202%203l1%205%209-4h3l1-3v-3l1%202c1%203%203%204%204%202v-6c-3-8-3-8%202-7l6-1c2-2%203%200%201%201l-3%202c-3-2-5%201-2%203l1%203%201%204%204%207h1v1l5%201c6-1%207-1%2012-4%202-2%205-4%204-5h1l4-1%206-1c4%200%204%200%208-6%205-9%205-12%200-6-4%205-6%204-7-4%200-4%200-5%201-4l3-2c2-2%202-2%203%200%201%201%201%201%201-2l2-5%201-4%201-2%203-4%203-4%201-2c-2-6-14-12-19-10-2%201-2%201%202%201%209%200%206%204-3%204-6%201-7%200-6-1l3-1%202-1-2-1c-4%201-4%200%201-2%205-3%207-7%205-8s-1-2%202-2%203%200%203%204c-1%202-1%203%201%204%204%203%208%203%207%201%200-3-3-8-4-7s-4-3-3-4%200-2-5-3c-4-1-6-5-2-5%202%200%202%200%201-3l-1-3c2-1%203%202%203%205l2%204%201-2c-2-7-3-7%204-11%206-4%209-7%205-5-1%200-2-1-1-5l1-10c0-8%201-9%203-4%203%206%205%207%206%204v-3l-1-3c0-3-9-14-12-14-4-1-4%200%200%203%201%202%203%204%202%205l1%201h-7c-4-1-6-1-10%201l-4%201h-1v3h-1l-2%203-6%206-23%2014-3%201-4%201c-4%201-6-3-6-20%200-10%201-14%206-17l2-3c-1-1%200-2%201-2l-2-3-3-4-4-3-3-1v-8c2-19%202-24%201-21l-2%2014a279%20279%200%2001-1%2013l-5-1%202-1c6%200-3-7-17-13-17-9-26-8-36%201-4%203-4%203-2%204%201%201%201%201-1%201h-1l-1%201v1h-1c-1-1-6%209-6%2013%200%205-2-1-6-21l-5-20h-1m34%2017c-3%200-5%202-4%203l-1%201c-1-1-3%200-4%201v2l1-1c2-2%2011-2%2014%200%203%201%203%201%202%202v1c2-1%202-1%202%201-1%200-1%201%200%200l1%205h1c1-1%201-1%201%201h1c1-1%201-1%201%201%200%203%202%204%203%201%201-2%201-2%201%200l1-1%201-1%201%201c1%200%202%200%201%202%200%202%200%202%201%201l2-1%202%202%202%202c1%201%201%200%201-1%200-9-7-20-16-22h-15m74%2037c-6%202-8%2012-4%2017%206%205%2015%200%2015-9%200-6-6-10-11-8m-31%2015a58%2058%200%2001-21%205l-8%202-16%204-10%202-1%201-2%201-2%201%201%201v1h-2c0%203%200%204-3%204h-2l2-3%201-2a120%20120%200%2000-20%2019l2-1c4-3%2030-11%2035-10%202%201%2010%200%2019-2l21-3c9-1%2010-2%2010-10l2-9h-1l-4-1h-1m2%2021v2l-2-1-2-1-2%201%2012%2019c3%201%200-15-3-16l-1-1-1-3-1-2v2m38%2022l-2%205c-2%205-2%205%200%205s1%2010-2%2014c-2%203-7%205-11%204s-4-1-3%202c0%201%201%202%202%201%203-2%206%202%206%208%200%203%200%204%202%204v2l2-1%203-1c4%201%206%200%204-2-2-1-2-2%200-4l1-4c-1-1%201-5%202-5h1l1-3v-4l1-4c2-3%202-4%201-5l-1-3c1-2%200-4-2-6l-3-2-1-1h-1m13%2017l-3%203-2%204-2%204%203-1%204-1%206%203%205%204%202-5%201-6v-2c4-2-8-5-14-3m-76%2011c-12%202-13%202-13%205l-2%202c-17%204-21%204-21%202%200-1-2-1-6%201l-7%203c-4%201-4%205%200%2013%203%205%203%206%206%206l3-1c-1-1%200-2%204-3%2013-3%2026-5%2027-4%201%202%208-1%2015-8%208-9%209-9%2017-6a160%20160%200%200021%207c2%200%202%200%200-4s-7-7-9-5l-1-1-7-3-6-3-3-2h-6l-1-1-11%202m-111%2066l-3%204%204%205c4%204%206%205%207%204h4l2-1-2-2-2-4-2-3-3-4-1-2-4%203m149%2014c-6%201-11%203-11%204l-1%205c0%203%200%203-1%201l-2-3c-1%200-1%201%201%204%201%206%201%208-1%205l-1-5c0-2-2-1-2%202%200%202%200%202-2-1l-2-3c-2%203%208%2022%2011%2021v1c-2%202-2%202-1%206l2%206v2h-47v-2l-3-5-3-3%203-4%203-5c0-1-2%200-3%202-5%207-12%2014-12%2011l-1-3v1l-2%201c-1%200-2%200-1%201l-1%201-1-4c0-3-1-5-3-7-4-4-5-4-12-4-3%200-5-1-5-2l-2-3-3-4c-1-3-3-4-7-5-7-3-8-2-6%202l1%203c-1%201-5%200-7-1-2-2-7-5-11-6-2-1-2-1-2%203l-1%208a173%20173%200%2000-4%2024l-71%201H0v37l1%2038h126l2%204%207%207c5%203%206%205%203%205l-2%201-3%202c-3%200-3%200-1%201%205%201%209%202%208%203h13c2%200%202-1%202-2-1-3%205-3%207%200l3%202%201%201%202%203c1%201%205%200%208-4l3-1c4%201%204%200-1-2-3-2-3-2-1-2l6%201c4%202%203%201-1-2s-6-4-9-3l-1-1c0-2-13%201-16%204-2%202-4%201-4-2%201-2%201-4%203-4%201-1%200-1-2-1-4%201-6%200-6-4l-1-3c-1%200-2-1-1-2%200-1%2058-2%2058%200l-4%202-3%202%203%201c3%201%205%200%203-1-1-1-1-1%201-2l2-2c-3-2%2084-1%2088%201%202%201%203%201%202%202l-2%201-2%202%201%202%201%203%201%203v1c-1%201-1%201%201%201v1l-1%202c2%202%205%202%207%200l3-2%202-1h14l15-1c1-2%203%201%205%205s3%204%202%200l-1-5-3-4-3-2c0-2-3-1-3%201h-2l-4-1-3-1%202-1%202-1h-1l-1-1-1-2-3-1c-1-2%200-2%207-2%207-1%2010-1%207%201l-3%203c-1%203%200%204%205%202l-1-1c-1-1%200-1%203-1%209%200%209%200%209-2l-1-3h26c23%200%2026%200%2026-2l1-37v-36h-42c-41%200-49%200-46-2%201-1%201-2-1-5-3-10-3-10-1-19%201-7%201-10-2-16-2-5-4-6-4-2l-2%204c-2%201-2%201-4-1l-8-8-10%204m17%2017c-1%200-1%203%201%2010l2%209v2c2%202%202%204-1%205-2%202-2%202%203%202s6%200%206-2c-2-4-4-17-3-18v-2l-2-1-2-2c0-4-1-5-4-3M20%20311l1%207%201-3c0-2%200-3%202-3l3%203%203%203-1-3v-4c3-4%200-8-6-8h-3v8m170-3v14l1-2c0-1%201-2%203-2%207-1%206-11%200-11l-4%201m59%2022v14l1-3c0-4%203-4%206%200s4%203%201%200v-11h-8'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"seo":{"src":"/static/7a5e4b3bb1f6af2388a2ec91d4706e25/6050d/react.png"}}},{"id":"ef8cfe57-c190-545c-be72-6a7441988d53","slug":"/advanced-typescript-patterns-and-architectures","secret":false,"title":"Advanced TypeScript Patterns and Architectures","author":"Luke Celitan","date":"June 28th, 2025","dateForSEO":"2025-06-28T00:00:00.000Z","timeToRead":4,"excerpt":"A comprehensive deep-dive into advanced TypeScript patterns, type-level programming, generics, decorators, performance optimization, and scalable enterprise architecture.","subscription":true,"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"Advanced TypeScript Patterns and Architectures\",\n \"excerpt\": \"A comprehensive deep-dive into advanced TypeScript patterns, type-level programming, generics, decorators, performance optimization, and scalable enterprise architecture.\",\n \"date\": \"2025-06-28T00:00:00.000Z\",\n \"hero\": \"tsCover.png\",\n \"author\": \"Luke Celitan\",\n \"category\": \"Post\",\n \"tech\": [\"TS\", \"Nodejs\"]\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"advanced-typescript-patterns-and-architecture\"\n }, \"Advanced TypeScript Patterns and Architecture\"), mdx(\"h2\", {\n \"id\": \"introduction\"\n }, \"Introduction\"), mdx(\"p\", null, \"TypeScript has rapidly evolved from a simple type-checking layer for JavaScript into a powerful language for building robust, scalable, and maintainable applications. As projects grow in complexity and scale, leveraging advanced TypeScript patterns becomes essential for enforcing contracts, improving developer productivity, and catching bugs at compile time. In this deep-dive, I\\u2019ll walk you through the most advanced features of TypeScript\\u2014type-level programming, generics, conditional and mapped types, decorators, performance optimization, and architectural patterns for enterprise-scale applications. Whether you\\u2019re a seasoned TypeScript developer or looking to level up your skills, this post will serve as a definitive reference for mastering TypeScript at scale.\"), mdx(\"p\", null, \"Ill focus on the following topics:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The theory and motivation behind advanced type system features\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Step-by-step code examples, from basics to real-world scenarios\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Best practices, common pitfalls, and troubleshooting tips\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Performance and architectural considerations\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"How to build robust, maintainable, and scalable TypeScript codebases\")), mdx(\"h2\", {\n \"id\": \"type-level-programming-in-typescript\"\n }, \"Type-Level Programming in TypeScript\"), mdx(\"h3\", {\n \"id\": \"what-is-type-level-programming\"\n }, \"What is Type-Level Programming?\"), mdx(\"p\", null, \"Type-level programming is the art of using TypeScript\\u2019s type system as a compile-time programming language. This allows you to encode logic, constraints, and computations in types, enabling powerful static analysis and type-safe APIs.\"), mdx(\"h4\", {\n \"id\": \"why-type-level-programming\"\n }, \"Why Type-Level Programming?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Catch errors early:\"), \" Enforce invariants and contracts at compile time.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Expressiveness:\"), \" Model complex data structures and APIs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Maintainability:\"), \" Reduce runtime checks and boilerplate.\")), mdx(\"h3\", {\n \"id\": \"type-inference-and-manipulation\"\n }, \"Type Inference and Manipulation\"), mdx(\"p\", null, \"TypeScript\\u2019s type inference is powerful, but sometimes you need to guide or manipulate types explicitly.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// Basic inference\\nconst num = 42; // type: number\\n\\n// Explicit type annotation\\nconst str: string = 'hello';\\n\\n// Type manipulation with utility types\\ntype User = { id: number; name: string };\\ntype UserId = User['id']; // type: number\\n\")), mdx(\"h4\", {\n \"id\": \"practical-use-case-type-safe-api-responses\"\n }, \"Practical Use Case: Type-Safe API Responses\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type ApiResponse = {\\n status: 'success' | 'error';\\n data: T;\\n error?: string;\\n};\\n\\nfunction fetchUser(): ApiResponse<{ id: number; name: string }> {\\n // ...\\n return { status: 'success', data: { id: 1, name: 'Alice' } };\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"advanced-type-utilities-and-custom-type-functions\"\n }, \"Advanced Type Utilities and Custom Type Functions\"), mdx(\"p\", null, \"TypeScript provides built-in utility types (Partial, Pick, Omit, etc.), but you can create your own for more advanced scenarios.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// Custom type: DeepReadonly\\n\\n// Recursive mapped type\\nexport type DeepReadonly = {\\n readonly [K in keyof T]: T[K] extends object ? DeepReadonly : T[K];\\n};\\n\\nconst config: DeepReadonly<{ a: { b: number } }> = {\\n a: { b: 42 },\\n};\\n// config.a.b = 10; // Error: Cannot assign to 'b' because it is a read-only property.\\n\")), mdx(\"h4\", {\n \"id\": \"edge-case-handling-arrays-and-functions\"\n }, \"Edge Case: Handling Arrays and Functions\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"export type DeepReadonly2 =\\n T extends (infer R)[] ? ReadonlyArray> :\\n T extends Function ? T :\\n T extends object ? { readonly [K in keyof T]: DeepReadonly2 } :\\n T;\\n\")), mdx(\"h3\", {\n \"id\": \"compile-time-validation\"\n }, \"Compile-Time Validation\"), mdx(\"p\", null, \"Type-level programming enables compile-time validation, such as ensuring only valid keys are used.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type ValidKeys = 'id' | 'name';\\nfunction getValue(key: T) {\\n // ...\\n}\\n// getValue('age'); // Error: Argument of type 'age' is not assignable to parameter of type 'id' | 'name'.\\n\")), mdx(\"h2\", {\n \"id\": \"advanced-generics\"\n }, \"Advanced Generics\"), mdx(\"h3\", {\n \"id\": \"generic-constraints-and-defaults\"\n }, \"Generic Constraints and Defaults\"), mdx(\"p\", null, \"Generics allow you to write reusable, type-safe code. Constraints and defaults make them even more powerful.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"function identity(value: T): T {\\n return value;\\n}\\n\\n// Constraint: T must have a length property\\nfunction logLength(value: T): void {\\n console.log(value.length);\\n}\\n\\n// Default generic type\\nfunction createMap(): Record {\\n return {} as Record;\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"higher-order-generics-and-variance\"\n }, \"Higher-Order Generics and Variance\"), mdx(\"p\", null, \"TypeScript supports higher-order generics (generics of generics) and variance (covariance, contravariance).\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// Higher-order generic\\nfunction mapValues(obj: Record, fn: (value: T) => U): Record {\\n const result: Record = {};\\n for (const key in obj) {\\n result[key] = fn(obj[key]);\\n }\\n return result;\\n}\\n\\n// Variance example\\ninterface Covariant {}\\ninterface Contravariant {}\\n// Note: TypeScript does not have explicit 'in'/'out' keywords, but variance is inferred from usage.\\n\")), mdx(\"h3\", {\n \"id\": \"recursive-generics-and-utility-types\"\n }, \"Recursive Generics and Utility Types\"), mdx(\"p\", null, \"Recursive generics enable deep transformations and type-safe builders.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// Recursive generic: Flatten nested arrays\\n\\ntype Flatten = T extends (infer R)[] ? Flatten : T;\\n\\ntype A = Flatten; // number\\n\")), mdx(\"h4\", {\n \"id\": \"best-practice-avoid-overly-complex-generics\"\n }, \"Best Practice: Avoid Overly Complex Generics\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Keep generics readable and document intent.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use type aliases for clarity.\")), mdx(\"h4\", {\n \"id\": \"common-pitfall-type-inference-failures\"\n }, \"Common Pitfall: Type Inference Failures\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Sometimes TypeScript cannot infer types for deeply nested generics. Use explicit annotations when needed.\")), mdx(\"h2\", {\n \"id\": \"conditional-types\"\n }, \"Conditional Types\"), mdx(\"h3\", {\n \"id\": \"syntax-and-use-cases\"\n }, \"Syntax and Use Cases\"), mdx(\"p\", null, \"Conditional types allow you to express logic at the type level.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type IsString = T extends string ? true : false;\\ntype A = IsString<'hello'>; // true\\ntype B = IsString<42>; // false\\n\")), mdx(\"h3\", {\n \"id\": \"distributive-conditional-types\"\n }, \"Distributive Conditional Types\"), mdx(\"p\", null, \"Conditional types distribute over unions by default.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type ToArray = T extends any ? T[] : never;\\ntype A = ToArray; // string[] | number[]\\n\")), mdx(\"h4\", {\n \"id\": \"edge-case-preventing-distribution\"\n }, \"Edge Case: Preventing Distribution\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type NoDistribute = [T] extends [any] ? T[] : never;\\ntype B = NoDistribute; // (string | number)[]\\n\")), mdx(\"h3\", {\n \"id\": \"combining-with-mapped-and-template-literal-types\"\n }, \"Combining with Mapped and Template Literal Types\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type EventName = `on${Capitalize}`;\\ntype ClickEvent = EventName<'click'>; // 'onClick'\\n\")), mdx(\"h4\", {\n \"id\": \"real-world-example-type-safe-event-handlers\"\n }, \"Real-World Example: Type-Safe Event Handlers\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type Events = 'click' | 'hover';\\ntype EventHandlers = {\\n [K in Events as `on${Capitalize}`]: (event: Event) => void;\\n};\\n\\nconst handlers: EventHandlers = {\\n onClick: (e) => {},\\n onHover: (e) => {},\\n};\\n\")), mdx(\"h2\", {\n \"id\": \"template-literal-types\"\n }, \"Template Literal Types\"), mdx(\"h3\", {\n \"id\": \"string-manipulation-at-the-type-level\"\n }, \"String Manipulation at the Type Level\"), mdx(\"p\", null, \"Template literal types allow you to construct and match string types.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type Route = `/api/${string}`;\\nconst route: Route = '/api/users'; // OK\\n// const badRoute: Route = '/users'; // Error\\n\")), mdx(\"h3\", {\n \"id\": \"pattern-matching-and-type-safe-string-apis\"\n }, \"Pattern Matching and Type-Safe String APIs\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type CSSLength = `${number}px` | `${number}em` | `${number}%`;\\nconst width: CSSLength = '100px'; // OK\\n\")), mdx(\"h3\", {\n \"id\": \"real-world-applications\"\n }, \"Real-World Applications\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Event names (as above)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"CSS-in-JS property names\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Type-safe query keys\")), mdx(\"h4\", {\n \"id\": \"advanced-extracting-parts-of-strings\"\n }, \"Advanced: Extracting Parts of Strings\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type ExtractId = T extends `/api/user/${infer Id}` ? Id : never;\\ntype UserId = ExtractId<'/api/user/42'>; // '42'\\n\")), mdx(\"h2\", {\n \"id\": \"mapped-types\"\n }, \"Mapped Types\"), mdx(\"h3\", {\n \"id\": \"built-in-mapped-types\"\n }, \"Built-In Mapped Types\"), mdx(\"p\", null, \"TypeScript provides several built-in mapped types:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Partial\"), \": All properties optional\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Required\"), \": All properties required\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Readonly\"), \": All properties readonly\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Pick\"), \": Select a subset of properties\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Omit\"), \": Exclude a subset of properties\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type User = { id: number; name: string; email?: string };\\ntype ReadonlyUser = Readonly;\\ntype UserWithoutEmail = Omit;\\n\")), mdx(\"h3\", {\n \"id\": \"custom-mapped-types-for-deep-transformations\"\n }, \"Custom Mapped Types for Deep Transformations\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// DeepPartial: recursively make all properties optional\\nexport type DeepPartial = {\\n [K in keyof T]?: T[K] extends object ? DeepPartial : T[K];\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"combining-with-conditional-and-template-literal-types\"\n }, \"Combining with Conditional and Template Literal Types\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type EventMap = {\\n [K in T as `on${Capitalize}`]: (event: Event) => void;\\n};\\n\")), mdx(\"h4\", {\n \"id\": \"best-practice-use-mapped-types-for-dry-code\"\n }, \"Best Practice: Use Mapped Types for DRY Code\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Avoid repetitive type definitions by leveraging mapped types.\")), mdx(\"h4\", {\n \"id\": \"common-pitfall-excessive-recursion\"\n }, \"Common Pitfall: Excessive Recursion\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Deeply recursive mapped types can slow down type checking. Limit recursion depth where possible.\")), mdx(\"h2\", {\n \"id\": \"decorators\"\n }, \"Decorators\"), mdx(\"h3\", {\n \"id\": \"what-are-decorators\"\n }, \"What Are Decorators?\"), mdx(\"p\", null, \"Decorators are special annotations for classes, methods, properties, or parameters. They enable meta-programming and are widely used in frameworks like Angular and NestJS.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Note:\"), \" Decorators are a stage 3 ECMAScript proposal and require \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"experimentalDecorators\"), \" in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"tsconfig.json\"), \".\")), mdx(\"h3\", {\n \"id\": \"class-method-property-and-parameter-decorators\"\n }, \"Class, Method, Property, and Parameter Decorators\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"function Controller(prefix: string) {\\n return function (target: Function) {\\n Reflect.defineMetadata('prefix', prefix, target);\\n };\\n}\\n\\n@Controller('/api')\\nclass UserController {}\\n\\nfunction Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {\\n const original = descriptor.value;\\n descriptor.value = function (...args: any[]) {\\n console.log(`Calling ${propertyKey} with`, args);\\n return original.apply(this, args);\\n };\\n}\\n\\nclass Service {\\n @Log\\n doSomething(a: number, b: number) {\\n return a + b;\\n }\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"metadata-reflection-and-advanced-patterns\"\n }, \"Metadata Reflection and Advanced Patterns\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"import 'reflect-metadata';\\n\\nfunction Inject(token: string) {\\n return function (target: any, propertyKey: string) {\\n Reflect.defineMetadata('inject', token, target, propertyKey);\\n };\\n}\\n\\nclass MyService {\\n @Inject('Logger')\\n logger: any;\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"use-in-frameworks-nestjs-angular\"\n }, \"Use in Frameworks (NestJS, Angular)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"NestJS:\"), \" Uses decorators for controllers, services, dependency injection.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Angular:\"), \" Uses decorators for components, modules, services.\")), mdx(\"h4\", {\n \"id\": \"best-practice-keep-decorators-pure\"\n }, \"Best Practice: Keep Decorators Pure\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Avoid side effects in decorators; use them for metadata and wiring, not business logic.\")), mdx(\"h4\", {\n \"id\": \"common-pitfall-decorator-order\"\n }, \"Common Pitfall: Decorator Order\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The order of decorator application matters. Document and test decorator stacks.\")), mdx(\"h2\", {\n \"id\": \"performance-optimization\"\n }, \"Performance Optimization\"), mdx(\"h3\", {\n \"id\": \"type-system-performance-compile-time-vs-runtime\"\n }, \"Type System Performance: Compile-Time vs. Runtime\"), mdx(\"p\", null, \"TypeScript\\u2019s type system only exists at compile time, but complex types can slow down builds.\"), mdx(\"h4\", {\n \"id\": \"reducing-type-complexity\"\n }, \"Reducing Type Complexity\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Avoid deeply recursive types unless necessary.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Split large types into smaller, composable pieces.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use type aliases to simplify complex expressions.\")), mdx(\"h4\", {\n \"id\": \"performance-benchmark-example\"\n }, \"Performance Benchmark Example\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// Deeply nested recursive types can slow down type checking\\nexport type DeepNest = { next: DeepNest };\\n// Use with caution!\\n\")), mdx(\"h3\", {\n \"id\": \"runtime-performance-type-driven-code-generation\"\n }, \"Runtime Performance: Type-Driven Code Generation\"), mdx(\"p\", null, \"TypeScript types are erased at runtime, but you can use them to drive code generation (e.g., with codegen tools or schema validation libraries).\"), mdx(\"h4\", {\n \"id\": \"avoiding-type-bloat\"\n }, \"Avoiding Type Bloat\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Don\\u2019t overuse type unions or intersections with hundreds of members.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Prefer enums or string literal types for finite sets.\")), mdx(\"h2\", {\n \"id\": \"enterprise-scale-architecture\"\n }, \"Enterprise-Scale Architecture\"), mdx(\"h3\", {\n \"id\": \"modular-type-definitions-and-scalable-type-systems\"\n }, \"Modular Type Definitions and Scalable Type Systems\"), mdx(\"p\", null, \"Organize types into modules for maintainability.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// types/user.ts\\nexport type User = { id: number; name: string };\\n\\n// types/api.ts\\nimport { User } from './user';\\nexport type ApiResponse = { status: string; data: T };\\n\")), mdx(\"h3\", {\n \"id\": \"enforcing-contracts-and-invariants-at-scale\"\n }, \"Enforcing Contracts and Invariants at Scale\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use branded types for nominal typing (e.g., UserId vs. ProductId).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use type guards and assertion functions for runtime validation.\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// Type branding\\nexport type UserId = string & { readonly brand: unique symbol };\\nfunction createUserId(id: string): UserId {\\n return id as UserId;\\n}\\n\\nfunction isUserId(id: string): id is UserId {\\n // runtime check if needed\\n return true;\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"patterns-for-maintainable-robust-and-testable-codebases\"\n }, \"Patterns for Maintainable, Robust, and Testable Codebases\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use interfaces for public APIs, types for internal logic.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Prefer composition over inheritance.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Integrate with linters (ESLint), formatters (Prettier), and CI/CD for type checks.\")), mdx(\"h3\", {\n \"id\": \"integration-with-build-tools-linters-and-cicd\"\n }, \"Integration with Build Tools, Linters, and CI/CD\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tsc --noEmit\"), \" in CI to enforce type safety.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ts-prune\"), \" to find unused types.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"typescript-eslint\"), \" for linting type-aware code.\")), mdx(\"h2\", {\n \"id\": \"advanced-concepts\"\n }, \"Advanced Concepts\"), mdx(\"h3\", {\n \"id\": \"type-recursion-and-fixed-point-types\"\n }, \"Type Recursion and Fixed-Point Types\"), mdx(\"p\", null, \"Recursive types can model complex data structures, but beware of type system limits.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type JSONValue = string | number | boolean | null | JSONObject | JSONArray;\\ninterface JSONObject { [key: string]: JSONValue; }\\ninterface JSONArray extends Array {}\\n\")), mdx(\"h3\", {\n \"id\": \"type-branding-and-nominal-typing\"\n }, \"Type Branding and Nominal Typing\"), mdx(\"p\", null, \"TypeScript is structurally typed, but branding enables nominal typing.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"type USD = number & { readonly brand: unique symbol };\\nfunction asUSD(n: number): USD {\\n return n as USD;\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"type-safe-builder-patterns\"\n }, \"Type-Safe Builder Patterns\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class UserBuilder {\\n private user: Partial = {};\\n setId(id: number): this {\\n this.user.id = id;\\n return this;\\n }\\n setName(name: string): this {\\n this.user.name = name;\\n return this;\\n }\\n build(): User {\\n if (!this.user.id || !this.user.name) throw new Error('Missing fields');\\n return this.user as User;\\n }\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"type-driven-api-design\"\n }, \"Type-Driven API Design\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use generics and mapped types to create type-safe APIs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Example: GraphQL codegen, REST API clients.\")), mdx(\"h3\", {\n \"id\": \"integration-with-third-party-libraries-and-frameworks\"\n }, \"Integration with Third-Party Libraries and Frameworks\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use type definitions from DefinitelyTyped (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"@types/*\"), \").\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Extend or augment types for custom use cases.\")), mdx(\"h3\", {\n \"id\": \"type-testing-and-validation-tools\"\n }, \"Type Testing and Validation Tools\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"tsd\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"expect-type\"), \" for type-level tests.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"zod\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"io-ts\"), \", or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"runtypes\"), \" for runtime validation with type inference.\")), mdx(\"h2\", {\n \"id\": \"troubleshooting-and-debugging-advanced-types\"\n }, \"Troubleshooting and Debugging Advanced Types\"), mdx(\"h3\", {\n \"id\": \"common-errors\"\n }, \"Common Errors\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u201CType instantiation is excessively deep and possibly infinite\\u201D\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u201CType \\u2018X\\u2019 is not assignable to type \\u2018Y\\u2019\\u201D\")), mdx(\"h3\", {\n \"id\": \"debugging-tips\"\n }, \"Debugging Tips\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use type aliases to break down complex types.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"as const\"), \" for literal inference.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"// @ts-expect-error\"), \" to document intentional type violations.\")), mdx(\"h2\", {\n \"id\": \"conclusion\"\n }, \"Conclusion\"), mdx(\"p\", null, \"Advanced TypeScript patterns unlock a new level of expressiveness, safety, and maintainability for your codebase. By mastering type-level programming, generics, conditional and mapped types, decorators, and scalable architecture, you can build robust enterprise applications with confidence. Remember to balance type complexity with performance, document your advanced types, and leverage the ecosystem of tools for testing and validation.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Further Reading:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.typescriptlang.org/docs/handbook/\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"TypeScript Handbook\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.typescriptlang.org/docs/handbook/advanced-types.html\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"Advanced Types\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/type-challenges/type-challenges\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"Type Challenges\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/SamVerschueren/tsd\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"tsd (TypeScript type tests)\"))), mdx(\"p\", null, \"Happy typing!\"));\n}\n;\nMDXContent.isMDXComponent = true;","tech":["TS","Nodejs"],"category":"Post","appDescription":null,"hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAEZklEQVQ4y3VUWUxbRxQ1CEMklpIKsQgoIpRNYCBgA2JpBY1U+gnGbgJIlFLshlaQEEJapDZhNVVoRZevEjAxJYlqSqBSMMsXH4TVAQlCKKExlMWAzWb2FHM6M9ggVOVao3nPd+55Z+45M5yjoyMcAWDzyTh+N8e/h4fY2dmFXq/Hik4HI8lNvphEX28fe378uA0rKzo0yO+DYzQDmn40jCawQwK0trYGnV6H5eVlbGxsYGZmBtpFLZaWlqDRzKC3txf9ff1QtaswODB0DAgzQ5wy2z84wCuNhgEevH6NQ6MRO7u7rHh2dhZarRaLi4uYnPwLQ0PDUDQoWN1ZQNMzZUK/bDBsnbA1GAzQvNKQ4iFMTExgb28P+/v7GB8fR3lZOebm5jA1NXUW0EhY0OhQdUAqkWBzcxNjY2PY2t5mucGBQfT395Piedy5fQfZ2dnIvZoLYYoQKlLT97TPDHjKjoJUVlaiu7ubva+vrzNR6BYHBgYw8XwC9fVyJCQk4qtbX0Ms/hjx8e+hoeE+5ucXTKJQdibArq4uFBbehFwuJ1t7QXp3RMQxQq1+RnLdmJ7+Gx0dnYiLi0dmZiZSU1OR85mEKN0KmazqGNAMRpWUVVahrk6OtrY/UVZSiueE0caGgeRW8ODBQ9STnEqlQnp6BgNL+jAJkhwpamvvQSr93ARo6p1arUbel3mMvkrViW+/uY0bNwrxu7IZpSVluJZ/nW0xKioavn5+CAwMRHJyMtLT0lFRUYmRkdGzgFSAvLxrqP31Hjo7u1BdXY20K2m4W3UXLc0taPqtCfkkHx0dDe8LF+Dt7c0ApRIpnhJBtra2TntIY5f4jG75h+9r0NbaxgAKrhfgyZN2YuhZNCv/QG7uFxBERkIoFCI0NBReXl4IDw9HQUEBenp6TgEPT1iOo6rqOwZYV1ePRkUjlMoWFBFFsz7JQlbWp0hMTERERAQCAgLg7+9PWOdjdXXt2NgUyGga9KjRGB0dZQ0WicV49PAR2onHamp+ZL6LiYlBUFAQIgnLd319IRBEkjPcwOq2iV85eEPIZDJWVFxcjJvERjk5EsKKj3PnbODm5oZLlz5g/yuVSuK/eXYM1cPD4IiI9GKxiA1RqhAiUSquXL6Mj5KSwOMF4x1PD/CCg+Hu7g4bG2twrazA5VqxXAoRJCMjnfQzBYkJCYiOigKHBOuDj48Pa7CrqytTz8ODAPF4rPF09iXbo33jcrm06M2DLoiNjSXOj2MFwYSNH/FYWFgYLl4MY9sOCQkBn89nMwWm/qMfsba2PgGysLBgg2Nv7wAXFxfGiG7L1dUNTk5OcHZ2hqOjI2P8FpnPn38bnp6ebA3N0Wd7BwfY2dnB1tYWlpaWsCLt4Kzo9OSyXCZN1UK/ukoaq0ZFeQWKim6hsbGJqH0VJaXl7AguLCzi5ctptBJL0cuVvs/+M8cOg4AfCb5A8H+Vh4lSCoWCKUZv4Z9/+oXdOGY7DQ0Onlk/8mwE75PbJp5cFtRG/wGBYGS4hAlHKQAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/a1946/tsCover.png","srcSet":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/5b37e/tsCover.png 236w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/49058/tsCover.png 472w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/a1946/tsCover.png 944w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/6050d/tsCover.png 1200w","srcWebp":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/99fbb/tsCover.webp","srcSetWebp":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/77392/tsCover.webp 236w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/1f177/tsCover.webp 472w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/99fbb/tsCover.webp 944w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/9000d/tsCover.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M311%206l-2%206-1%202-1%201v1l-1%201v3c0%203%200%203-2%202l-9-3%201-1c0-3%202-7%203-6s1%201%201-1V9l-1-2-3%206c-2%205-4%207-4%206%200-2%200-2-1-1h-12c-7-2-11-2-11-1a172%20172%200%200134%207c9%202%2010%203%2016%209%206%205%207%206%206%207-1%202-2%202-3%200-3-2-2%200%200%203l2%201c0-2%200-2%202-1%202%203%201%203-8%202-8-2-19-3-18-1l7%201c18%201%2028%205%2026%2010l1%201%202%201-1%201h-1v1c3%200%204%201%206%207l2%205h-5c-6-1-7%201-5%209%201%208%201%209-2%207l-6-2-4-1c-3-3-20-4-18-2v1c-1-1-2%200-3%201h-2v-1c1-1%200-1-2-1l-3%201-1%201h-1l1%202c2%201-1%206-3%206l-2-1-1-1-3-3-3-2v3l1%202c1%201%201%201-1%203l-5%203c-1%200-7%206-7%208l2%201%201-3h2l2-1h1v1c-2%202-1%205%201%203h1l1%202c1-1%201%200%200%200%200%202%200%202%201%201l2%201c1%201%200%201-1%201v6l-1%2010-1%206-1%202c1%201%201%201%202-1l2%205%204%2011%202%204-4%203c-4%204-8%205-6%203l-1-1c-1%201-3%200-4-1l-2-2-4-1-5-1-1-1c1-1-2-2-5-2l-4-3-5-2-10-3c-6-3-8-4-8-6-1-9%2013-41%2017-41l1%201%201%201%201-1h2c2%202%203%202%203%201l1-2%201%201c-1%201%200%201%201%201s2%200%201-1c-1%200-1-1%201-2l2-2h-12c-2%201-7%200-7-1h-2c-2%202-2%202%200%202l-2%204c-6%207-12%2024-13%2034v8l3%202%203%202h1c3-1%203%202%200%207-2%204-3%205-6%206-4%201-4%201-2%202h-2c-3%200-3%200-2%201s1%201-1%201h-2l-9%204c-12%204-13%205-12%203l-1-1-3%201%202%201c1%201%201%201-1%201-2-1-3%200-3%201l-3%201-8%202-6%201-1-2c-1-2%202-4%208-6%204%200%206-2%203-2l-1-2c0-2-4-3-5-1l-3%201c-2%200-3%201-1%203v2c-2%201-2%200-3-2-3-9-5-12-11-18l-5-8v-1h-2v-3h-2l-4-2-3-5v-3l-2-2-1%202c-2%202-2%202-3%200-1-3-13-8-19-9-5-1-5-1-2-1%209-3%2021-8%2023-11%204-4%204-6%201-3-2%201-3%202-4%201h-1l1%201c2%201-1%203-6%205l-5%201v-3l3-1h1l-2-1h-3l2-1v-2c-2-2-2-2%201-2l7-3%204-1c-1%202%200%202%201%202%202%200%202-1%202-3v-4c3-4%201-14-2-13h-3l-7%201c-7%203-7%202%200-5a192%20192%200%2001106-54l-8%201a190%20190%200%2000-113%2067h-1l-2-1c-2%200%204%207%208%2010%203%202%202%203-1%202-2%200-3-1-3-2l-2%202c-7%2011-10%2018-7%2024%201%203%201%203-2%202h-4c-2%201-2%201-2-1s0-3-1-2v2l-3%2010c-2%201%201%203%203%202l-3%204c-5%205-7%208-7%2010l-1%202c-1%201-5%2013-6%2020%200%207-1%208-3%204-1-4-1-9%201-16v-7l-3%205c-2%202-2%201%200%2022%203%2020%2013%2046%2016%2042h1c-1%201%200%204%201%205%202%204%207%209%207%207h2l1%202h-3c0%201%207%208%2013%2011l6%206%2014%2024c2%203%202%203%200%206l-1%204H0v75h93v9l-3%2011-1%202%202-1%201%203%201%205v-6c0-3%200-5%202-6%203-2%203-1%202%205%200%204-1%205-2%206l-2%202c0%202%200%202-1%201-1-2-1-2-1%201l-1%205c0%202%201%202%2010%202l11-1h2l1-1-2-1h-1l-4-1c-4%201-5%200-6-1h-4l-1-2-1%202-1%202c-1%200-1-2%201-6h15l-2-1-6-1-4-1h8l-4-1-2-1%202-1h8l5%202%202%201%204%202c0%202%205%200%208-3l4-3%201-3c-1-1%200-1%202-1s2%200%201-1-1-1%201-1l5-2%206-4c3-2%204-3%203-4h3c1-1%200-2-2-4l-3-3h8c6%200%207%200%205%201s-2%201-1%202l3-1h1l1%201c1-1%201%200%201%201l-1%204v-2c0-2%200-2-4%202l-5%205-4%205c-3%202-4%204-3%205l-1%201-1%202c-1%202-1%202-2%201s-1-1-1%201l-1%202-2%201-3%201-3%206%205%201%204-1v-1c2%201%2010-4%209-5l1-1h4c2-1%203-1%203%201h1c1-1%201-1%201%201-1%202-1%203%201%203l1-1h1c1%202%201%202%202-1%201-2%201-2%201%200%200%203%201%202%202-1l2-6c1-3%201-3%201-1l-1%205c-1%201-1%202%201%202%201%200%202-1%201-2h1c1%201%201%201%201-1l2-3%201-3%201-4c1-2%201-2%201%200s0%202%201%201l1-2v-2l1-1h1l4-1%204-2h1l3-1c3-2%204-3%204-6-1-3-1-3%201-1%201%201%201%201%200%200%200-2%200-2%201-1h1v-2h1c1-1%201%200%201%202v3l1-4c1-3%201-3%203-2h1l27-1c20%200%2026%200%2025%201h1l4-1v2c-3%201-6%204-5%205l-1%201v1h-1c-1-1-1-1-3%202s-2%204-1%205c3%201%209-1%207-2v-1h2l4-5c5-5%205-6%201-7a572%20572%200%200173-1c2%201-5%2017-7%2018v1l-2%203v-1l2-7c3-6%202-6-2%200-3%204-3%206-3%208v5c-2%201-2%205-1%205l1%201h-1l-2%201%201%201c1-1%201%200%201%201%200%202%200%202-1%201h-1c0%202%202%202%2021%202%2025%200%2022%201%2023-8%201-3%201-2%201%202v6h23V285c-1%201-3%200-5-1-3-2-2-2%203%200%201%200%202%200%202-3%200-2-1-3-2-3-4%200-9-2-8-3l-3-4c-2-2-2-2-1-3l1-2-2%201c-2%202-2%203-1%203%202%202%202%204%201%204l-4-3c-1-2-1-1-1%203l2%205h3v-1l1%202%204%203%206%203h-17c-15%200-17%200-17-2l1-1%202-3c0-1%200-2%201-1h1l1-4-3%203-4%205c0%203%201%203-40%203h-40l18-6a379%20379%200%200140-14c0-1%201-2%203-2%203-1%205-4%207-14%204-25%204-25%2017-32%2014-7%2020-12%2021-15%202-5%201-5-5-5-7%201-6%200%202-1%205-1%205-1%202-1-6%200-16%203-11%203%202%200%202%200-3%202l-8%201c-2-1-8%201-8%202l-1%201-2-1%202-2%201-3%204-7%202-4c3-6%207-9%2014-13l11-6%208-6%205-3v-50l-3%209-3%208-1%202v4l-1%201v1c1%202-2%2010-3%209v2c0%201%200%202-1%201s-3%206-3%2010c1%202%200%202-1%202l-1%203c0%202-1%203-2%202l-1%201c0%203%200%205-1%204l-1%201-1%203v-2l1-3%201-4c0-2%200-3-1-2v-3c1-1%201-1%201%201l1-3v-7c-1-2-1-2-1%201%200%202%200%203-1%202l-2-2c-1%201-1%200-1-5l1-8v-6l-1-6-1-8a118%20118%200%2000-9-35l-1-1h-1l-2-4-4-3a148%20148%200%200114-22l5-8c15-23%2024-38%2024-42%200-3-2-4-4-2h-7l-1%201-1%201c-1-1-1%200-1%202l-1%201-1%202c0%201%200%202-1%201l-2%201%201%201c2-1%201%201%200%202h-2v1c0%201%200%202-1%201l-2%201%201%201h1l-1%202-1-1h-1l-1%201%201%201h1l-1%202-1-1h-1l-1%201%201%201c2-2%201%201-1%203l-2%201-2%201%201%201c2-2%201%201-3%206l-4%204-2%201%201%201c3-2%201%201-14%2023l-11%2016%203-6c2-2%203-5%202-5l-2-4c-2-7-8-17-9-17l-3-5c-1-3-3-6-7-9-6-6-6-6-2-5l3%202%201%201h1l1%201a101%20101%200%200133%2013v-2l-7-3-6-4%207-13c11-23%2011-24%203-24-3%200-4%201-5%203l-2%201c0-2%200-2-1-1v3l1-1-13%2028-11-4-14-4c-4-1-4%200%201-12%204-12%205-13%203-13l-3%206m-60%2034v2l-2%201c-2%200-6%204-6%206%200%203%201%205%202%205l1-1c-1-2%200-1%202%201s5-1%204-5c0-2%202-4%204-2v1l-2-1%201%204%202%204%202-2%202-2c1%201%201%200%201-1%200-3-1-4-5-6-3-1-5-3-5-4h-1m31%2013c1%204%201%205-2%205l-11%205-8%204-4-3c-2-3-5-4-5-2l3%202%202%203-4%204-6%208c0%202-2%203-2%203-3%201-2%203%201%203%203-1%204-2%206-5l7-8c1%200%205%203%209%208l8%206-1-2v-1l-1-3h-2l-7-5-4-6%202%202%203%201-1-2c-3-3%202-6%2015-10l6-2-2-3-3-4%201%202m100%2029l-2%203h-2c0%203%209%206%2014%205l4-2c1-5-10-10-14-6m-211%209c-4%203-4%205-1%208%202%202%205%203%207%200%202-2%203-4%201-4v-4c-1-2-5-2-7%200m98%2017v3l1%201v1h1c1-1%201-1%201%201l-1%203-1%201-2%201c-3%202-3%200%200-2v-2h-1v-1l-1%202-1%201s-2%200-3%202h-1c1-2-1-3-1%200l-2%201c-1-1%201-4%203-4l2-1%201-3-1-1v-1h-2c0-1-2%200-4%203l-3%205v2l-1%201-1%201-2%206-2%205%202-2c2-4%203-4%204%200%200%202%201%203%202%201h3c1%200%202%200%203-2l1-1h1v2c-1%201-1%202%201%202h1v-2l1-3v-2h2c1-1%202-2%201-3%200-2%202-5%204-5%201%200%200-4-2-6v-3c2-3-1-4-3-1m-145%2022c-3%202-3%202%202%204l4%203-6-2-6-2-1-2c0-2-11-1-17%202-4%202-4%202-1%201%209-2%2015-1%2015%202l1%203v-3c0-2%202-3%202-1l7%204c9%205%2020%2015%2019%2019v22l1-12c0-14%202-14%207-1l4%209c-1-11-11-28-19-34-6-4-7-7-2-3%203%202%206%203%205%201l1-2c2%200-2-4-7-6l-6-3-3%201m-6%2011v2l-1%206v2l1-2v2l-1%203v4c0%202-1%201-1-2l-2-6-1%208-1%2012%201-2v2c0%202%200%202%201%201v6l-1%205%201-2v3c0%203%200%203%201%201v2c0%203%200%204%201%203v1l1%206c1%201%201%201%201-2l-1-4%202%205c3%204%203%204%202%201l1-7c0-2%201-3%201-1h1c1-1%201-1%201%201v3l2%202%201%202%201%202c0%202-2%203-2%201v3c0%203%200%203-1%201l-1-6v-1l-1%203v-3c0-5-2-5-2%200l1%205%201-1a158%20158%200%200013%2039l2%205c1%203%201%203%203%201%202-1%202-2%201-4v-3c1%201%201%201%201-1h2v-11c1-3%201-3%201%205l2%204c2%202%202%202%202%200l-1-2-1-3%202%201c1%202%201%202%202%201v5l-1%202%201-2c3-3%205-13%205-16v-4c2-1%202-2%201-3v-7c0-4%200-5-1-4l-1%208c0%205%200%206-2%204v2c1%202%200%204-1%207l-1%203-1-4%201-2v-3l1-6v-3c-1-1-1-1-1%201h-1l-1-2-1-2c0-2%200-2%201%200h2l-1-2v-7c0-6%200-7-1-6l-1-2c2-7%202-10%201-8-1%201-1%201-1-2v-2l-1%205v10l-1-4v-6l-1-3-1%204v5l-1-4c0-2-1-3-1-1l-1%204c0%202%200%202%201%201l1%201-1%204-3-11v-6l-2%205-1%206%201-5c0-3%200-5-1-4l-1-1c0-1%201-2%202-1l1-3c0-2%200-2-1-1-1%203-2-4-1-8l-1-6-2-6c0-4-1-6-2-3v1l1%205v4c1-2%201-2%201%202%200%203%200%203-1%202-1-2-1-2-1%200l-1-7c-1-10-3-16-4-11-1%202-1%202-1%200%200-4-2-4-3%200%200%205-1%206-1%203l-1-6v11l-1-7-2-7-1%202m127%2039l-9%204a315%20315%200%2000-35%2013%20338%20338%200%2000-20%208c-4%201-7%204-6%205a155%20155%200%200041%204l5-1%203-1%203-2c1-1%201-1%201%201v2l2-2c3-2%204-5%202-3l-1-1c0-1-1-1-1%201-3%203-2%200%200-5%203-5%203-13%200-12l-1-2c0-1%201-2%203-2l3-1%203%201%202-1%204-2c3%200%207-4%206-5-2-1-2-1-5%201m-71%2038l-2%2016-2%2011%204%206%204%205c1-1%203%201%202%202%200%202%203%205%204%204-1%201%202%205%203%205l1-1%204-5%202-2h-2c-2%200-2%200-1-1v-3c-2%200-2-1-1-2%202-2%202-15%200-14-1%202-2%200-1-5%200-5%200-5-3-9l-3-6-2-1-2-2-1-1h-2c-2-2-2-1-2%203m-47%2013l-1%203h-2l-1%203h1l1%204v4h1l2-1%201-3-1%202%201%203h2l1%201%201%201v1h2v-2c-2-1-2-2-1-3l1%201%202%203-1-5c-1-4-2-4-2-2-1%203-3%201-2-3%200-2%200-2-1%200-1%201-1%201-1-1s0-2-1%200c-1%201-1%200-1-4%201-6%200-6-1-2m-83%2073c0%203%200%203-2%202-2-2-6%200-6%205s1%206%206%206h4v-8l-1-8-1%203m107%2024c0%203%200%203-2%202-2-2-6%200-6%205s1%206%206%206h4v-8l-1-8-1%203m83%2055l1%201-1%201c-1%201-3%202-3%204v1c1-1%202%200%204%202l7%204%205%203%203-3%204-3-2-2-4-2h-3l-1-1c1-1%200-2-4-4-5-2-6-2-6-1'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAEZklEQVQ4y3VUWUxbRxQ1CEMklpIKsQgoIpRNYCBgA2JpBY1U+gnGbgJIlFLshlaQEEJapDZhNVVoRZevEjAxJYlqSqBSMMsXH4TVAQlCKKExlMWAzWb2FHM6M9ggVOVao3nPd+55Z+45M5yjoyMcAWDzyTh+N8e/h4fY2dmFXq/Hik4HI8lNvphEX28fe378uA0rKzo0yO+DYzQDmn40jCawQwK0trYGnV6H5eVlbGxsYGZmBtpFLZaWlqDRzKC3txf9ff1QtaswODB0DAgzQ5wy2z84wCuNhgEevH6NQ6MRO7u7rHh2dhZarRaLi4uYnPwLQ0PDUDQoWN1ZQNMzZUK/bDBsnbA1GAzQvNKQ4iFMTExgb28P+/v7GB8fR3lZOebm5jA1NXUW0EhY0OhQdUAqkWBzcxNjY2PY2t5mucGBQfT395Piedy5fQfZ2dnIvZoLYYoQKlLT97TPDHjKjoJUVlaiu7ubva+vrzNR6BYHBgYw8XwC9fVyJCQk4qtbX0Ms/hjx8e+hoeE+5ucXTKJQdibArq4uFBbehFwuJ1t7QXp3RMQxQq1+RnLdmJ7+Gx0dnYiLi0dmZiZSU1OR85mEKN0KmazqGNAMRpWUVVahrk6OtrY/UVZSiueE0caGgeRW8ODBQ9STnEqlQnp6BgNL+jAJkhwpamvvQSr93ARo6p1arUbel3mMvkrViW+/uY0bNwrxu7IZpSVluJZ/nW0xKioavn5+CAwMRHJyMtLT0lFRUYmRkdGzgFSAvLxrqP31Hjo7u1BdXY20K2m4W3UXLc0taPqtCfkkHx0dDe8LF+Dt7c0ApRIpnhJBtra2TntIY5f4jG75h+9r0NbaxgAKrhfgyZN2YuhZNCv/QG7uFxBERkIoFCI0NBReXl4IDw9HQUEBenp6TgEPT1iOo6rqOwZYV1ePRkUjlMoWFBFFsz7JQlbWp0hMTERERAQCAgLg7+9PWOdjdXXt2NgUyGga9KjRGB0dZQ0WicV49PAR2onHamp+ZL6LiYlBUFAQIgnLd319IRBEkjPcwOq2iV85eEPIZDJWVFxcjJvERjk5EsKKj3PnbODm5oZLlz5g/yuVSuK/eXYM1cPD4IiI9GKxiA1RqhAiUSquXL6Mj5KSwOMF4x1PD/CCg+Hu7g4bG2twrazA5VqxXAoRJCMjnfQzBYkJCYiOigKHBOuDj48Pa7CrqytTz8ODAPF4rPF09iXbo33jcrm06M2DLoiNjSXOj2MFwYSNH/FYWFgYLl4MY9sOCQkBn89nMwWm/qMfsba2PgGysLBgg2Nv7wAXFxfGiG7L1dUNTk5OcHZ2hqOjI2P8FpnPn38bnp6ebA3N0Wd7BwfY2dnB1tYWlpaWsCLt4Kzo9OSyXCZN1UK/ukoaq0ZFeQWKim6hsbGJqH0VJaXl7AguLCzi5ctptBJL0cuVvs/+M8cOg4AfCb5A8H+Vh4lSCoWCKUZv4Z9/+oXdOGY7DQ0Onlk/8mwE75PbJp5cFtRG/wGBYGS4hAlHKQAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/3ddd4/tsCover.png","srcSet":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/078a8/tsCover.png 163w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/e56da/tsCover.png 327w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/3ddd4/tsCover.png 653w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/c5cc7/tsCover.png 980w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/6050d/tsCover.png 1200w","srcWebp":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/0acdf/tsCover.webp","srcSetWebp":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/ac59e/tsCover.webp 163w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/7660b/tsCover.webp 327w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/0acdf/tsCover.webp 653w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/75470/tsCover.webp 980w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/9000d/tsCover.webp 1200w","sizes":"(max-width: 653px) 100vw, 653px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M311%206l-2%206-1%202-1%201v1l-1%201v3c0%203%200%203-2%202l-9-3%201-1c0-3%202-7%203-6s1%201%201-1V9l-1-2-3%206c-2%205-4%207-4%206%200-2%200-2-1-1h-12c-7-2-11-2-11-1a172%20172%200%200134%207c9%202%2010%203%2016%209%206%205%207%206%206%207-1%202-2%202-3%200-3-2-2%200%200%203l2%201c0-2%200-2%202-1%202%203%201%203-8%202-8-2-19-3-18-1l7%201c18%201%2028%205%2026%2010l1%201%202%201-1%201h-1v1c3%200%204%201%206%207l2%205h-5c-6-1-7%201-5%209%201%208%201%209-2%207l-6-2-4-1c-3-3-20-4-18-2v1c-1-1-2%200-3%201h-2v-1c1-1%200-1-2-1l-3%201-1%201h-1l1%202c2%201-1%206-3%206l-2-1-1-1-3-3-3-2v3l1%202c1%201%201%201-1%203l-5%203c-1%200-7%206-7%208l2%201%201-3h2l2-1h1v1c-2%202-1%205%201%203h1l1%202c1-1%201%200%200%200%200%202%200%202%201%201l2%201c1%201%200%201-1%201v6l-1%2010-1%206-1%202c1%201%201%201%202-1l2%205%204%2011%202%204-4%203c-4%204-8%205-6%203l-1-1c-1%201-3%200-4-1l-2-2-4-1-5-1-1-1c1-1-2-2-5-2l-4-3-5-2-10-3c-6-3-8-4-8-6-1-9%2013-41%2017-41l1%201%201%201%201-1h2c2%202%203%202%203%201l1-2%201%201c-1%201%200%201%201%201s2%200%201-1c-1%200-1-1%201-2l2-2h-12c-2%201-7%200-7-1h-2c-2%202-2%202%200%202l-2%204c-6%207-12%2024-13%2034v8l3%202%203%202h1c3-1%203%202%200%207-2%204-3%205-6%206-4%201-4%201-2%202h-2c-3%200-3%200-2%201s1%201-1%201h-2l-9%204c-12%204-13%205-12%203l-1-1-3%201%202%201c1%201%201%201-1%201-2-1-3%200-3%201l-3%201-8%202-6%201-1-2c-1-2%202-4%208-6%204%200%206-2%203-2l-1-2c0-2-4-3-5-1l-3%201c-2%200-3%201-1%203v2c-2%201-2%200-3-2-3-9-5-12-11-18l-5-8v-1h-2v-3h-2l-4-2-3-5v-3l-2-2-1%202c-2%202-2%202-3%200-1-3-13-8-19-9-5-1-5-1-2-1%209-3%2021-8%2023-11%204-4%204-6%201-3-2%201-3%202-4%201h-1l1%201c2%201-1%203-6%205l-5%201v-3l3-1h1l-2-1h-3l2-1v-2c-2-2-2-2%201-2l7-3%204-1c-1%202%200%202%201%202%202%200%202-1%202-3v-4c3-4%201-14-2-13h-3l-7%201c-7%203-7%202%200-5a192%20192%200%2001106-54l-8%201a190%20190%200%2000-113%2067h-1l-2-1c-2%200%204%207%208%2010%203%202%202%203-1%202-2%200-3-1-3-2l-2%202c-7%2011-10%2018-7%2024%201%203%201%203-2%202h-4c-2%201-2%201-2-1s0-3-1-2v2l-3%2010c-2%201%201%203%203%202l-3%204c-5%205-7%208-7%2010l-1%202c-1%201-5%2013-6%2020%200%207-1%208-3%204-1-4-1-9%201-16v-7l-3%205c-2%202-2%201%200%2022%203%2020%2013%2046%2016%2042h1c-1%201%200%204%201%205%202%204%207%209%207%207h2l1%202h-3c0%201%207%208%2013%2011l6%206%2014%2024c2%203%202%203%200%206l-1%204H0v75h93v9l-3%2011-1%202%202-1%201%203%201%205v-6c0-3%200-5%202-6%203-2%203-1%202%205%200%204-1%205-2%206l-2%202c0%202%200%202-1%201-1-2-1-2-1%201l-1%205c0%202%201%202%2010%202l11-1h2l1-1-2-1h-1l-4-1c-4%201-5%200-6-1h-4l-1-2-1%202-1%202c-1%200-1-2%201-6h15l-2-1-6-1-4-1h8l-4-1-2-1%202-1h8l5%202%202%201%204%202c0%202%205%200%208-3l4-3%201-3c-1-1%200-1%202-1s2%200%201-1-1-1%201-1l5-2%206-4c3-2%204-3%203-4h3c1-1%200-2-2-4l-3-3h8c6%200%207%200%205%201s-2%201-1%202l3-1h1l1%201c1-1%201%200%201%201l-1%204v-2c0-2%200-2-4%202l-5%205-4%205c-3%202-4%204-3%205l-1%201-1%202c-1%202-1%202-2%201s-1-1-1%201l-1%202-2%201-3%201-3%206%205%201%204-1v-1c2%201%2010-4%209-5l1-1h4c2-1%203-1%203%201h1c1-1%201-1%201%201-1%202-1%203%201%203l1-1h1c1%202%201%202%202-1%201-2%201-2%201%200%200%203%201%202%202-1l2-6c1-3%201-3%201-1l-1%205c-1%201-1%202%201%202%201%200%202-1%201-2h1c1%201%201%201%201-1l2-3%201-3%201-4c1-2%201-2%201%200s0%202%201%201l1-2v-2l1-1h1l4-1%204-2h1l3-1c3-2%204-3%204-6-1-3-1-3%201-1%201%201%201%201%200%200%200-2%200-2%201-1h1v-2h1c1-1%201%200%201%202v3l1-4c1-3%201-3%203-2h1l27-1c20%200%2026%200%2025%201h1l4-1v2c-3%201-6%204-5%205l-1%201v1h-1c-1-1-1-1-3%202s-2%204-1%205c3%201%209-1%207-2v-1h2l4-5c5-5%205-6%201-7a572%20572%200%200173-1c2%201-5%2017-7%2018v1l-2%203v-1l2-7c3-6%202-6-2%200-3%204-3%206-3%208v5c-2%201-2%205-1%205l1%201h-1l-2%201%201%201c1-1%201%200%201%201%200%202%200%202-1%201h-1c0%202%202%202%2021%202%2025%200%2022%201%2023-8%201-3%201-2%201%202v6h23V285c-1%201-3%200-5-1-3-2-2-2%203%200%201%200%202%200%202-3%200-2-1-3-2-3-4%200-9-2-8-3l-3-4c-2-2-2-2-1-3l1-2-2%201c-2%202-2%203-1%203%202%202%202%204%201%204l-4-3c-1-2-1-1-1%203l2%205h3v-1l1%202%204%203%206%203h-17c-15%200-17%200-17-2l1-1%202-3c0-1%200-2%201-1h1l1-4-3%203-4%205c0%203%201%203-40%203h-40l18-6a379%20379%200%200140-14c0-1%201-2%203-2%203-1%205-4%207-14%204-25%204-25%2017-32%2014-7%2020-12%2021-15%202-5%201-5-5-5-7%201-6%200%202-1%205-1%205-1%202-1-6%200-16%203-11%203%202%200%202%200-3%202l-8%201c-2-1-8%201-8%202l-1%201-2-1%202-2%201-3%204-7%202-4c3-6%207-9%2014-13l11-6%208-6%205-3v-50l-3%209-3%208-1%202v4l-1%201v1c1%202-2%2010-3%209v2c0%201%200%202-1%201s-3%206-3%2010c1%202%200%202-1%202l-1%203c0%202-1%203-2%202l-1%201c0%203%200%205-1%204l-1%201-1%203v-2l1-3%201-4c0-2%200-3-1-2v-3c1-1%201-1%201%201l1-3v-7c-1-2-1-2-1%201%200%202%200%203-1%202l-2-2c-1%201-1%200-1-5l1-8v-6l-1-6-1-8a118%20118%200%2000-9-35l-1-1h-1l-2-4-4-3a148%20148%200%200114-22l5-8c15-23%2024-38%2024-42%200-3-2-4-4-2h-7l-1%201-1%201c-1-1-1%200-1%202l-1%201-1%202c0%201%200%202-1%201l-2%201%201%201c2-1%201%201%200%202h-2v1c0%201%200%202-1%201l-2%201%201%201h1l-1%202-1-1h-1l-1%201%201%201h1l-1%202-1-1h-1l-1%201%201%201c2-2%201%201-1%203l-2%201-2%201%201%201c2-2%201%201-3%206l-4%204-2%201%201%201c3-2%201%201-14%2023l-11%2016%203-6c2-2%203-5%202-5l-2-4c-2-7-8-17-9-17l-3-5c-1-3-3-6-7-9-6-6-6-6-2-5l3%202%201%201h1l1%201a101%20101%200%200133%2013v-2l-7-3-6-4%207-13c11-23%2011-24%203-24-3%200-4%201-5%203l-2%201c0-2%200-2-1-1v3l1-1-13%2028-11-4-14-4c-4-1-4%200%201-12%204-12%205-13%203-13l-3%206m-60%2034v2l-2%201c-2%200-6%204-6%206%200%203%201%205%202%205l1-1c-1-2%200-1%202%201s5-1%204-5c0-2%202-4%204-2v1l-2-1%201%204%202%204%202-2%202-2c1%201%201%200%201-1%200-3-1-4-5-6-3-1-5-3-5-4h-1m31%2013c1%204%201%205-2%205l-11%205-8%204-4-3c-2-3-5-4-5-2l3%202%202%203-4%204-6%208c0%202-2%203-2%203-3%201-2%203%201%203%203-1%204-2%206-5l7-8c1%200%205%203%209%208l8%206-1-2v-1l-1-3h-2l-7-5-4-6%202%202%203%201-1-2c-3-3%202-6%2015-10l6-2-2-3-3-4%201%202m100%2029l-2%203h-2c0%203%209%206%2014%205l4-2c1-5-10-10-14-6m-211%209c-4%203-4%205-1%208%202%202%205%203%207%200%202-2%203-4%201-4v-4c-1-2-5-2-7%200m98%2017v3l1%201v1h1c1-1%201-1%201%201l-1%203-1%201-2%201c-3%202-3%200%200-2v-2h-1v-1l-1%202-1%201s-2%200-3%202h-1c1-2-1-3-1%200l-2%201c-1-1%201-4%203-4l2-1%201-3-1-1v-1h-2c0-1-2%200-4%203l-3%205v2l-1%201-1%201-2%206-2%205%202-2c2-4%203-4%204%200%200%202%201%203%202%201h3c1%200%202%200%203-2l1-1h1v2c-1%201-1%202%201%202h1v-2l1-3v-2h2c1-1%202-2%201-3%200-2%202-5%204-5%201%200%200-4-2-6v-3c2-3-1-4-3-1m-145%2022c-3%202-3%202%202%204l4%203-6-2-6-2-1-2c0-2-11-1-17%202-4%202-4%202-1%201%209-2%2015-1%2015%202l1%203v-3c0-2%202-3%202-1l7%204c9%205%2020%2015%2019%2019v22l1-12c0-14%202-14%207-1l4%209c-1-11-11-28-19-34-6-4-7-7-2-3%203%202%206%203%205%201l1-2c2%200-2-4-7-6l-6-3-3%201m-6%2011v2l-1%206v2l1-2v2l-1%203v4c0%202-1%201-1-2l-2-6-1%208-1%2012%201-2v2c0%202%200%202%201%201v6l-1%205%201-2v3c0%203%200%203%201%201v2c0%203%200%204%201%203v1l1%206c1%201%201%201%201-2l-1-4%202%205c3%204%203%204%202%201l1-7c0-2%201-3%201-1h1c1-1%201-1%201%201v3l2%202%201%202%201%202c0%202-2%203-2%201v3c0%203%200%203-1%201l-1-6v-1l-1%203v-3c0-5-2-5-2%200l1%205%201-1a158%20158%200%200013%2039l2%205c1%203%201%203%203%201%202-1%202-2%201-4v-3c1%201%201%201%201-1h2v-11c1-3%201-3%201%205l2%204c2%202%202%202%202%200l-1-2-1-3%202%201c1%202%201%202%202%201v5l-1%202%201-2c3-3%205-13%205-16v-4c2-1%202-2%201-3v-7c0-4%200-5-1-4l-1%208c0%205%200%206-2%204v2c1%202%200%204-1%207l-1%203-1-4%201-2v-3l1-6v-3c-1-1-1-1-1%201h-1l-1-2-1-2c0-2%200-2%201%200h2l-1-2v-7c0-6%200-7-1-6l-1-2c2-7%202-10%201-8-1%201-1%201-1-2v-2l-1%205v10l-1-4v-6l-1-3-1%204v5l-1-4c0-2-1-3-1-1l-1%204c0%202%200%202%201%201l1%201-1%204-3-11v-6l-2%205-1%206%201-5c0-3%200-5-1-4l-1-1c0-1%201-2%202-1l1-3c0-2%200-2-1-1-1%203-2-4-1-8l-1-6-2-6c0-4-1-6-2-3v1l1%205v4c1-2%201-2%201%202%200%203%200%203-1%202-1-2-1-2-1%200l-1-7c-1-10-3-16-4-11-1%202-1%202-1%200%200-4-2-4-3%200%200%205-1%206-1%203l-1-6v11l-1-7-2-7-1%202m127%2039l-9%204a315%20315%200%2000-35%2013%20338%20338%200%2000-20%208c-4%201-7%204-6%205a155%20155%200%200041%204l5-1%203-1%203-2c1-1%201-1%201%201v2l2-2c3-2%204-5%202-3l-1-1c0-1-1-1-1%201-3%203-2%200%200-5%203-5%203-13%200-12l-1-2c0-1%201-2%203-2l3-1%203%201%202-1%204-2c3%200%207-4%206-5-2-1-2-1-5%201m-71%2038l-2%2016-2%2011%204%206%204%205c1-1%203%201%202%202%200%202%203%205%204%204-1%201%202%205%203%205l1-1%204-5%202-2h-2c-2%200-2%200-1-1v-3c-2%200-2-1-1-2%202-2%202-15%200-14-1%202-2%200-1-5%200-5%200-5-3-9l-3-6-2-1-2-2-1-1h-2c-2-2-2-1-2%203m-47%2013l-1%203h-2l-1%203h1l1%204v4h1l2-1%201-3-1%202%201%203h2l1%201%201%201v1h2v-2c-2-1-2-2-1-3l1%201%202%203-1-5c-1-4-2-4-2-2-1%203-3%201-2-3%200-2%200-2-1%200-1%201-1%201-1-1s0-2-1%200c-1%201-1%200-1-4%201-6%200-6-1-2m-83%2073c0%203%200%203-2%202-2-2-6%200-6%205s1%206%206%206h4v-8l-1-8-1%203m107%2024c0%203%200%203-2%202-2-2-6%200-6%205s1%206%206%206h4v-8l-1-8-1%203m83%2055l1%201-1%201c-1%201-3%202-3%204v1c1-1%202%200%204%202l7%204%205%203%203-3%204-3-2-2-4-2h-3l-1-1c1-1%200-2-4-4-5-2-6-2-6-1'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAEZklEQVQ4y3VUWUxbRxQ1CEMklpIKsQgoIpRNYCBgA2JpBY1U+gnGbgJIlFLshlaQEEJapDZhNVVoRZevEjAxJYlqSqBSMMsXH4TVAQlCKKExlMWAzWb2FHM6M9ggVOVao3nPd+55Z+45M5yjoyMcAWDzyTh+N8e/h4fY2dmFXq/Hik4HI8lNvphEX28fe378uA0rKzo0yO+DYzQDmn40jCawQwK0trYGnV6H5eVlbGxsYGZmBtpFLZaWlqDRzKC3txf9ff1QtaswODB0DAgzQ5wy2z84wCuNhgEevH6NQ6MRO7u7rHh2dhZarRaLi4uYnPwLQ0PDUDQoWN1ZQNMzZUK/bDBsnbA1GAzQvNKQ4iFMTExgb28P+/v7GB8fR3lZOebm5jA1NXUW0EhY0OhQdUAqkWBzcxNjY2PY2t5mucGBQfT395Piedy5fQfZ2dnIvZoLYYoQKlLT97TPDHjKjoJUVlaiu7ubva+vrzNR6BYHBgYw8XwC9fVyJCQk4qtbX0Ms/hjx8e+hoeE+5ucXTKJQdibArq4uFBbehFwuJ1t7QXp3RMQxQq1+RnLdmJ7+Gx0dnYiLi0dmZiZSU1OR85mEKN0KmazqGNAMRpWUVVahrk6OtrY/UVZSiueE0caGgeRW8ODBQ9STnEqlQnp6BgNL+jAJkhwpamvvQSr93ARo6p1arUbel3mMvkrViW+/uY0bNwrxu7IZpSVluJZ/nW0xKioavn5+CAwMRHJyMtLT0lFRUYmRkdGzgFSAvLxrqP31Hjo7u1BdXY20K2m4W3UXLc0taPqtCfkkHx0dDe8LF+Dt7c0ApRIpnhJBtra2TntIY5f4jG75h+9r0NbaxgAKrhfgyZN2YuhZNCv/QG7uFxBERkIoFCI0NBReXl4IDw9HQUEBenp6TgEPT1iOo6rqOwZYV1ePRkUjlMoWFBFFsz7JQlbWp0hMTERERAQCAgLg7+9PWOdjdXXt2NgUyGga9KjRGB0dZQ0WicV49PAR2onHamp+ZL6LiYlBUFAQIgnLd319IRBEkjPcwOq2iV85eEPIZDJWVFxcjJvERjk5EsKKj3PnbODm5oZLlz5g/yuVSuK/eXYM1cPD4IiI9GKxiA1RqhAiUSquXL6Mj5KSwOMF4x1PD/CCg+Hu7g4bG2twrazA5VqxXAoRJCMjnfQzBYkJCYiOigKHBOuDj48Pa7CrqytTz8ODAPF4rPF09iXbo33jcrm06M2DLoiNjSXOj2MFwYSNH/FYWFgYLl4MY9sOCQkBn89nMwWm/qMfsba2PgGysLBgg2Nv7wAXFxfGiG7L1dUNTk5OcHZ2hqOjI2P8FpnPn38bnp6ebA3N0Wd7BwfY2dnB1tYWlpaWsCLt4Kzo9OSyXCZN1UK/ukoaq0ZFeQWKim6hsbGJqH0VJaXl7AguLCzi5ctptBJL0cuVvs/+M8cOg4AfCb5A8H+Vh4lSCoWCKUZv4Z9/+oXdOGY7DQ0Onlk/8mwE75PbJp5cFtRG/wGBYGS4hAlHKQAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/502b1/tsCover.png","srcSet":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/f2e6d/tsCover.png 114w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/4ddba/tsCover.png 229w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/502b1/tsCover.png 457w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/7ddc2/tsCover.png 686w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/435bf/tsCover.png 914w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/6050d/tsCover.png 1200w","srcWebp":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/15384/tsCover.webp","srcSetWebp":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/31fce/tsCover.webp 114w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/e3e25/tsCover.webp 229w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/15384/tsCover.webp 457w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/0258d/tsCover.webp 686w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/64ea2/tsCover.webp 914w,\n/static/7cf73ed072b7ab211d6b4d4ebeabd422/9000d/tsCover.webp 1200w","sizes":"(max-width: 457px) 100vw, 457px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M311%206l-2%206-1%202-1%201v1l-1%201v3c0%203%200%203-2%202l-9-3%201-1c0-3%202-7%203-6s1%201%201-1V9l-1-2-3%206c-2%205-4%207-4%206%200-2%200-2-1-1h-12c-7-2-11-2-11-1a172%20172%200%200134%207c9%202%2010%203%2016%209%206%205%207%206%206%207-1%202-2%202-3%200-3-2-2%200%200%203l2%201c0-2%200-2%202-1%202%203%201%203-8%202-8-2-19-3-18-1l7%201c18%201%2028%205%2026%2010l1%201%202%201-1%201h-1v1c3%200%204%201%206%207l2%205h-5c-6-1-7%201-5%209%201%208%201%209-2%207l-6-2-4-1c-3-3-20-4-18-2v1c-1-1-2%200-3%201h-2v-1c1-1%200-1-2-1l-3%201-1%201h-1l1%202c2%201-1%206-3%206l-2-1-1-1-3-3-3-2v3l1%202c1%201%201%201-1%203l-5%203c-1%200-7%206-7%208l2%201%201-3h2l2-1h1v1c-2%202-1%205%201%203h1l1%202c1-1%201%200%200%200%200%202%200%202%201%201l2%201c1%201%200%201-1%201v6l-1%2010-1%206-1%202c1%201%201%201%202-1l2%205%204%2011%202%204-4%203c-4%204-8%205-6%203l-1-1c-1%201-3%200-4-1l-2-2-4-1-5-1-1-1c1-1-2-2-5-2l-4-3-5-2-10-3c-6-3-8-4-8-6-1-9%2013-41%2017-41l1%201%201%201%201-1h2c2%202%203%202%203%201l1-2%201%201c-1%201%200%201%201%201s2%200%201-1c-1%200-1-1%201-2l2-2h-12c-2%201-7%200-7-1h-2c-2%202-2%202%200%202l-2%204c-6%207-12%2024-13%2034v8l3%202%203%202h1c3-1%203%202%200%207-2%204-3%205-6%206-4%201-4%201-2%202h-2c-3%200-3%200-2%201s1%201-1%201h-2l-9%204c-12%204-13%205-12%203l-1-1-3%201%202%201c1%201%201%201-1%201-2-1-3%200-3%201l-3%201-8%202-6%201-1-2c-1-2%202-4%208-6%204%200%206-2%203-2l-1-2c0-2-4-3-5-1l-3%201c-2%200-3%201-1%203v2c-2%201-2%200-3-2-3-9-5-12-11-18l-5-8v-1h-2v-3h-2l-4-2-3-5v-3l-2-2-1%202c-2%202-2%202-3%200-1-3-13-8-19-9-5-1-5-1-2-1%209-3%2021-8%2023-11%204-4%204-6%201-3-2%201-3%202-4%201h-1l1%201c2%201-1%203-6%205l-5%201v-3l3-1h1l-2-1h-3l2-1v-2c-2-2-2-2%201-2l7-3%204-1c-1%202%200%202%201%202%202%200%202-1%202-3v-4c3-4%201-14-2-13h-3l-7%201c-7%203-7%202%200-5a192%20192%200%2001106-54l-8%201a190%20190%200%2000-113%2067h-1l-2-1c-2%200%204%207%208%2010%203%202%202%203-1%202-2%200-3-1-3-2l-2%202c-7%2011-10%2018-7%2024%201%203%201%203-2%202h-4c-2%201-2%201-2-1s0-3-1-2v2l-3%2010c-2%201%201%203%203%202l-3%204c-5%205-7%208-7%2010l-1%202c-1%201-5%2013-6%2020%200%207-1%208-3%204-1-4-1-9%201-16v-7l-3%205c-2%202-2%201%200%2022%203%2020%2013%2046%2016%2042h1c-1%201%200%204%201%205%202%204%207%209%207%207h2l1%202h-3c0%201%207%208%2013%2011l6%206%2014%2024c2%203%202%203%200%206l-1%204H0v75h93v9l-3%2011-1%202%202-1%201%203%201%205v-6c0-3%200-5%202-6%203-2%203-1%202%205%200%204-1%205-2%206l-2%202c0%202%200%202-1%201-1-2-1-2-1%201l-1%205c0%202%201%202%2010%202l11-1h2l1-1-2-1h-1l-4-1c-4%201-5%200-6-1h-4l-1-2-1%202-1%202c-1%200-1-2%201-6h15l-2-1-6-1-4-1h8l-4-1-2-1%202-1h8l5%202%202%201%204%202c0%202%205%200%208-3l4-3%201-3c-1-1%200-1%202-1s2%200%201-1-1-1%201-1l5-2%206-4c3-2%204-3%203-4h3c1-1%200-2-2-4l-3-3h8c6%200%207%200%205%201s-2%201-1%202l3-1h1l1%201c1-1%201%200%201%201l-1%204v-2c0-2%200-2-4%202l-5%205-4%205c-3%202-4%204-3%205l-1%201-1%202c-1%202-1%202-2%201s-1-1-1%201l-1%202-2%201-3%201-3%206%205%201%204-1v-1c2%201%2010-4%209-5l1-1h4c2-1%203-1%203%201h1c1-1%201-1%201%201-1%202-1%203%201%203l1-1h1c1%202%201%202%202-1%201-2%201-2%201%200%200%203%201%202%202-1l2-6c1-3%201-3%201-1l-1%205c-1%201-1%202%201%202%201%200%202-1%201-2h1c1%201%201%201%201-1l2-3%201-3%201-4c1-2%201-2%201%200s0%202%201%201l1-2v-2l1-1h1l4-1%204-2h1l3-1c3-2%204-3%204-6-1-3-1-3%201-1%201%201%201%201%200%200%200-2%200-2%201-1h1v-2h1c1-1%201%200%201%202v3l1-4c1-3%201-3%203-2h1l27-1c20%200%2026%200%2025%201h1l4-1v2c-3%201-6%204-5%205l-1%201v1h-1c-1-1-1-1-3%202s-2%204-1%205c3%201%209-1%207-2v-1h2l4-5c5-5%205-6%201-7a572%20572%200%200173-1c2%201-5%2017-7%2018v1l-2%203v-1l2-7c3-6%202-6-2%200-3%204-3%206-3%208v5c-2%201-2%205-1%205l1%201h-1l-2%201%201%201c1-1%201%200%201%201%200%202%200%202-1%201h-1c0%202%202%202%2021%202%2025%200%2022%201%2023-8%201-3%201-2%201%202v6h23V285c-1%201-3%200-5-1-3-2-2-2%203%200%201%200%202%200%202-3%200-2-1-3-2-3-4%200-9-2-8-3l-3-4c-2-2-2-2-1-3l1-2-2%201c-2%202-2%203-1%203%202%202%202%204%201%204l-4-3c-1-2-1-1-1%203l2%205h3v-1l1%202%204%203%206%203h-17c-15%200-17%200-17-2l1-1%202-3c0-1%200-2%201-1h1l1-4-3%203-4%205c0%203%201%203-40%203h-40l18-6a379%20379%200%200140-14c0-1%201-2%203-2%203-1%205-4%207-14%204-25%204-25%2017-32%2014-7%2020-12%2021-15%202-5%201-5-5-5-7%201-6%200%202-1%205-1%205-1%202-1-6%200-16%203-11%203%202%200%202%200-3%202l-8%201c-2-1-8%201-8%202l-1%201-2-1%202-2%201-3%204-7%202-4c3-6%207-9%2014-13l11-6%208-6%205-3v-50l-3%209-3%208-1%202v4l-1%201v1c1%202-2%2010-3%209v2c0%201%200%202-1%201s-3%206-3%2010c1%202%200%202-1%202l-1%203c0%202-1%203-2%202l-1%201c0%203%200%205-1%204l-1%201-1%203v-2l1-3%201-4c0-2%200-3-1-2v-3c1-1%201-1%201%201l1-3v-7c-1-2-1-2-1%201%200%202%200%203-1%202l-2-2c-1%201-1%200-1-5l1-8v-6l-1-6-1-8a118%20118%200%2000-9-35l-1-1h-1l-2-4-4-3a148%20148%200%200114-22l5-8c15-23%2024-38%2024-42%200-3-2-4-4-2h-7l-1%201-1%201c-1-1-1%200-1%202l-1%201-1%202c0%201%200%202-1%201l-2%201%201%201c2-1%201%201%200%202h-2v1c0%201%200%202-1%201l-2%201%201%201h1l-1%202-1-1h-1l-1%201%201%201h1l-1%202-1-1h-1l-1%201%201%201c2-2%201%201-1%203l-2%201-2%201%201%201c2-2%201%201-3%206l-4%204-2%201%201%201c3-2%201%201-14%2023l-11%2016%203-6c2-2%203-5%202-5l-2-4c-2-7-8-17-9-17l-3-5c-1-3-3-6-7-9-6-6-6-6-2-5l3%202%201%201h1l1%201a101%20101%200%200133%2013v-2l-7-3-6-4%207-13c11-23%2011-24%203-24-3%200-4%201-5%203l-2%201c0-2%200-2-1-1v3l1-1-13%2028-11-4-14-4c-4-1-4%200%201-12%204-12%205-13%203-13l-3%206m-60%2034v2l-2%201c-2%200-6%204-6%206%200%203%201%205%202%205l1-1c-1-2%200-1%202%201s5-1%204-5c0-2%202-4%204-2v1l-2-1%201%204%202%204%202-2%202-2c1%201%201%200%201-1%200-3-1-4-5-6-3-1-5-3-5-4h-1m31%2013c1%204%201%205-2%205l-11%205-8%204-4-3c-2-3-5-4-5-2l3%202%202%203-4%204-6%208c0%202-2%203-2%203-3%201-2%203%201%203%203-1%204-2%206-5l7-8c1%200%205%203%209%208l8%206-1-2v-1l-1-3h-2l-7-5-4-6%202%202%203%201-1-2c-3-3%202-6%2015-10l6-2-2-3-3-4%201%202m100%2029l-2%203h-2c0%203%209%206%2014%205l4-2c1-5-10-10-14-6m-211%209c-4%203-4%205-1%208%202%202%205%203%207%200%202-2%203-4%201-4v-4c-1-2-5-2-7%200m98%2017v3l1%201v1h1c1-1%201-1%201%201l-1%203-1%201-2%201c-3%202-3%200%200-2v-2h-1v-1l-1%202-1%201s-2%200-3%202h-1c1-2-1-3-1%200l-2%201c-1-1%201-4%203-4l2-1%201-3-1-1v-1h-2c0-1-2%200-4%203l-3%205v2l-1%201-1%201-2%206-2%205%202-2c2-4%203-4%204%200%200%202%201%203%202%201h3c1%200%202%200%203-2l1-1h1v2c-1%201-1%202%201%202h1v-2l1-3v-2h2c1-1%202-2%201-3%200-2%202-5%204-5%201%200%200-4-2-6v-3c2-3-1-4-3-1m-145%2022c-3%202-3%202%202%204l4%203-6-2-6-2-1-2c0-2-11-1-17%202-4%202-4%202-1%201%209-2%2015-1%2015%202l1%203v-3c0-2%202-3%202-1l7%204c9%205%2020%2015%2019%2019v22l1-12c0-14%202-14%207-1l4%209c-1-11-11-28-19-34-6-4-7-7-2-3%203%202%206%203%205%201l1-2c2%200-2-4-7-6l-6-3-3%201m-6%2011v2l-1%206v2l1-2v2l-1%203v4c0%202-1%201-1-2l-2-6-1%208-1%2012%201-2v2c0%202%200%202%201%201v6l-1%205%201-2v3c0%203%200%203%201%201v2c0%203%200%204%201%203v1l1%206c1%201%201%201%201-2l-1-4%202%205c3%204%203%204%202%201l1-7c0-2%201-3%201-1h1c1-1%201-1%201%201v3l2%202%201%202%201%202c0%202-2%203-2%201v3c0%203%200%203-1%201l-1-6v-1l-1%203v-3c0-5-2-5-2%200l1%205%201-1a158%20158%200%200013%2039l2%205c1%203%201%203%203%201%202-1%202-2%201-4v-3c1%201%201%201%201-1h2v-11c1-3%201-3%201%205l2%204c2%202%202%202%202%200l-1-2-1-3%202%201c1%202%201%202%202%201v5l-1%202%201-2c3-3%205-13%205-16v-4c2-1%202-2%201-3v-7c0-4%200-5-1-4l-1%208c0%205%200%206-2%204v2c1%202%200%204-1%207l-1%203-1-4%201-2v-3l1-6v-3c-1-1-1-1-1%201h-1l-1-2-1-2c0-2%200-2%201%200h2l-1-2v-7c0-6%200-7-1-6l-1-2c2-7%202-10%201-8-1%201-1%201-1-2v-2l-1%205v10l-1-4v-6l-1-3-1%204v5l-1-4c0-2-1-3-1-1l-1%204c0%202%200%202%201%201l1%201-1%204-3-11v-6l-2%205-1%206%201-5c0-3%200-5-1-4l-1-1c0-1%201-2%202-1l1-3c0-2%200-2-1-1-1%203-2-4-1-8l-1-6-2-6c0-4-1-6-2-3v1l1%205v4c1-2%201-2%201%202%200%203%200%203-1%202-1-2-1-2-1%200l-1-7c-1-10-3-16-4-11-1%202-1%202-1%200%200-4-2-4-3%200%200%205-1%206-1%203l-1-6v11l-1-7-2-7-1%202m127%2039l-9%204a315%20315%200%2000-35%2013%20338%20338%200%2000-20%208c-4%201-7%204-6%205a155%20155%200%200041%204l5-1%203-1%203-2c1-1%201-1%201%201v2l2-2c3-2%204-5%202-3l-1-1c0-1-1-1-1%201-3%203-2%200%200-5%203-5%203-13%200-12l-1-2c0-1%201-2%203-2l3-1%203%201%202-1%204-2c3%200%207-4%206-5-2-1-2-1-5%201m-71%2038l-2%2016-2%2011%204%206%204%205c1-1%203%201%202%202%200%202%203%205%204%204-1%201%202%205%203%205l1-1%204-5%202-2h-2c-2%200-2%200-1-1v-3c-2%200-2-1-1-2%202-2%202-15%200-14-1%202-2%200-1-5%200-5%200-5-3-9l-3-6-2-1-2-2-1-1h-2c-2-2-2-1-2%203m-47%2013l-1%203h-2l-1%203h1l1%204v4h1l2-1%201-3-1%202%201%203h2l1%201%201%201v1h2v-2c-2-1-2-2-1-3l1%201%202%203-1-5c-1-4-2-4-2-2-1%203-3%201-2-3%200-2%200-2-1%200-1%201-1%201-1-1s0-2-1%200c-1%201-1%200-1-4%201-6%200-6-1-2m-83%2073c0%203%200%203-2%202-2-2-6%200-6%205s1%206%206%206h4v-8l-1-8-1%203m107%2024c0%203%200%203-2%202-2-2-6%200-6%205s1%206%206%206h4v-8l-1-8-1%203m83%2055l1%201-1%201c-1%201-3%202-3%204v1c1-1%202%200%204%202l7%204%205%203%203-3%204-3-2-2-4-2h-3l-1-1c1-1%200-2-4-4-5-2-6-2-6-1'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"seo":{"src":"/static/7cf73ed072b7ab211d6b4d4ebeabd422/6050d/tsCover.png"}}}]}},"staticQueryHashes":["1609575157","2068910035","2361467917","2361467917","3838421970","500183989","5650841"]}