Can SSG and CSR exist together
Suppose you have a site that is mostly static content like articles. With only interactive content being mark as read for the article and user profile icons.
Then you have some pages like user profile that is fully dynamic.
Can you have these coexist?
I assume it's probably easier to just SSR everything but ssr probably consumes more bandwidth and leads to more costs compared to static pages and send only json data?
Sorry if this doesn't seem specific. I haven't tried out a full fledged ssg/ssr framework. Most of my ssr experience is using a templating engine on server side
43 Replies
yes
As with most things, "It Depends™" lol
But basically there is no reason they can't co-exist. But I would challenge the assumption that your user profile is fully dynamic. It's static HTML/CSS with dynamic parts, so a static page would be fine with JS taking care of the dynamic bits.
The hard part would be to setup your server so the reverse proxy knows when to handle static assets and when to send to the backend API.
So. Possible to do but more complex compared to just ssr
no, just setup cloudflare
it can cache some pages, and not others, which will still be requested from the server directly
or you can do it yourself
pre-render articles, but not profile pages
Haven't done caching before so not sure how that would be done. I should play with ssg
Also what about cost compared to ssr. It probably doesn't matter unless you have a decent amount of traffic but would it be a concern?
Would rewriting from ssr to ssg/csr be a big undertaking if you get high traffic in the future
the development cost of that dwarfs the hosting cost
Oh yeah true
COVID is a really good example of how SSR can go wrong. Most websites were fine until everyone was trying to use it at the same time. Too many requests at once crashed a lot of US government sites, especially unemployment.
While an outlier, it dos show how unintended number of concurrent users can cause problems with SSR
and most pages could probably just get pre-rendered or cached somewhere else
That's the usual for most government websites here. Tho yea i see the point
Isn’t that…just SSG then? lol
Also, look into JAM stack. Basically mostly static sites with JS being used for dynamic content.
The precursor to what is now called “island architecture” or “hydration”
yesn't
kinda
unless you need a login, it should be cached
Even then, I think that your logged in pages should be static with JS
fetching the needed dynamic contentyes, should
:p
What about when static content is paywalled
then you have a different static content for paywalled content
Can you dynamically show static content depending on Authorization?
with the right setup, can't see why not
Kk I thought you'd need to dynamically render it
not always
as beck said, you can still do some ssg for the scaffold, but then request data over js and it either gives you an error or the url for the assets
Isn't the url public then?
no, because you can add a token to the url
and the server with the assets can check the token is valid and show the asset
like how discord does
Gotcha
here's an example: this image
this is the asset stored somewhere
https://cdn.discordapp.com/attachments/1421469672187887668/1421493244138750032/photomode_15032025_225212.png?ex=68d93c3f&is=68d7eabf&hm=e663b3b7ceec8ef9dfb6eeb92f33d539931a4e53935fc3909fff32bb49e8464b& <-- this is the link you get
see the exta parameters? they are tokens and other crap
discord checks the tokens, and, if they are older than 24 hours, they are invalid and the asset doesn't load
this is what happens when i access the url without tokens
You mean the cdn server doesn't send back the data
basically
Gotcha
if it is video or music, you use drm
you might be able to trick a
<video> tag to show a static image and force drm too
but that's so far-fetchedFeels complicated
it is
When you send a
fetch request any cookies are sent along with it, so if the user doesn't have the right auth cookie you return a 403 Forbidden response code.that works too
Or, really, any HTTP request is sent with cookies, so even if the entire page is paywalled the cookie is still sent. So you set the cookie on login and use that to determine what can and cannot be viewed.
Yeah makes sense
Both Next and Nuxt combine SSG/SSR with CSR. Initial page load is SSG/SSR and all subsequent navigation is CSR. The SSG/SSR helps with SEO and faster initial page load. The CSR makes subsequent navigation feel more instantaneous.
I haven't had the chance to use a meta framework (is this what they call it?). By initial page load do you mean the landing page is ssg and every other page is taken cared by CSR instead of more ssg pages?
Not only the landing page. Any page in the site when loading from external source, like a search engine, blog, etc. will be SSG/SSR. All subsequent navigation that originates from links within the site will cause CSR.
Ah ok okay
Sveltekit ftw
Makes it ez pz lemon squeezey
My folio is a decent beit old now example. Works 100% without JS too. https://b.1mind.dev
Looks nice. Checking out Ssr/ssg would be a good excuse to try out sveltekit