0

i am starting to learn more about the Jamstack, but i am still very confused in some aspects regarding dynamic contents in SSG

Example: I have a blog like dev.to that is static, but i have users that can interact for example giving likes to a post and those users also have a private user page with some stats how can i choose what is static and what is dynamic with nuxt? In every nuxt tutorial i just see people using AsyncData everwhere, but in this case how would nuxt know which api calls need to be made at build time (blogposts), and which api calls should be made by the client (user avatar, likes, etc)?

Kos-Mos
  • 415
  • 1
  • 5
  • 15
  • I am still a bit confused, to be honest. I am trying to find more resources, but seems like there aren't many at the moment. BTW, i watched your suggestions and they are really nice ( debbie's videos and nuxt nation). What i still hard to figure out is how to tell nuxt something like "i want this api calls to be made at build time" or "this api calls will be dynamic) – Kos-Mos Nov 22 '21 at 13:52
  • If you want to make something at build time, it will be on the `generate` key in the `nuxt.config.js` file. For example here for some routes generation during build time https://nuxtjs.org/docs/configuration-glossary/configuration-generate#function-which-returns-a-promise Then, the rest will happen at runtime. Of course, you'll get SSR out of the box too. Fastest solution is to try it out. Write some code, generate your project, run the generated build, open your browser, disable the JS and see if it's actually built or executed on runtime. – kissu Nov 22 '21 at 14:16

1 Answers1

1

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

kissu
  • 40,416
  • 14
  • 65
  • 133