Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 23:22:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(concepts): clarify sentences (#4201)

Browse Source
This commit is contained in:
Clément Ollivier 2022-04-08 15:09:00 +02:00 committed by GitHub
parent 0e4def19f8
commit 0bd801cfd8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/content/2.guide/1.concepts/3.rendering.md
View File

@ -6,8 +6,8 @@ Both Browser and Server can interpret JavaScript code to render Vue.js component
Out of the box, a traditional Vue.js application is rendered in the browser (or **client**). Then, Vue.js generates HTML elements after the browser downloads and parses all the JavaScript code containing the instructions to create the current interface. Out of the box, a traditional Vue.js application is rendered in the browser (or **client**). Then, Vue.js generates HTML elements after the browser downloads and parses all the JavaScript code containing the instructions to create the current interface.
![Users have to wait for the javascript to be downloaded, parsed and executed before seeing the page's content](/img/concepts/rendering/light/csr.svg){.dark:hidden} ![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/img/concepts/rendering/light/csr.svg){.dark:hidden}
![Users have to wait for the javascript to be downloaded, parsed and executed before seeing the page's content](/img/concepts/rendering/dark/csr.svg){.light:hidden} ![Users have to wait for the browser to download, parse and execute the JavaScript before seeing the page's content](/img/concepts/rendering/dark/csr.svg){.light:hidden}
While this technique allows building complex and dynamic UIs with smooth page transitions, it has different pros and cons: While this technique allows building complex and dynamic UIs with smooth page transitions, it has different pros and cons:
@ -30,7 +30,7 @@ Client-side rendering is a good choice for heavily interactive **web application
When the browser requests a URL with universal (client-side + server-side) rendering enabled, the server returns a fully rendered HTML page to the browser. Whether the page has been generated in advance and cached or is rendered on the fly, at some point, Nuxt has run the JavaScript (Vue.js) code in a server environment, producing an HTML document. Users immediately get the content of our application, contrary to client-side rendering. This step is similar to traditional **server-side rendering** performed by PHP or Ruby applications. When the browser requests a URL with universal (client-side + server-side) rendering enabled, the server returns a fully rendered HTML page to the browser. Whether the page has been generated in advance and cached or is rendered on the fly, at some point, Nuxt has run the JavaScript (Vue.js) code in a server environment, producing an HTML document. Users immediately get the content of our application, contrary to client-side rendering. This step is similar to traditional **server-side rendering** performed by PHP or Ruby applications.
To not lose the benefits of the client-side rendering method, such as dynamic interfaces and pages transitions, the Client loads the javascript code that runs on the Server in the background once the HTML document has been downloaded. It is interpreted again by the browser (hence **Universal rendering**) and Vue.js takes control of the document and enables interactivity. To not lose the benefits of the client-side rendering method, such as dynamic interfaces and pages transitions, the Client loads the javascript code that runs on the Server in the background once the HTML document has been downloaded. The browser interprets it again (hence **Universal rendering**) and Vue.js takes control of the document and enables interactivity.
Making a static page interactive in the browser is called "Hydration." Making a static page interactive in the browser is called "Hydration."
@ -47,7 +47,7 @@ Universal rendering allows a Nuxt application to provide quick page load times w
### Cons ### Cons
- **Development constraints:** Server and browser environments don't provide the same APIs, and it can be tricky to write code that can run on both sides seamlessly. Fortunately, Nuxt provides guidelines and specific variables to help you determine where a piece of code is executed. - **Development constraints:** Server and browser environments don't provide the same APIs, and it can be tricky to write code that can run on both sides seamlessly. Fortunately, Nuxt provides guidelines and specific variables to help you determine where a piece of code is executed.
- **Cost:** In order to render pages on the fly, a server needs to run. This adds a monthly cost like any traditional server. However, the server calls are highly reduced thanks to universal rendering with the browser taking over on client-side navigation. - **Cost:** A server needs to run to render pages on the fly. This adds a monthly cost like any traditional server. However, the server calls are highly reduced thanks to universal rendering with the browser taking over on client-side navigation.
### Examples ### Examples

7
docs/content/2.guide/1.concepts/4.auto-imports.md
View File

@ -6,10 +6,7 @@ Contrary to a classic global declaration, Nuxt preserves typings and IDEs comple
::alert{type=info icon=💡} ::alert{type=info icon=💡}
In the documentation, every function that is not explicitly imported is auto-imported by Nuxt and can be used as-is in your code. In the documentation, every function that is not explicitly imported is auto-imported by Nuxt and can be used as-is in your code.
:: You can find a reference of auto-imported [composables](/api/composables/) and [utilities](/api/utils/) in the API section.
::alert{type=info icon=🚧}
We are working on a proper API reference that will include every Nuxt auto-imports. For now, you can find a reference on the framework repository in [presets.ts](https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/auto-imports/presets.ts)
:: ::
::alert{type=warning} ::alert{type=warning}
@ -48,7 +45,7 @@ Nuxt directly auto-imports files created in defined directories:
## Explicit imports ## Explicit imports
Every Nuxt auto-import is exposed by the `#imports` alias that can be used to make the import explicit if needed: Nuxt exposes every auto-import with the `#imports` alias that can be used to make the import explicit if needed:
```vue ```vue
<script setup> <script setup>

14
docs/content/2.guide/1.concepts/4.server-engine.md
View File

@ -5,12 +5,12 @@ Nuxt 3 is powered by a new server engine, code-named "Nitro".
This engine has many benefits: This engine has many benefits:
::list ::list
- Cross-platform support for Node.js, Browsers, service-workers and more - Cross-platform support for Node.js, Browsers, service-workers and more.
- Serverless support out-of-the-box - Serverless support out-of-the-box.
- API routes support - API routes support.
- Automatic code-splitting and async-loaded chunks - Automatic code-splitting and async-loaded chunks.
- Hybrid mode for static + serverless sites - Hybrid mode for static + serverless sites.
- Development server with hot module reloading - Development server with hot module reloading.
:: ::
## API Layer ## API Layer
@ -54,7 +54,7 @@ The server in Nuxt 2 is not standalone, but requires part of Nuxt core to be inv
Nuxt 3 generates this dist when running `nuxt build` into a [`.output`](/guide/directory-structure/output) directory. Nuxt 3 generates this dist when running `nuxt build` into a [`.output`](/guide/directory-structure/output) directory.
The output is combined with both runtime code to run your Nuxt server in any environment (including experimental browser Service Workers!) and serve you static files, making it a true hybrid framework for the JAMstack. In addition, a native storage layer is implemented, supporting multi source, drivers and local assets. The output is combined with both runtime code to run your Nuxt server in any environment (including experimental browser Service Workers!) and serve your static files, making it a true hybrid framework for the JAMstack. In addition, Nuxt implements a native storage layer, supporting multi source, drivers and local assets.
::alert{type="info" icon=IconCode} ::alert{type="info" icon=IconCode}
Checkout the Nitro engine on GitHub: [framework/packages/nitro](https://github.com/nuxt/framework/tree/main/packages/nitro) Checkout the Nitro engine on GitHub: [framework/packages/nitro](https://github.com/nuxt/framework/tree/main/packages/nitro)