Search code examples
nuxt.jse-commercestrapiheadless-cmsjamstack

Which rendering mode to choose with Nuxt? SPA, SSR, SSG?

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?

Solution

  • 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