Comments (3)
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.
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.
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)
- [BUG] Unsupported engine on NodeJS 22, NPM 10 HOT 1
- [DOCS] Examples of extending webpack configuration HOT 1
- [FEATURE] Support multiple `siteAliases` for a B2C Commerce Site HOT 1
- [FEATURE] Harden token handling
- [FEATURE] Support Agent Login 👔
- [BUG] Enabled attribute not working for the registerCustomer (Shopper Customers) endpoint HOT 1
- [BUG] Profile edit deletes addreses from useCurrentCustomer response HOT 2
- [BUG] Concurrent request issue when registering a disabled customer HOT 3
- [FEATURE] Ability to have private proxy URL by default in useCommerceApi HOT 8
- [BUG] Not getting correct secret key in callback controller trigerred by SLAS HOT 6
- [BUG] Cannot proceed when Logging in during checkout HOT 1
- [BUG] getTrustedAgentAccessToken don't work with private custom proxy. HOT 1
- [BUG] PWA fetches SCAPI data during hydration HOT 2
- [BUG] Error handling issues
- [BUG] Default product-scroller skips tiles (desktop)
- [BUG] unable to provide request parameters to useCustomMutation`mutate` method
- [BUG] Regression in wishlist page with `No Wishlist Items` HOT 1
- [FEATURE] - Request to add Storybook example with Providers
- Not able to update custom attributes for customer payment instrument inside custom API script HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pwa-kit.