The TYPO3 PWA Initiative has build the EXT:headless. There is also a Nuxt Typo3 available which, as the name suggests, uses Nuxt. But the whole SSR stuff really gets on my nerves, maybe cause I'm too stupid for it ;-) And TBH, I only have limited knowledge of Vue. But TYPO3 is definitely my thing!
My approach works without conventional SSR, but can still be indexed to 100% by bots/crawlers. No joke, it's actually super easy. I use TYPO3 as my server-side-renderer. WHAT? Yes!
For that I put In an standard sitepackage, the TYPO3 generated HTML simply into the div#app and added a small viewhelper for the JS and CSS files in the /dist of my Vue app.
Layouts/Default.hmtl {namespace vue=Exotec\VueSitepackage\ViewHelpers} <div id="app"> <f:spaceless> <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '1'}" /> <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" /> <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '2'}" /> </f:spaceless> </div> <vue:assets path="/typo3conf/ext/vue_sitepackage/Resources/Public/JavaScript/dist"/>
Thereby the complete HTML code with our pages content is now visible for every bot or crawler, instead a boring empty div#app
And to get rid of the browser/axios cache, I found this solution.
And with this TS condition I switch between headless and my sitepackage requests, so both cn run in the same TYPO3
[request.getNormalizedParams().getHttpHost() == 'vue-sitepackage.exotec.de'] <INCLUDE_TYPOSCRIPT: source="FILE:EXT:vue_sitepackage/Configuration/TypoScript/setup.typoscript"> [request.getNormalizedParams().getHttpHost() == 'api.exotec.de'] <INCLUDE_TYPOSCRIPT: source="FILE:EXT:headless/Configuration/TypoScript/setup.typoscript"> [end]