Stellt euch mal vor, ihr baut eine tolle Single Page Application, mit ein paar SEO-Seiten die über das PrerenderSPAPlugin beim builden gerendert werden. Nun will man sein Produkt launchen und setzt dafür noch schnell den wundervollen (haha) Cookie-Banner von Cookiebot ein und schwupps, ist das Prerendering kaputt.

Woran liegt das? Das Prerender-Plugin macht irgendwas mit einem Headless Browser, um herauszufinden, wie das gerenderte HTML wohl aussieht. Leider läd dabei natürlich auch das Cookiebot-Script, es macht irgendeinen Bockmist, und am Ende steht nicht das vorgerenderte HTML in der index.html, sondern nur der gleiche Quatsch, wie vorher. Zusätzlich noch mit einem völlig durcheinander gebrachten <script>-Tag von Cookiebot.

Naja. Es lässt sich fixen, indem man für das Cookiebot-Snippet erstmal nur einen Platzhalter, wie etwa <meta name="cookiebot"> in seine index.html packt, und diesen nach dem Rendern wieder ersetzen lässt. 🙃

new PrerenderSPAPlugin({
                staticDir: path.join(__dirname, 'dist'),
                routes: ['/', '/impressum', '/datenschutz'],
                postProcess(renderedRoute) {
                    renderedRoute.html = renderedRoute.html.replace(
                        '<meta name="cookiebot">',
                        '<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="XXX" data-blockingmode="auto" type="text/javascript"></script>'
                    )

                    return renderedRoute
                }
            })