[Docs] add runtimeConfig / appConfig explainer

[clemcode]

At the moment, docs lack an explainer of the differences between the appConfig and runtimeConfig concepts, as they both allow to use environment variables.

https://v3.nuxtjs.org/guide/going-further/runtime-config
https://v3.nuxtjs.org/guide/directory-structure/app.config

[pi0]

Here is a quick summary of their differences. Feel free to expand it and please mention if need any more info:

runtime config

It should be defined/declared from nuxt.config and can be overridden using environment variables in production runtime after build. It is accessible from server-only by default and only public namespace is added to the client payload and hydrated from SSR response. It cannot be overridden per request or dynamically after server is started but only initialized once. But is available both for server routes and app routes. It can contain only primitive JS values.

app config

It should be declared using app.config and can be overridden using nuxt plugins in both client and server environments and per request. Default values are bundled into the output both client-side and server-side so it is considered ppublic. It can also contain any JS variable.

When using

• app.config: Public tokens that are determined on build time, website configuration such as theme variant, title and mostly any public project config that is determined on build time
• runtime config: Private tokens or tokens that need to be specified after build using environment variables

Cons and pros

• app.config: Is more efficient because is not in the bundle, it can have any js variable type and is better typed. But cannot be overridden using environment variables and hydrated.
• runtime config: It is fully dynamic for a server-deployment that needs to change config after build. It can be hydrated but also adds to the page pageload and only accepts primitive js types.