Just wanted to thank you for sharing this solution with us, this is the only article I was able to find on gatsby addressing this issue. Was just wondering if you have a working example of that pseudo code you outlined at the end of your examples. Would you be willing to share it with us? :-)
Thank you again for writing this article and outlining your solution!
I'm happy to share the real code now as we actually made the decision to remove React altogether for our simple site so this blog post quickly went out of date for us. I actually posted on Reddit a few days back with some open source plugins we created to make removing React easy reddit.com/r/gatsbyjs/comments/c6z...
The real code is below
constmodules=useMemo(()=>{returnpage.modules.map((module,index)=>{const{moduleFileName,shouldLoadJavascript}=getFromMap(appModules,module.id)if(isServer()){// The server should always render the module so we get the static HTML.returnrenderModule(moduleFileName,module,index,isBusinessOpen)}constwasUserPreviouslyOnSite=window.history.stateconsthtmlEl=document.querySelector(`[data-module-index="${index.toString()}"]`)if(htmlEl&&!shouldLoadJavascript&&!wasUserPreviouslyOnSite){returnstaticRenderModule(index,htmlEl)}constfallback=htmlEl?staticRenderModule(index,htmlEl):nullreturnrenderModule(moduleFileName,module,index,fallback,isBusinessOpen)})// Render the module with the HTML currently rendered from the static HTML file without importing the javascript.functionstaticRenderModule(index,htmlEl){return(<sectionkey={index.toString()}dangerouslySetInnerHTML={{__html:htmlEl.innerHTML}}/>)
}// Render the module with all the javascript.functionrenderModule(modulePath,module,index,fallback=null,isBusinessOpen){constModuleComponent=loadable(()=>import(`../modules/${modulePath}`))return(<ModuleContext.Providerkey={index.toString()}value={{lazyLoad:index>1}}><ModuleComponentmoduleIndex={index}fallback={fallback}module={module.data||{}}webPage={page}isBusinessOpen={isBusinessOpen}/>
</ModuleContext.Provider>
)}},[page])
As you can see for each module we check whether or not the module should load javascript by checking the shouldLoadJavascript flag, if it does not load javascript then we just render the module statically. Here is our module map file that the getFromMap function is working on
Thank you so much for being so forthcoming and for your quick reply. There are so many issues or edge cases where I can get multiple sources addressing them, but for this one, your article is the only one that addressed exactly what I was looking for and in such a straightforward way.
I hope you won't stop sharing your knowledge and expertise. You've already saved me hours of headaches :-)
Sorry for the late reply, this lazyLoad: index > 1 is there mostly for an <Image/> component we have. We only wanted images to lazy load if they were later down the page, so the first module we had would never lazy load images.
Can you please explain a bit more about he isServer() and "shouldLoadJS" Stuff?
I don't really got this in the Gatsby-Context. If the Page was build and served with gatsby, the Page become statically, right? So why is there an "isServer"-Request needed (and how do you test for "isServe"?)
Or is it to force to reload Component, if you are in gatsby develop mode?
And for shouldLoadJS ... what exactly the functionality of it? How do I decide if "javascript" is needed or not by this module. Does it means if you import additional JS inside this module?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Tommy,
Just wanted to thank you for sharing this solution with us, this is the only article I was able to find on gatsby addressing this issue. Was just wondering if you have a working example of that pseudo code you outlined at the end of your examples. Would you be willing to share it with us? :-)
Thank you again for writing this article and outlining your solution!
Hey Lilian,
I'm happy to share the real code now as we actually made the decision to remove React altogether for our simple site so this blog post quickly went out of date for us. I actually posted on Reddit a few days back with some open source plugins we created to make removing React easy reddit.com/r/gatsbyjs/comments/c6z...
The real code is below
As you can see for each module we check whether or not the module should load javascript by checking the
shouldLoadJavascript
flag, if it does not load javascript then we just render the module statically. Here is our module map file that thegetFromMap
function is working onMate, you've made my day! :-)
Thank you so much for being so forthcoming and for your quick reply. There are so many issues or edge cases where I can get multiple sources addressing them, but for this one, your article is the only one that addressed exactly what I was looking for and in such a straightforward way.
I hope you won't stop sharing your knowledge and expertise. You've already saved me hours of headaches :-)
I am really curious about how you're handling the
lazyLoad: index > 1
part.Could you enlighten me on this?
Sorry for the late reply, this
lazyLoad: index > 1
is there mostly for an<Image/>
component we have. We only wanted images to lazy load if they were later down the page, so the first module we had would never lazy load images.Can you give a hint about this
isServer()
function I've asked above this comment?Thanks a lot in advance
I'm curious about this, as well. But I suppose you could just check for the existence of
window
.Can you please explain a bit more about he
isServer()
and "shouldLoadJS" Stuff?I don't really got this in the Gatsby-Context. If the Page was build and served with gatsby, the Page become statically, right? So why is there an "isServer"-Request needed (and how do you test for "isServe"?)
Or is it to force to reload Component, if you are in
gatsby develop
mode?And for
shouldLoadJS
... what exactly the functionality of it? How do I decide if "javascript" is needed or not by this module. Does it means if you import additional JS inside this module?