Search code examples
vue.jshttpnuxt.jshostingweb-deployment

How do dynamic API calls work in Nuxt.js static vs SSR mode?

Even after reading through multiple articles explaining the differences between static and SSR rendering I still don't understand how dynamic API calls work in these different modes.

I know that Nuxt has the fetch and asyncData hooks which are only called once during static generation, but what if I use dynamic HTTP requests inside component methods (e.g. when submitting a form via a POST request)? Does that even work in static sites?

I'm making a site that shows user generated content on most pages, so I have to make GET requests everytime one of those pages is visited to keep the content up to date. Can I do that with a static site or do I have to use SSR / something else? I don't want to use client side rendering (SPA mode) because it's slow and bad for SEO. So what is my best option?

Solution

  • There is actually no difference between either asyncData() or fetch() hooks when you do use target: static (SSG) or target: server (default, SSR).
    At least, not in your use-case.

    They are used mainly by your hydrated app.
    As a reminder, when using either SSG or SSR, your static page will be hydrated and will become an SPA with all the dynamic functionality that we love. This combo of SSG + SPA or SSR + SPA is called an universal app (or isomorphic app).

    Both asyncData() and fetch() will be called upon navigation within your client side SPA.

    There are also some things happening on the server side, like fetch being called (by default) when you request the server for an SSR built app.

    Or the fact that when you generate your app (if using SSG), you can reach some API and generate dynamic routes (useful in the case of a headless CMS + blog combo for example).
    For performance reasons and to have a quick build time, you may pass a payload and use it in an asyncData hook in the dynamic route, as explained here

    Still, a static Nuxt app, is basically just an app built ahead of time, with no need for a Node.js server, hence why an SSG app can be hosted on Netlify for free (CDN) but and SSR one needs to be hosted on something like Heroku (on a paid VPS).

    The main questions to ask yourself here are:

    • do you need to have some content protected? Like some video courses, private user info etc...already in your Nuxt project (if SSG, disabling the JS will give access to the generated content)
    • is your first page a login? Is it mandatory to access the rest of the content? Like an admin dashboard (you cannot generate content ahead of time if the data is private, think of Facebook's feed being generated for every account, not feasible and not secure as above)
    • is my API updating super often and do I need to have some super quick build time (limitation on free tiers essentially)? (SSG will need a re-generation each time the API changes)

    If none of those are relevant, you can totally go SSG.
    If one of those is important to you, you may consider SSR.

    I do recommend trying all of them:

    • SSR (ssr: true + target: server) with yarn build && yarn start
    • SSG (ssr: true + target: static) with yarn generate && yarn start
    • SPA only (ssr: false + either target: static, target: server also work but who wants to pay for an SPA?!) with yarn generate && yarn start

    Try to host it on some platforms too, if you want to be sure to understand the differences beyond your local build.
    You can use this kind of extension to also double-check the behavior of having JS enabled or not.

    I will probably recommend to take the SSG path. Even tho, if your content is always changing you will probably not benefit much from SEO (eg: Twitter or Facebook).

    This github answer could maybe help you understand things a bit better (it does have some videos from Atinux).

    PS: I did a video about this on the latest Nuxtnation that you can find here.