https://devcodex-labs.github.io/vextjs/static/js/async/route-1bb30dd32a7b.4f18aac7f4.js

1"use strict";(self.rspackChunkvext_website=self.rspackChunkvext_website||[]).push([[5537],{1537(e,n,s){s.r(n);var r=s(4848),i=s(8453);function a(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"frontend-overview",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#frontend-overview",children:"#"}),"Frontend Overview"]}),"\n",(0,r.jsxs)(n.h2,{id:"table-of-contents",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#table-of-contents",children:"#"}),"Table of Contents"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"#current-capabilities",children:"Current Capabilities"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"#what-vext-frontend-is",children:"What Vext Frontend Is"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"#create-a-full-stack-project",children:"Create a Full-stack Project"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"#project-structure",children:"Project Structure"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"#first-page",children:"First Page"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"#reading-paths",children:"Reading Paths"})}),"\n"]}),"\n",(0,r.jsxs)(n.h2,{id:"current-capabilities",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#current-capabilities",children:"#"}),"Current Capabilities"]}),"\n",(0,r.jsx)(n.p,{children:"This Frontend guide documents the current built-in Vext frontend capability: route-driven React 19 pages, SSR, hydration, nested layouts, frontend i18n, Fast Refresh, render refresh, code splitting, static assets, CDN upload, performance budgets, and hydration validation."}),"\n",(0,r.jsxs)(n.h2,{id:"what-vext-frontend-is",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#what-vext-frontend-is",children:"#"}),"What Vext Frontend Is"]}),"\n",(0,r.jsxs)(n.p,{children:["Vext Frontend is the built-in full-stack React 19 experience for Vext projects. The URL still belongs to ",(0,r.jsx)(n.code,{children:"src/routes/**"}),"; the route handler prepares server data and calls ",(0,r.jsx)(n.code,{children:"res.render()"})," to render a page from ",(0,r.jsx)(n.code,{children:"src/frontend/pages/**"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"Use it when you want one Vext application to own API routes, services, SSR, hydration, frontend assets, and production static serving without adding a second application framework."}),"\n",(0,r.jsxs)(n.p,{children:["Use ",(0,r.jsx)(n.code,{children:"--template api --frontend none"})," when the project is API-only."]}),"\n",(0,r.jsxs)(n.h2,{id:"create-a-full-stack-project",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#create-a-full-stack-project",children:"#"}),"Create a Full-stack Project"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"bash",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"npx"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" vextjs"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" create"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" my-app"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"cd"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" my-app"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"npm"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" run"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" dev"})]})]})})}),"\n",(0,r.jsx)(n.p,{children:"The default scaffold is a full-stack React project. The frontend can still be disabled in config or created as API-only:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"bash",children:(0,r.jsx)(n.code,{children:(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"npx"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" vextjs"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" create"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" my-api"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" --template"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" api"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" --frontend"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string)"},children:" none"})]})})})}),"\n",(0,r.jsxs)(n.h2,{id:"project-structure",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#project-structure",children:"#"}),"Project Structure"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"text",children:(0,r.jsxs)(n.code,{children:[(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"src/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"  routes/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"    index.ts"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"    admin/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      dashboard.ts"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"  services/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"    user.service.ts"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"  frontend/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"    pages/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      index.tsx"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      layout.tsx"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      error/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"        default.tsx"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"    components/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      UserCard.tsx"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"    styles/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      card.style.ts"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      dashboard.module.css"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"    assets/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      logo.png"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"    locales/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      en-US.ts"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"      zh-CN.ts"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"public/"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{children:"  favicon.svg"})})]})})}),"\n",(0,r.jsx)(n.p,{children:"The important boundary is physical:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"src/routes/**"})," and ",(0,r.jsx)(n.code,{children:"src/services/**"})," run on the server."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"src/frontend/pages/**"})," and ",(0,r.jsx)(n.code,{children:"src/frontend/components/**"})," are bundled for the browser."]}

1),"\n",(0,r.jsx)(n.li,{children:"Do not import services, database clients, secrets, or Node-only modules from frontend files."}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"public/**"})," is copied to the frontend output and can be published through the deploy manifest."]}),"\n"]}),"\n",(0,r.jsxs)(n.h2,{id:"first-page",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#first-page",children:"#"}),"First Page"]}),"\n",(0,r.jsx)(n.p,{children:"Create a page:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// src/frontend/pages/index.tsx"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HomePage"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(props"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { greeting"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }) {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"main"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".greeting}</"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"main"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsx)(n.p,{children:"Render it from a route:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(n.code,{children:[(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// src/routes/index.ts"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" (app) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"  app"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".get"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"/"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {}"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" (req"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" res) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"    const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" greeting"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" app"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"services"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"example"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".greeting"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Vext"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"    res"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"index"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { greeting });"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  });"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"res.render(page, props?, options?)"})," has three arguments:"]}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Argument"}),(0,r.jsx)(n.th,{children:"Meaning"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"page"})}),(0,r.jsxs)(n.td,{children:["Page id under ",(0,r.jsx)(n.code,{children:"src/frontend/pages/**"}),", without extension. ",(0,r.jsx)(n.code,{children:"admin/dashboard.tsx"}

1)," becomes ",(0,r.jsx)(n.code,{children:'"admin/dashboard"'}),"."]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"props"})}),(0,r.jsx)(n.td,{children:"JSON-safe server data serialized into the SSR document and reused during hydration."})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"options"})}),(0,r.jsxs)(n.td,{children:["Rendering options such as ",(0,r.jsx)(n.code,{children:"status"}),", ",(0,r.jsx)(n.code,{children:"head"}),", ",(0,r.jsx)(n.code,{children:"layoutData"}),", ",(0,r.jsx)(n.code,{children:"messages"}),", ",(0,r.jsx)(n.code,{children:"nonce"}),", or page-specific behavior."]})]})]})]}),"\n",(0,r.jsxs)(n.h2,{id:"reading-paths",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#reading-paths",children:"#"}),"Reading Paths"]}),"\n",(0,r.jsx)(n.p,{children:"Use the left navigation as the main map. It is intentionally split into concept, task, and reference layers."}),"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Need"}),(0,r.jsx)(n.th,{children:"Start here"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"First successful page"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/getting-started.html",children:"Getting Started"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Understand URL and page ownership"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/routing-and-pages.html",children:"Routing and Pages"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Choose SSR, hydration, or CSR"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/rendering-modes.html",children:"Rendering Modes"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Pass service data to pages"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/data-flow.html",children:"Data Flow"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Build nested shells"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/layouts-and-components.html",children:"Layouts and Components"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Debug SSR output"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/ssr.html",children:"SSR"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Style a component with variants or CSS variables"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/jscss.html",children:"Vext JSCSS"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Debug browser attach/mismatch"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/hydration.html",children:"Hydration"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Build a client-router sub-app"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/csr-and-spa-fallback.html",children:"CSR and SPA Fallback"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Cache render data"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/render-data-and-cache.html",children:"Render Data and Cache"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Tune development feedback"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.a,{href:"/frontend/fast-refresh.html",children:"Fast Refresh"})," and ",(0,r.jsx)(n.a,{href:"/frontend/render-refresh.html",children:"Render Refresh"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Ship frontend assets"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.a,{href:"/frontend/build-and-deploy.html",children:"Build and Deploy"})," and ",(0,r.jsx)(n.a,{href:"/frontend/static-assets-and-cdn.html",children:"Static Assets and CDN"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Keep JS small"}),(0,r.jsxs)(n.td,{children:[(0,r.jsx)(n.a,{href:"/frontend/code-splitting.html",children:"Code Splitting"})," and ",(0,r.jsx)(n.a,{href:"/frontend/performance-budgets.html",children:"Performance Budgets"})]})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Validate production hydration"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/hydration-validation.html",children:"Hydration Validation"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Find config fields"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/configuration.html",children:"Configuration"})})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:"Check current boundaries"}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.a,{href:"/frontend/boundaries-and-roadmap.html",children:"Boundaries and Roadmap"})})]})]})]}),"\n",(0,r.jsxs)(n.p,{children:["The old ",(0,r.jsx)(n.a,{href:"/guide/frontend.html",children:"Frontend integration page"})," is kept only as a compatibility entry for existing links."]})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["en%2Ffrontend%2Foverview.md"]={toc:[{id:"table-of-contents",text:"Table of Contents",depth:2},{id:"current-capabilities",text:"Current Capabilities",depth:2},{id:"what-vext-frontend-is",text:"What Vext Frontend Is",depth:2},{id:"create-a-full-stack-project",text:"Create a Full-stack Project",depth:2},{id:"project-structure",text:"Project Structure",depth:2},{id:"first-page",text:"First Page",depth:2},{id:"reading-paths",text:"Reading Paths",depth:2}],title:"Frontend Overview",headingTitle:"Frontend Overview",frontmatter:{}},s.d(n,{default:()=>l})}}]);