2

I'm still new to web dev and trying to build an Ecommerce app using Nuxt and Strapi as a CMS to enable the website owner (which in this case is also me) to easily add/edit/remove products.

I've found a lot of articles about this topic and got really confused. I learned about the term JAMstack and I really liked it but I don't think I fully comprehend it yet.

In a JAMstack article explaining a similar usecase of mine (ecommerce with strapi, nuxt, snipcart). I read that I have to build my frontend in SSG. On another article using Nuxt 2, a screenshot of creating the project shows that Universal mode is chosen.

My head is melting and don't really know which option is valid and if all of SPA/SSG/SSR can be implemented with headless cms and provide a jamstack app which one should i use. Should i use jamstack in the firstplace?

kissu
  • 40,416
  • 14
  • 65
  • 133
Muhammad Mahmoud
  • 621
  • 1
  • 5
  • 21
  • What don't you understand? Universal or JAMstack? Please try to ask a single question here. – kissu Jul 15 '22 at 12:47
  • Actually i'm confused in both and I see that they relate to each other, that's why i'm asking about both. I do know what universal,ssr,ssg means but what I dont know is when/why/what to choose between them in a Jamstack app. – Muhammad Mahmoud Jul 15 '22 at 15:38
  • Wrote a small piece of explanation. Feel free to comment under my answer if you need more details. :) – kissu Jul 15 '22 at 17:18

2 Answers2

7

A few takeaways

  • A universal app is basically one rendering on both backend then frontend. In the case of Nuxt, it will render the content on the server, then hydrate the whole static content on the client and make it as an SPA.

  • SPA is the most common way of thinking about things, it's slow initially because you need to load the whole thing in your browser before going on but it's free to host. Downsides being SEO mainly. Use it for super interactive places or things hidden behind a login like an admin dashboard for example.

  • SSG is perfect if you have some stuff not moving that often, for example a blog or landing page. It's also free to host and it's great because you can get the initial content as text before the hydration phase. Drawback being that you may have increasing time building all of your static pages.

  • SSR is somewhat similar to the old days of PHP, it will render the page on a server and send it to you (rather than at build time like SSG does). It also means that you need to have a paid Node.js server running. It's not free and have all the drawbacks of "visitors charge": 10k people accessing a static file vs accessing a running server is night and day. Meanwhile, it's perfect for super dynamic content like Reddit or Twitter for example, or even Stackoverflow.

You can check this article, it's quite handy: https://web.dev/rendering-on-the-web/

There is a nice image giving more details regarding this subject, with some actual Web Core Vitals (TTI, FCP, TTFB etc)...

You can check the Rendering Patterns here too: https://www.patterns.dev/posts/

On a simpler and more practical explanation point, you can also check those articles, they are pretty well written. It's about Next but most of the concepts are relevant to Nuxt too:

Or any other article on the Web really.

How to choose?

Ask yourself:

  • what is my type of content? A secure dashboard, a blog, a Twitter?
  • am I okay with paying a server + managing the load + cache part or is static totally fine to me?
  • what will be the content displayed there? Is loading time important or can people wait a bit?
  • how many pages will I have, and will they have a lot of variants/needs regarding the SEO (i18n for example)?

Cool thing

Nuxt will soon support all of them at the same time: https://github.com/nuxt/framework/discussions/560

kissu
  • 40,416
  • 14
  • 65
  • 133
  • This clarified a lot of things to me but now I got new questions xd. I'll search and try a bit before asking here. Thanks for the detailed answer. – Muhammad Mahmoud Jul 16 '22 at 06:21
  • @MuhammadMahmoud feel free to ask some here. I might give a quick answer! – kissu Jul 16 '22 at 07:24
  • 1
    Actually I'm watching your video (Understand the hard parts in nuxt) now and It's getting more clearer. I'll finish it and ask here if the question is related or in a new question. Thanks for the amazing effort truly. – Muhammad Mahmoud Jul 16 '22 at 07:27
  • 1
    @MuhammadMahmoud haha, this video is actually one of my talk (I'm Konstantin). Glad that it's helping! Feel free to ask a new question sir, you're welcome. – kissu Jul 16 '22 at 07:30
0

I can explain based on example of what we use (Strapi+GatsbyJS SSG+Gatsby Cloud) GatsbyJS is a similar framework to Nuxt, but using React instead of Vue. You can have 2 options SSR which stands for Server Side Rendered where pages are rendered upon request and SSG which stands for Static Site Generation where pages are rendered on server but are created during build and not based on the request of an end user. Both Gatsby and Nuxt can work in any mode SSR or SSG. It really doesn't make much difference for you what option to choose at that stage.

Anton Komarow
  • 36
  • 3
  • Not everything is comparable tho. Some things are a bit different in the React world. For example, Next's SSR is not the same as Nuxt's. – kissu Jul 15 '22 at 17:01