diff --git a/docs/2.guide/1.concepts/3.rendering.md b/docs/2.guide/1.concepts/3.rendering.md index 1888a09e2d5e..fc7c1334b87c 100644 --- a/docs/2.guide/1.concepts/3.rendering.md +++ b/docs/2.guide/1.concepts/3.rendering.md @@ -11,24 +11,24 @@ Nuxt поддерживает разные режимы рендеринга: [ ## Универсальный Рендеринг -This step is similar to traditional **server-side rendering** performed by PHP or Ruby applications. When the browser requests a URL with universal rendering enabled, Nuxt runs the JavaScript (Vue.js) code in a server environment and returns a fully rendered HTML page to the browser. Nuxt may also return a fully rendered HTML page from a cache if the page was generated in advance. Users immediately get the entirety of the initial content of the application, contrary to client-side rendering. +Этот шаг аналогичен традиционному **рендерингу на сервере**, выполняемому приложениями PHP или Ruby. Когда браузер запрашивает URL-адрес с включенным универсальным рендерингом, Nuxt выполняет код JavaScript (Vue.js) в серверной среде и возвращает браузеру полностью отрендеренную HTML-страницу. Nuxt также может вернуть полностью отрендеренную HTML-страницу из кэша, если она была сгенерирована заранее. Пользователи сразу получают контент нашего приложения, в отличие от рендеринга на клиенте. -Once the HTML document has been downloaded, the browser interprets this and Vue.js takes control of the document. The same JavaScript code that once ran on the server runs on the client (browser) **again** in the background now enabling interactivity (hence **Universal rendering**) by binding its listeners to the HTML. This is called **Hydration**. When hydration is complete, the page can enjoy benefits such as dynamic interfaces and page transitions. +После загрузки HTML-документа браузер интерпретирует его, и Vue.js берет управление документом на себя. Тот же самый JavaScript-код, который когда-то выполнялся на сервере, запускается на клиенте (браузере) **снова** в фоновом режиме, теперь обеспечивая интерактивность (отсюда **Универсальный рендеринг**) путем привязки своих слушателей к HTML. Это называется **Гидратация**. Когда гидратация завершена, страница может пользоваться такими преимуществами, как динамические интерфейсы и переходы между страницами. Универсальный рендеринг позволяет Nuxt-приложению обеспечить быструю загрузку страницы, сохраняя при этом преимущества рендеринга на клиенте. Более того, поскольку контент уже присутствует в HTML-документе, поисковые роботы могут индексировать его без дополнительных затрат.  -**What's server-rendered and what's client-rendered?** +**Что такое серверный рендеринг и что такое клиентский рендеринг?** -It is normal to ask which parts of a Vue file runs on the server and/or the client in universal rendering mode. +Обычно спрашивают, какие части файла Vue работают на сервере и/или клиенте в универсальном режиме рендеринга. ```vue [app.vue] @@ -40,13 +40,13 @@ const handleClick = () => { ``` -On the initial request, the `counter` ref is initialized in the server since it is rendered inside the `
` tag. The contents of `handleClick` is never executed here. During hydration in the browser, the `counter` ref is re-initialized. The `handleClick` finally binds itself to the button; Therefore it is reasonable to deduce that the body of `handleClick` will always run in a browser environment. +При первом запросе `counter` ref инициализируется на сервере, поскольку она отображается внутри тега `
`. Содержимое `handleClick` здесь никогда не выполняется. Во время гидратации в браузере `counter` ref инициализируется заново. Наконец, `handleClick` привязывает себя к кнопке; поэтому разумно делать вывод, что тело `handleClick` всегда будет выполняться в среде браузера. -[Middlewares](/docs/guide/directory-structure/middleware) and [pages](/docs/guide/directory-structure/pages) run in the server and on the client during hydration. [Plugins](/docs/guide/directory-structure/plugins) can be rendered on the server or client or both. [Components](/docs/guide/directory-structure/components) can be forced to run on the client only as well. [Composables](/docs/guide/directory-structure/composables) and [utilities](/docs/guide/directory-structure/utils) are rendered based on the context of their usage. +[Middlewares](/docs/guide/directory-structure/middleware) и [страницы](/docs/guide/directory-structure/pages) запускаются на сервере и на клиенте во время гидрации. [Плагины](/docs/guide/directory-structure/plugins) могут быть отрендерены как на сервере, так и на клиенте. [Компоненты](/docs/guide/directory-structure/components) можно заставить работать только на клиенте. [Композаблы](/docs/guide/directory-structure/composables) и [утилиты](/docs/guide/directory-structure/utils) рендерятся в зависимости от контекста их использования. -**Benefits of server-side rendering:** -- **Performance**: Users can get immediate access to the page's content because browsers can display static content much faster than JavaScript-generated content. At the same time, Nuxt preserves the interactivity of a web application during the hydration process. -- **Search Engine Optimization**: Universal rendering delivers the entire HTML content of the page to the browser as a classic server application. Web crawlers can directly index the page's content, which makes Universal rendering a great choice for any content that you want to index quickly. +**Преимущества рендеринга на сервера:** +- **Производительность**: Пользователи получают немедленный доступ к содержимому страницы, поскольку браузеры могут отображать статическое содержимое гораздо быстрее, чем содержимое, созданное на JavaScript. В то же время Nuxt сохраняет интерактивность веб-приложения во время процесса гидратации. +- **Оптимизация поисковых систем**: Универсальный рендеринг доставляет все HTML-содержимое страницы в браузер как классическое серверное приложение. Веб-краулеры могут напрямую индексировать содержимое страницы, что делает универсальный рендеринг отличным выбором для любого контента, который вы хотите быстро проиндексировать. **Недостатки рендеринга на сервере:** - **Ограничения разработки:** Среды сервера и браузера не предоставляют одни и те же API, и может быть сложно написать код, который мог бы беспрепятственно выполняться на обеих сторонах. К счастью, Nuxt предоставляет рекомендации и специальные переменные, которые помогут вам определить, где выполняется фрагмент кода. diff --git a/docs/2.guide/2.directory-structure/3.app-config.md b/docs/2.guide/2.directory-structure/3.app-config.md index 7e6f94daf6a4..31e1f478c071 100644 --- a/docs/2.guide/2.directory-structure/3.app-config.md +++ b/docs/2.guide/2.directory-structure/3.app-config.md @@ -20,7 +20,7 @@ export default defineAppConfig({ :: ::note -When configuring a custom [`srcDir`](/docs/api/nuxt-config#srcdir), make sure to place the `app.config` file at the root of the new `srcDir` path. +При настройке пользовательского [`srcDir`](/docs/api/nuxt-config#srcdir) убедитесь, что файл `app.config` помещен в корень нового пути `srcDir`. :: ## Использование @@ -35,7 +35,7 @@ export default defineAppConfig({ }) ``` -We can now universally access `theme` both when server-rendering the page and in the browser using [`useAppConfig`](/docs/api/composables/use-app-config) composable. +Теперь мы можем получить универсальный доступ к `theme` как при рендеринге страницы на сервере, так и в браузере, используя композабл [`useAppConfig`](/docs/api/composables/use-app-config). ```vue [pages/index.vue] ``` -The [`updateAppConfig`](/docs/api/utils/update-app-config) utility can be used to update the `app.config` at runtime. +Утилита [`updateAppConfig`](/docs/api/utils/update-app-config) может быть использована для обновления `app.config` в рантайме. ```vue [pages/index.vue] ``` -If you want to customize the type of any error returned, you can also do so: +Если вы хотите настроить тип возвращаемой ошибки, вы также можете это сделать: ```ts import type { FetchError } from 'ofetch'