fix: onRenderBody into gatsby-browser 😺👍

[olavea]

fix: onRenderBody into gatsby-browser 😺👍 #23

// gatsby-browser.js 😺👍
import React from 'react';
import Layout from './src/components/Layout';
import { onRenderBody } from "./gatsby-ssr";

export function wrapPageElement({ element, props }) {
  return <Layout {...props}>{onRenderBody, element}</Layout>;
}

and

😺👍
// gatsby-ssr.js
import React from "react";
import Layout from "./src/components/Layout";

const OusetaScriptComponent = () => {
  return (
    <script
      key="outseta-script"
      id="outseta-script"
      src="https://cdn.outseta.com/outseta.min.js"
      data-options="o_options"
    />
  );
};

const OusetaConfigComponent = () => {
  const config = {
    domain: "queen.outseta.com",
    monitorDom: true,
  };
  return (
    <script
      key="outseta-config"
      id="outseta-config"
      dangerouslySetInnerHTML={{
        __html: `var o_options = ${JSON.stringify(config, null, 2)}`,
      }}
    />
  );
};



// B. Body setHead on body

const onRenderBody = ({ setHeadComponents }) => {
  return setHeadComponents([OusetaConfigComponent(), OusetaScriptComponent()]);
};


export function wrapPageElement({ element, props }) {
  return <Layout {...props}>{onRenderBody, element}</Layout>;
}

[gatsby-cloud]

Gatsby Cloud Build Report

TimeShip-1

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 1m

Performance

Lighthouse report

Metric	Score
Performance	💚 92
Accessibility	💚 92
Best Practices	💚 100
SEO	🔶 66

🔗 View full report

[olavea]

Hey @raae

This works for me, but what does it do?
No don't answer that, I'll look into it later.

So give me some pointers in what direction to look. Here are some ideas:
-My performance went up from ... to ... se screenshots below
-Am I doing 1 thing with gatsby-ssr that happens "right away" for Lillian (6 🏴‍☠️ 👸 ) and doing another thing gatsby-browser that happens "later" for Lillian (6 🏴‍☠️ 👸 )?
-Where can I "see" the results of what I did here?

1. In the "inspect" in my browser?
2. with a console log?