The static
in SSG is maybe not the best wording for this because you're feeling like it is not able to run some JS dynamically on it but it totally does!
Static is mainly to say that you can host the files on a CDN. A better name would be pre-rendered
or built ahead of time
files. Main benefit being not to need to rely on a Node.js server.
At first, you'll get some static files, that will then becomes a fully hydrated SPA app, basically a regular Vue app on steroids. This is pretty much what Nuxt is all about.
If somebody clicks on a like button somewhere, you'll need to send some HTTP call somewhere to record this one. When somebody arrives on the page, your app will call an external API (for the likes counter for example) while some stuff can stay exactly the same (your post's actual text).
If you do want to allow for a specific private user page, you'll need to handle OAuth and populate a path where you'll inject user-specific info that you'll again grasp from some external API (pretty much how Facebook works).
So, you don't really need to choose what is static or dynamic because:
- the files are static, when generated during deployment
- the rest will be all dynamic, since it's an universal app (server + client combo)
In terms of what needs to be done where, it depends on how you're implementing it (local or remote blog posts aka .md
files or headless CMS
) + client's stuff will always be on runtime.
We'll need more details and you probably need to try things/watch some tutorials on the subject.
I gave a talk on NuxtNation, maybe give it a look, to understand some tricky parts: Nuxt Nation 2021 - Understand the hard parts of Nuxt
I can also recommend Debbie's YouTube channel, which is really great at explaining things: https://www.youtube.com/c/DebbieOBrien/videos