I have a small react site (3 pages) that's pre rendered and served as html from nginx. The site has one component that needs to pull data a very small amount of data from an api at run time (initial hydration when the site loads). The piece of data pulled is different for every user. Is that achievable in a react SSG app?
if not what's the best approch, SSR seems a bit of an overkill for 3 pages?
useEffect(() => {
fetch("myApi")
.then(response => response.json())
.then(data => setData({data}))
},[])
Obviously a fetch like this won't work because it's being run once a t build time, but maybe including a runtime script?
The difference between SSG and SSR is when you calculate the html that is returned from the server.
With SSG it's rendered at build time, while with SSR at request time.
Obviously SSR has more computational overhead than SSG because of caching.
Therefore, when you want to retrieve user-specific data from the server, you don't need SSR to render the html from the server. Typically SSR is useful for dynamically generated data you care about for reasons of SEO (so in this case it doesn't apply since your data is user-specific), or faster perceived content rendering compared to CSR.
In your case you can just perform an ajax request at the client, passing a token to the server to identify the user and render the content client-side.