[{"data":1,"prerenderedAt":322},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-rendering-modes":221,"-nuxt-rendering-modes-surround":317},[4,27,77,123,157,207],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Get started","majesticons:rocket-3-start-line","\u002Fget-started","1.get-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"How it works","\u002Fget-started\u002Fhow-it-works","1.get-started\u002F10.how-it-works",{"title":15,"path":16,"stem":17},"Play online","\u002Fget-started\u002Fplay-online","1.get-started\u002F20.play-online",{"title":19,"path":20,"stem":21},"Create a new project","\u002Fget-started\u002Fcreate-new-project","1.get-started\u002F30.create-new-project",{"title":23,"path":24,"stem":25},"First steps","\u002Fget-started\u002Ffirst-steps","1.get-started\u002F40.first-steps",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Guide","mdi:book-open-page-variant-outline","\u002Fguide","2.guide",[33,37,41,45,49,53,57,61,65,69,73],{"title":34,"path":35,"stem":36},"Customized API Output","\u002Fguide\u002Fcustomized-api-output","2.guide\u002F05.customized-api-output",{"title":38,"path":39,"stem":40},"Pages & Routing","\u002Fguide\u002Fpages-routing","2.guide\u002F10.pages-routing",{"title":42,"path":43,"stem":44},"Site layout & Menus","\u002Fguide\u002Fsite-layout-menus","2.guide\u002F20.site-layout-menus",{"title":46,"path":47,"stem":48},"Authentication","\u002Fguide\u002Fauthentication","2.guide\u002F40.authentication",{"title":50,"path":51,"stem":52},"Metatags & Local tasks","\u002Fguide\u002Fmetatags-local-tasks","2.guide\u002F50.metatags-local-tasks",{"title":54,"path":55,"stem":56},"Breadcrumbs & Messages","\u002Fguide\u002Fbreadcrumbs-messages","2.guide\u002F60.breadcrumbs-messages",{"title":58,"path":59,"stem":60},"Redirects","\u002Fguide\u002Fredirects","2.guide\u002F65.redirects",{"title":62,"path":63,"stem":64},"Editorial previews","\u002Fguide\u002Feditorial-previews","2.guide\u002F70.editorial-previews",{"title":66,"path":67,"stem":68},"Layout builder","\u002Fguide\u002Flayout-builder","2.guide\u002F80.layout-builder",{"title":70,"path":71,"stem":72},"Drupal Canvas","\u002Fguide\u002Fcanvas","2.guide\u002F90.canvas",{"title":74,"path":75,"stem":76},"Drupal CMS","\u002Fguide\u002Fdrupal-cms","2.guide\u002F95.drupal-cms",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Advanced topics","bi:diagram-3","\u002Fadvanced-topics","3.advanced-topics",[83,87,91,95,99,103,107,111,115,119],{"title":84,"path":85,"stem":86},"Multi-frontend","\u002Fadvanced-topics\u002Fmulti-frontend","3.advanced-topics\u002F05.multi-frontend",{"title":88,"path":89,"stem":90},"Listings, Views","\u002Fadvanced-topics\u002Flistings-views","3.advanced-topics\u002F10.listings-views",{"title":92,"path":93,"stem":94},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":96,"path":97,"stem":98},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":100,"path":101,"stem":102},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":104,"path":105,"stem":106},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":108,"path":109,"stem":110},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":112,"path":113,"stem":114},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":116,"path":117,"stem":118},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":120,"path":121,"stem":122},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":124,"icon":125,"path":126,"stem":127,"children":128,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[129,133,137,141,145,149,153],{"title":130,"path":131,"stem":132},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":134,"path":135,"stem":136},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":138,"path":139,"stem":140},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":142,"path":143,"stem":144},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":146,"path":147,"stem":148},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":150,"path":151,"stem":152},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":154,"path":155,"stem":156},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":158,"icon":159,"path":160,"stem":161,"children":162,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[163,167,171,175,179,183,187,191,195,199,203],{"title":164,"path":165,"stem":166},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":168,"path":169,"stem":170},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":172,"path":173,"stem":174},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":176,"path":177,"stem":178},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":180,"path":181,"stem":182},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":184,"path":185,"stem":186},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":188,"path":189,"stem":190},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":192,"path":193,"stem":194},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":196,"path":197,"stem":198},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":200,"path":201,"stem":202},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":204,"path":205,"stem":206},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":208,"icon":209,"path":210,"stem":211,"children":212,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[213,217],{"title":214,"path":215,"stem":216},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":218,"path":219,"stem":220},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":222,"title":196,"body":223,"description":229,"extension":311,"links":312,"meta":313,"navigation":314,"path":197,"seo":315,"stem":198,"__hash__":316},"docs\u002F5.nuxt\u002F60.rendering-modes.md",{"type":224,"value":225,"toc":304},"minimark",[226,230,243,246,251,260,264,267,281,285,288,291],[227,228,229],"p",{},"With Nuxt you can decide what rendering strategy you want to use, if you like even at the route level.",[227,231,232],{},[233,234,235,236,242],"strong",{},"Please refer\nto the Nuxt documentation about ",[237,238,196],"a",{"href":239,"rel":240},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering",[241],"nofollow"," to learn more.",[227,244,245],{},"The following provides some additional overview about implication of each rendering mode when using it with Lupus Decoupled Drupal:",[247,248,250],"h2",{"id":249},"server-side-rendering-ssr-default","Server-side Rendering (SSR) - default",[227,252,253,254,259],{},"Server-side rendering is used as a default, which is best for SEO, and works the most seamlessly for editors thanks to the\nsupport of Drupal authentication. Nuxt supports server-rendering via regular (Node.js) servers or in a serverless way, e.g. at the ",[237,255,258],{"href":256,"rel":257},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering#edge-side-rendering",[241],"edge",".",[247,261,263],{"id":262},"static-site-generation-ssg","Static-site Generation (SSG)",[227,265,266],{},"Static-site generation results in a set of pre-generated files which a regular HTTP server or a CDN can serve, what can help to\nmake hosting much more simple.",[227,268,269,270,275,276,259],{},"Additionally, by publishing only static files, site security can be improved. However, there is also a drawback:\nEditors need to be aware of the pre-rendering step, the frontend is static and no drupal-forms are supported (atm). Nuxt supports a ",[237,271,274],{"href":272,"rel":273},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-preview-mode#usepreviewmode",[241],"preview-mode"," which can be implemented and provided to editors though. Read more about it in the Nuxt ",[237,277,280],{"href":278,"rel":279},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fprerendering",[241],"Prerendering Guide",[247,282,284],{"id":283},"client-side-rendering-csr","Client-side Rendering (CSR)",[227,286,287],{},"When SEO is not important and a small client-side rendering delay is acceptable to users, client-side rendering can\nbe a simple alternative to server-side rendering, that does not require any special infrastructure.",[227,289,290],{},"Just like with SSG, simply hosting static files is enough. At the moment, no drupal-forms are supported, but Drupal authentication works with the help of the Lupus Decoupled CORS sub-module.",[227,292,293,294,297,298,303],{},"For a zero-infrastructure alternative, see ",[237,295,296],{"href":155},"Providing Themes",": ",[237,299,302],{"href":300,"rel":301},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Flupus_csr",[241],"Lupus CSR"," allows bundling the frontend directly as a Drupal theme, with no separate frontend needed. The frontend is served from Drupal and fetches content from the CE API on the same origin.",{"title":305,"searchDepth":306,"depth":306,"links":307},"",2,[308,309,310],{"id":249,"depth":306,"text":250},{"id":262,"depth":306,"text":263},{"id":283,"depth":306,"text":284},"md",null,{},true,{"title":196,"description":229},"QXHtnfy4vxTLlaxfMb_Fo_2RM1NfBRQNtuqfComNnmY",[318,320],{"title":192,"path":193,"stem":194,"description":319,"children":-1},"Component previews allow Vue components to be rendered in isolation in external contexts, such as the Drupal Canvas editor. This enables editors to see live previews of components directly in the page builder.",{"title":200,"path":201,"stem":202,"description":321,"children":-1},"The deployment of Nuxt largely depends on the frontend rendering mode chosen. Please refer to the\nNuxt deployment guide for additional details.",1776084720879]