Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

React Static

A fast, lightweight, and powerful framework for building static-progressive React applications and websites.

React Static / General

Load a component client side only

Load a component client side only

React Static / General · June 12, 2018 at 3:35pm
I am try to deploy a fairly large media site to Netlify (about 9k pages, so about 18k files after react-static generate the html and json). Netlify doesn't really handle uploading that many files at once and when I contacted them about this they suggested I try to upload the files in chunks and they will do a diff and only upload files that change in the future.
This seems like a possible solution but being a media site every page has a "trending" list that changes constantly - breaking the cache and forcing Netlify to try and upload the entire site every time.
I could move the trending query out of the static build step and just make it a client side query but I would prefer to do this without needing to make an API call.
Can I dynamically load a component on the client-side only so the generated html/routeInfo.json files don't have any of the "trending" data in them. Put the data in SiteData and load the component with react-universal with ssr:false and let react-static make an ajax request to /trending.json on page load? (I didn't actually see any option in universal to only load client side)

Any suggestions here would be great - or if anyone has better ideas of how to use react-static and Netlify for bigger sites.

Thanks

June 12, 2018 at 6:53pm

I would approach this with a hybrid solutionp

  • reply
  • like

Trending data is probably not something that you need in the static content

  • reply
  • like

(unless it is crucial to the navigation of your site)

  • reply
  • like

in that case, I would simply use component state to fetch the data at runtime on the client

  • reply
  • like

There isn't really a happy medium between the two where you don't run into impossibilities

  • reply
  • like

So unless it's crucial for SEO, I would just request it from an api (or a cached JSON file in /public like you said)

  • reply
  • like

Thanks for the response - yea I will probably have to go with a static json, I was just wondering if react-static or react-universal could automate that for me in some way. Although I think that is just a bandaid and my real problem here is Netlify can't handle a react-static site this big.

  • reply
  • like

June 16, 2018 at 7:54pm

I agree. Netlify should be able to do some type of diffing and only upload files that have changed. I thought that they do though?

  • reply
  • like

They do - the issue I was having was getting the site loaded for the first time so I never really got to use the diffing to help out. I ended up moving to an Enterprise account and that pretty much solved all the issues.

  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```