✓ Description of your issue
I want to implement ShortPixel AI with Frontity. On request, they have provided me with standalone JS that should work with Frontity but when I try to use it, gives an error. How to do it correctly?
SERVER STARTED -- Listening @ http://localhost:3000
- mode: development
- target: module
- public-path: /static/
webpack built client 2d295c2e7b1b3aa03c3e in 7126ms
i ｢wdm｣: Child client:
Asset Size Chunks Chunk Names
code.module.js 13.9 KiB code [emitted] code
divakshcom.module.js 8.72 MiB divakshcom [emitted] divakshcom
vendors~code.module.js 357 KiB vendors~code [emitted] vendors~code
+ 1 hidden asset
Child server:
Asset Size Chunks Chunk Names
server.js 11.5 MiB main [emitted] main
i ｢wdm｣: Compiled successfully.
ReferenceError: window is not defined
at Theme (webpack-internal:///./packages/forgotten-developer/src/components/index.js:18:170)
at runAsReaction (webpack-internal:///./node_modules/@frontity/connect/src/reactionRunner.js:16:45)
at reaction (webpack-internal:///./node_modules/@frontity/connect/src/observer.js:7:131)
at eval (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:21:16)
at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:397:2319)
at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:396:122)
at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:1199)
at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:55)
at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:470:116)
at eval (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:68:243)
✓ A repository or codesandbox with the code of your project - https://github.com/Divaksh/forgotten-developer/tree/dev
✓ A deployed version of your site http://divaksh.com/
✓ The URL of your WP REST API api.divaksh.com/wp-json
✓ Additional information: Setup guide for ShortPixel AI https://shortpixel.com/ai-js
Can you please specify the steps to follow to get that error? Maybe a Loom video may help to provide this explanation
Also, take into account that Frontity Apps are Isomorphic React Apps, which means that the React code will be executed in the server to generate the HTML for the page requested and also it will be executed in the client for a React process called hydration, so React can take control of app from that moment (improving loading times and user experience)
In one of our latest Frontity Talks we explain how to debug a Frontity App in both the server and the client and the whole idea of Frontity Isomorphic React Apps
The error ReferenceError: window is not defined seems to be related to that the server is executing a piece of code that is using window that is an object only available on the client side
It is just a twostep process as per instructions given by ShortPixel
You can integrate our Adaptive Images and CDN service into any website using the standalone JS snippet and some quick modifications in the markup.
1. INCLUDE THIS JAVASCRIPT IN THE HEAD OF YOUR PAGE:
(function(w, d){
var b = d.getElementsByTagName('head')[0];
var s = d.createElement("script");
var v = ("IntersectionObserver" in w) ? "" : "-compat";
s.async = true; // This includes the script as async.
s.src = "https://cdn.shortpixel.ai/assets/js/bundles/spai-lib-bg-webp" + v + ".0.9.min.js";
w.spaiData = {
key: "jsai",
quality: "lossy",
sizeFromImageSuffix: true
};
b.appendChild(s);
}(window, document));
2. HTML CHANGES
Replace all src attributes of the HML markup with data-spai-src, for example:
First, thank you for the detailed response. This is gentle bump!!
Please correct me if I’m wrong, this is my first web development project. I’ve learnt a lot from you guys.
I want to clarify that I have watched the video twice and tried to implement the given JS in the useEffect of post.js.(To be honest, I do not know where to add code for CSR, I did it watching the video) It didn’t throw any error, but it didn’t work as it require data-spai-src markup to work. I couldn’t figure out, how to replace ‘src’ with data-spai-src for all images.
One more confusion I have is the purpose of CDN and Adaptive Images both are speeding up the website (same as the frontity) and improve SEO performance. Images are the most expensive part of website considering the data it requires loading. The concept of Adaptive Images fixes it and deliver the webp converted images based on the screen sizes for additional data savings and the way it works in the case of ShortPixel, ImgHaste and other CDN + AI service provider is, they append their URL before the actual image URL and deliver the images from their CDN providers and modify image sizes with parameters in the URL in real-time. Like this https://cdn.shortpixel.ai/spai/w_870+q_lossless+ret_img+to_webp/https://upyogigyan.com/wp-content/uploads/2017/02/creatine.png
In case of Frontity, I can’t use the given JS at the server side because it requires window but search engines look for the SSR version if I’m not wrong? If yes then it doesn’t resolve the SEO benefits of AI. In this case, what should be done to implement it on server side?
In my opinion what you’re trying to do is kind of tricky as this ShortPixel code doesn’t seem to be really prepared to work in a React app. Making it work with Frontity shouldn’t be much more different than making it work with any other React app
Regarding this, you can try to create a custom processor that return this extra attribute for every <img> found. With this processor added to the @frontity/html2react package, any use of this package to render content will use that processor and return custom html (or React component) when matching the processor pattern.
Again, this is something that doesn’t really have to do with Frontity, but with trying to use a tool not prepared for React or even SSR React. I would ask for them for support.
