Skip to content

Commit

Permalink
docs: improve rendering and depolyment pages (#670)
Browse files Browse the repository at this point in the history
* docs: improve rendering and depolyment pages

* docs: improve rendering and depolyment pages
  • Loading branch information
debs-obrien committed Sep 7, 2020
1 parent 33bdcb0 commit 53abbb4
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 6 deletions.
37 changes: 34 additions & 3 deletions content/en/guides/features/deployment-targets.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,62 @@ category: features

## Static Hosting

For static hosting (hosting where no server is needed) the target of static needs to be added to your nuxt.config file.
With static hosting, hosting where no server is needed, you can choose to either host a single page application or a multiple page application, also known as static sties. With static hosting no server is needed, meaning your SPA or static site can be hosted on any serverless hosting or CDN for free. For static hosting the target of `static` needs to be added to your `nuxt.config` file.

```js{}[nuxt.config.js]
export default {
target: 'static' // default is 'server'
}
```

Running nuxt dev with the static target will improve the developer experience:
### SPA

Single page applications are pages that are rendered only on the client side without the need of a server. To deploy a single page application set the [mode set to `spa`](/guides/features/rendering-modes#spa) and then use the `build` command to build your application.

```js{}[nuxt.config.js]
export default {
target: 'static' // default is 'server'
mode: 'spa'
}
```

### Static Sites

As Nuxt.js also works as a static site generator you can therefore generate your application as a static site. Statically render your Nuxt.js application and get all of benefits of a universal app without a server. The nuxt `generate` command will generate a completely static version of your website. It will generate HTML for every one of your routes and put it inside of its own file in the `dist` folder. Basically any .vue file that is placed inside the pages folder will be generated as a static html page. This improves performance as well as SEO and better offline support.

<base-alert type="info">

Static sites work with [universal mode](https://nuxtjs.org/guides/features/rendering-modes#universal) which is the default mode.

</base-alert>

**Running nuxt dev with the static target will improve the developer experience:**

- Remove `req` & `res` from `context`
- Fallback to client-side rendering on 404, errors and redirects [see SPA fallback](./guides/concepts/static-site-generation#spa-fallback)
- `$route.query` will always be equal to `{}` on server-side rendering
- `process.static` is true

<base-alert type="info">

We are also exposing `process.target` for module authors to add logic depending on the user target.

</base-alert>

## Server Hosting

For server hosting the target of server is used which is the default value.
Server Hosting is hosting that requires a server and is intended for SSR applications. Server-side rendering otherwise known as SSR means that your page is rendered on the server when it is requested by the user. When the user opens your page in a browser the browser sends a request to the server requesting that page. The page is rendered on the server and sent back to the browser with all its content.

For server hosting the target of server is used, which is the default value. You use the `build` command to build you application.

```js{}[nuxt.config.js]
export default {
target: 'server'
}
```

<base-alert type="info">

Server Side Rendering works with [universal mode](https://nuxtjs.org/guides/features/rendering-modes#universal) which is the default mode.

</base-alert>
14 changes: 11 additions & 3 deletions content/en/guides/features/rendering-modes.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@ category: features

`mode: 'universal'`: Isomorphic application (server-side rendering or static sites).

The universal mode is used for both server-side rendering and static sites.

Static sites are very similar to server-side rendered applications with the main difference being that static sites are rendered at build time, therefore no server is needed. Navigating from one page to another is done on the client-side.

Server-side rendered sites are rendered on the server each time the user requests a page, therefore a server is needed to be able to serve the page on each request.

See [deployment targets](/guides/features/deployment-targets) for more info on static and server hosting

```js{}[nuxt.config.js]
export default {
mode: 'universal' // default universal
Expand All @@ -21,13 +29,13 @@ You do not need to add this to your nuxt config in order for universal mode to b

## SPA

`mode: 'spa'`: No server-side rendering (only client-side navigation)
`mode: 'spa'`: No server-side rendering, only client-side rendering.

You can use the mode property to change the default nuxt mode for your project:
With Single Page Applications there is no server-side rendering, only client-side rendering. Client side rendering means rendering the content in the browser using JavaScript. Instead of getting all of the content from the HTML we just get a basic HTML document with a JavaScript file that will then render the rest of the site using the browser.

```js{}[nuxt.config.js]
export default {
mode: 'spa' // default universal
mode: 'spa'
}
```

Expand Down

0 comments on commit 53abbb4

Please sign in to comment.