You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a Meteor website that on a experimental branch to explore code splitting with SSR I have introduced this package
Previously I had used lazy and suspense from React to load pages in my routes file but SSR didn’t work, when I viewed the source of the page I just got my loading component, and I want to return all the html in the body for SEO.
After switching to npdev-react-loadable this seemed to reduce my bundle size, currently the bundle size is 2.7mb, it used to be 3.7mb but removing some packages and implementing react-loadable seems to help.
Currently on this experimental branch I have this client/index.js file
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { Router } from 'react-router-dom';
import routes from '../both/routes';
import { preloadLoadables } from 'meteor/npdev:react-loadable';
preloadLoadables().then(() => {
const container = document.getElementById('app');
const html = hydrateRoot(
container,
<>
<Router history={history}>
<div>{routes}</div>
</Router>
</>,
);
});
Now what is happening in this experimental branch is has a bunch of html markup like this
&lt;div class=&quot;sc-bCfvAP position-relative&quot;&gt;&lt;div class=&quot;sc-dPWrhe bciHYw page-wrapper-container&quot;&gt;&lt;div class=&quot;page-wrapper... more content missing
it seems to have html with character entities but it cuts off at some point and just shows … as seen at the end of this Gist html · GitHub
Is this a limitation of this package? to not output all the content into the body
Previously my two server/index.js and client/index.js files looked like this with normal imports and routes, now it is somehow working but is mixing readLoadable and npdev react Loadable packages. I didn’t set it up like this.
For this missing content I had to do this. So I think that solves a large portion of the problem, also some other missing content was because I was nested loadable components which I guess doesn't work.
Finally I am wondering about the character entities instead of
tags and other element tags in the view source is it ok?
Solution
One of the first thing that was happening was Meteor.isClient was wrapping some components the used location Object and the window Object both only available on the client side. We were wrapping all of the SignUp Component and the Footer Component in the Meteor.isClient function which was preventing it from being rendered on the server and being passed to the view source html. I tell you web development is confusing.
useEffect(() => {
// Set isClient to true after the component is mounted on the client-side
setIsClient(true);
// Cleanup function to set isClient back to false when the component is unmounted
return () => {
setIsClient(false);
};
}, []); // Pass an empty dependency array to run this effect only on mount and unmount
return (
<Waypoint
scrollableAncestor={isClient ? window : undefined}
onEnter={() => setIsVisible(true)}
onLeave={() => null}
>...
Hi,
I have a Meteor website that on a experimental branch to explore code splitting with SSR I have introduced this package
Previously I had used lazy and suspense from React to load pages in my routes file but SSR didn’t work, when I viewed the source of the page I just got my loading component, and I want to return all the html in the body for SEO.
After switching to npdev-react-loadable this seemed to reduce my bundle size, currently the bundle size is 2.7mb, it used to be 3.7mb but removing some packages and implementing react-loadable seems to help.
Currently on this experimental branch I have this client/index.js file
and this server/index.js file
Now I created a Loadable component at Loading/Loadable.js
And in my routes.js I am loading my homepage component with the loadableComponent
and then in that same file calling it in the route
Now on that homePage component I have the following
Now what is happening in this experimental branch is has a bunch of html markup like this
it seems to have html with character entities but it cuts off at some point and just shows … as seen at the end of this Gist html · GitHub
Is this a limitation of this package? to not output all the content into the body
Previously my two server/index.js and client/index.js files looked like this with normal imports and routes, now it is somehow working but is mixing readLoadable and npdev react Loadable packages. I didn’t set it up like this.
server
client
However the reason I am showing the current branch is because it does render the html in the source like so
gist.github.com
https://gist.github.com/andersacorn/081f48a4bc41d505be7c294c89b479f3
I guess I have a few questions here.
Any help would be greatly appreciated.
The text was updated successfully, but these errors were encountered: