Giter VIP home page Giter VIP logo

Comments (3)

kevinxh avatar kevinxh commented on August 27, 2024

Have you tried to modify the original JSX like following? (you probably have tried this but i just want to confirm)

<Helmet>
  <script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Intl.DisplayNames,Intl.DisplayNames.~locale.en"
-    defer
+   defer="true"  
  />
</Helmet>

Another option

The pwa-kit-react-sdk does provide a mechanism to modify the entire HTML document shell during server side rendering.

There is a special SDK component called _document, see the default implementation here.

You could override this default by adding a file in your project /components/_document/index.jsx, and you can customize it like

const Document = (props) => {
    const {head, html, afterBodyStart, beforeBodyEnd, htmlAttributes, bodyAttributes} = props
    return (
        <html lang="en-US" {...htmlAttributes}>
            <head>
                <meta name="charset" content="utf-8" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
                />
                <meta name="format-detection" content="telephone=no" />
                {head.map((child) => child)}
+              <script
+                type="text/javascript"
+                 src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js? 
+                  features=Intl.DisplayNames,Intl.DisplayNames.~locale.en"
+                 defer
+             />
            </head>
            <body {...bodyAttributes}>
                {afterBodyStart.map((child, i) => (
                    <React.Fragment key={i}>{child}</React.Fragment>
                ))}
                <div className="react-target" dangerouslySetInnerHTML={{__html: html}} />
                {beforeBodyEnd.map((child, i) => (
                    <React.Fragment key={i}>{child}</React.Fragment>
                ))}
            </body>
        </html>
    )
}

You should know that this puts the script tag out of React's reach and you should only use this method when you don't need to manipulate this script element on the client side.

Also, keep in mind adding script tags in the head may have performance implications and you should always make sure the addition of this script does not hurt your site performance.

from pwa-kit.

kevinxh avatar kevinxh commented on August 27, 2024

I noticed your script seems to be adding a polyfill script to the site. The PWA does come with core-js polyfills that should be sufficient for most use cases, if you have special requirements, consider customizing the webpack configuration to include your polyfill, that will build the polyfills in the javascript bundle, so the browser doesn't have to make a separate network request for the polyfill js file.

from pwa-kit.

sorioinc avatar sorioinc commented on August 27, 2024

Hi @kevinxh, thanks for the response.

Yes, I tried changing to defer="true", but renderToString will eventually sanitize.

Ah! That is the solution! I will make use of the _document component. Thank you!

Yes, for performance we are adding the async/defer tags, but looks like we have more options with the _document component.

The Intl.DisplayNames api is one of those core-js won't polyfill, so was the easiest way to go.

Thank you for your response, you saved me a lot of digging!

from pwa-kit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.