docs: add client-side architecture

docs/nova-architecture.md

@@ -1,7 +1,7 @@
 ---
 id: nova-architecture
-title: The Nova architecture
-sidebar_label: Nova architecture
+title: The Nova architecture (Universal Rendering)
+sidebar_label: Nova architecture (Universal Rendering)
 ---
 
 Nova came up as a base architecture to integrate Micro-frontends in any existing web framework regardless of what programming language it's built atop.

docs/nova-spa-architecture.md

@@ -0,0 +1,20 @@
+---
+id: nova-spa-architecture
+title: The Nova architecture (Client-Side Rendering)
+sidebar_label: Nova architecture (Client-Side Rendering)
+---
+
+The client-side implementation consists of a host application (SPA) that contains references to the javascript bundles of each Micro-frontend.
+
+Those bundles are lazy-loaded depends on the client-side route or when a Micro-frontend needs to be mounted on the page.
+
+![client side integration](/website/img/nova-spa.png)
+
+The host application use a [Nova Bridge](/website/docs/nova-bridge) to render a placeholder on the page where the Nova (Micro-Frontend) view needs to be mounted, then it emits an event named `NovaMount` the Nova entry-point listens and uses to render and mount the view.
+
+![client side integration](/website/img/client-side-integration.png)
+
+## Examples
+
+- [Vue.js](https://github.com/marconi1992/ara-spa-vue)
+- [React](https://github.com/marconi1992/ara-spa-react)

docs/quick-start.md

@@ -4,7 +4,7 @@ title: Quick Start
 sidebar_label: Quick Start
 ---
 
-Ara is a framework to develop and integrate Micro-frontends easily using [Airbnb's Hypernova](https://github.com/airbnb/hypernova). We call **Nova** to each Hypernova service.
+Ara is a framework to develop and integrate Micro-frontends easily using [Airbnb's Hypernova](https://github.com/airbnb/hypernova). We tend to call **Nova** to each Hypernova service.
 
 ## Installing Ara CLI
 
@@ -39,6 +39,10 @@ The command by default creates a Nova service using Vue.js but you can use anoth
 ara new:nova novas/global -t vue
 ```
 
+For using only **Client-Side rendering** type `n` when the command asks `Do you want to include Server-Side Rendering (SSR) (Y/n)`.
+
+Read more about the [SPA architecture](/website/docs/nova-spa-architecture).
+
 The service created contains the entry point for the Nova server in `src/index.js` and the entry point for the browser in `src/client.js`.
 
 ## Run the Nova service.
@@ -47,7 +51,7 @@ The service created contains the entry point for the Nova server in `src/index.j
 npm run dev
 ```
 
-This command executes the Nova sever on http://localhost:3000 and it restarts the server every time the code changes.
+This command executes the Nova sever on http://localhost:3000 and restarts the server every time the code changes.
 
 ## Test the Nova service
 

website/pages/en/index.js

@@ -152,10 +152,10 @@ class Index extends React.Component {
             title: 'Tech Agnostic',
           },
           {
-            content: 'Server-side render Nova views and hydrate them on the browser to make them interactive.',
-            image: `${baseUrl}img/undraw_landing_page.svg`,
+            content: 'Server-side render Nova views and hydrate them on the browser to make them interactive, or just Client-Side render them on your SPA.',
+            image: `${baseUrl}img/undraw_static_assets.svg`,
             imageAlign: 'top',
-            title: 'Universal Rendering',
+            title: 'Client-Side and Universal Rendering',
           },
           {
             content: 'You can render Nova views on any web technology and framework such as Nuxt, GatsbyJS, WordPress, Flask and more.',

website/sidebars.json

@@ -2,6 +2,7 @@
   "docs": {
     "Getting Started": [
       "nova-architecture",
+      "nova-spa-architecture",
       "quick-start",
       "render-on-page"
     ],