Merge remote-tracking branch 'origin/main'

# Conflicts:
#	content/7.blog/14.nuxt-on-the-edge.md

content/7.blog/14.nuxt-on-the-edge.md

@@ -1,6 +1,6 @@
 ---
-title: 'Nuxt on the Edge'
-description: "Learn how we made Nuxt 3 capable of running on edge runtimes to run with server-side rendering close to your users."
+title: 'Nuxt в периферийных средах'
+description: "Узнайте, как мы сделали Nuxt 3 способным работать в периферийных средах выполнения, чтобы обеспечить рендеринг на стороне сервера рядом с вашими пользователями."
 image: /assets/blog/nuxt-on-the-edge.png
 authors:
   - name: Себастьян Шопен
@@ -11,66 +11,66 @@ date: 2023-07-13
 category: Статья
 ---
 
-## Introduction
+## Введение
 
-In September 2017, Cloudflare [introduced Cloudflare Workers](https://blog.cloudflare.com/introducing-cloudflare-workers/), giving the ability to run JavaScript on their [edge network](https://www.cloudflare.com/network/). This means your code will deploy on the entire edge network in over a hundred locations worldwide in about 30 seconds. This technology allows you to focus on writing your application close to your users, wherever they are in the world (~50ms latency).
+В сентябре 2017 года Cloudflare [представила Cloudflare Workers](https://blog.cloudflare.com/introducing-cloudflare-workers/), что дает возможность запускать JavaScript в их [периферийной сети](https://www.cloudflare.com/network/). Это означает, что ваш код будет развернут во всей периферийной сети в более чем ста местах по всему миру примерно за 30 секунд. Эта технология позволяет вам сосредоточиться на написании приложения рядом с вашими пользователями, где бы они ни находились в мире (задержка ~50 мс).
 
-The worker's runtime is not the same as Node.js or the Browser, it executes the code using V8, the JavaScript engine developed by Google Chrome. Until now, what you could run on their platform were small scripts running on the edge before hitting your server to increase the performance or add some logic based on request headers, for example.
+Среда выполнения воркера отличается от Node.js или браузера, он выполняет код с помощью V8, движка JavaScript, разработанного Google Chrome. До сих пор на их платформе можно было запускать только небольшие скрипты, запускаемые на периферии перед подключением к вашему серверу, например, для повышения производительности или добавления некоторой логики, основанной на заголовках запросов.
 
-In November 2020, while working on Nuxt 3, **we made the bet to run Nuxt in-production on edge runtimes / V8 isolates**.
+В ноябре 2020 года, работая над Nuxt 3, **мы сделали ставку на запуск Nuxt в продакшен-среде на периферийных средах выполнения/V8-изолятах**.
 
-It unlocks the ability to server-render pages in ~50ms from all over the world when using a platform like CloudFlare Workers, without having to deal with servers, load balancers and caching, for about [$0.3 per million requests](https://developers.cloudflare.com/workers/platform/pricing/). As of today, new platforms are coming to let run apps on V8 isolates such as Deno Deploy.
+Он открывает возможность серверного рендеринга страниц примерно за 50 мс из любой точки мира при использовании платформы вроде CloudFlare Workers, без необходимости иметь дело с серверами, балансировщиками нагрузки и кэшированием, примерно за [0,3 доллара за миллион запросов](https://developers.cloudflare.com/workers/platform/pricing/). На сегодняшний день появляются новые платформы, позволяющие запускать приложения на изолятах V8, например Deno Deploy.
 
 ::callout{icon="i-ph-info-duotone" color="blue"}
-**2024 update:** I released [NuxtHub](https://hub.nuxt.com) to let you build full-stack applications with Nuxt on the edge, on your Cloudflare account with zero configuration. It includes a database, blob storage, KV, remote storage and more.
+**Обновление 2024 года:** Я выпустил [NuxtHub](https://hub.nuxt.com), чтобы вы могли создавать полнофункциональные приложения с Nuxt на периферии, в вашей учетной записи Cloudflare с нулевой конфигурацией. Он включает в себя базу данных, хранилище BLOB-объектов, KV, удаленное хранилище и многое другое.
 ::
 
-## The Challenge
+## Испытание
 
-In order to make Nuxt run in workers, we had to rewrite some parts of Nuxt to be environmentally agnostic (runs in Node.js, Browser or V8).
+Чтобы Nuxt работал в воркерах, нам пришлось переписать некоторые части Nuxt, сделав их независимыми от среды (работающими в Node.js, браузере или V8).
 
-We started with our server and created [unjs/h3](http://github.com/unjs/h3): a minimal http framework built for high performance and portability. It replaces [Connect](https://github.com/senchalabs/connect) we used in Nuxt 2 but has compatibility with it so you can keep using Connect/Express middleware. In the workers, for each incoming request, it starts Nuxt in production, sends the request to it and sends back the response.
+Мы начали с нашего сервера и создали [unjs/h3](http://github.com/unjs/h3): минимальный http-фреймворк, созданный для высокой производительности и переносимости. Он заменяет [Connect](https://github.com/senchalabs/connect), который мы использовали в Nuxt 2, но совместим с ним, поэтому вы можете продолжать использовать middleware Connect/Express. В воркерах для каждого входящего запроса он запускает Nuxt в продакшене, отправляет ему запрос и отправляет обратно ответ.
 
-In Nuxt 2, the duration to start the server in production in memory (also named cold start) was about ~300ms, because we had to load all the dependencies of your server and application in order to handle the request.
+В Nuxt 2 продолжительность запуска сервера в продакшен среде в памяти (также называемый холодным запуском) составляла около ~300 мс, поскольку для обработки запроса нам приходилось загружать все зависимости сервера и приложения.
 
-By working on h3, we decided to code-split each handler attached to the server and lazy-load them only when requested. When you start Nuxt 3, we only load h3 in memory and the corresponding handlers. When a request comes in, we load the handler corresponding to the route and execute it.
+Работая над h3, мы решили разделить код каждого обработчика, прикрепленного к серверу, и загружать их только по запросу. Когда вы запускаете Nuxt 3, мы загружаем в память только h3 и соответствующие обработчики. Когда поступает запрос, мы загружаем обработчик, соответствующий маршруту, и выполняем его.
 
 :video{src="https://res.cloudinary.com/nuxt/video/upload/v1689236511/nuxt3/nuxt3-server-performance.mp4" poster="https://res.cloudinary.com/nuxt/video/upload/v1689236511/nuxt3/nuxt3-server-performance.jpg" controls}
 
-By adopting this approach, **we reduced the cold start from ~300ms to ~2ms**.
+Применив этот подход, **мы сократили время холодного запуска с ~300 мс до ~2 мс**.
 
-We had another challenge in order to run Nuxt on the edge: the production bundle size. This includes the server, Vue app and Node.js dependencies combined. Cloudflare workers currently have a limit of 1MB (free plan) and 5MB ($5 per month plan) for the worker size.
+У нас была еще одна проблема, чтобы запустить Nuxt на периферии: размер продакшен-бандла. Он включает сервер, приложение Vue и зависимости Node.js. В настоящее время рабочие процессы Cloudflare имеют ограничение в 1 МБ (бесплатный план) и 5 ​​МБ (план за 5 долларов в месяц) для размера воркера.
 
-In order to achieve this, we created [unjs/nitro](https://nitro.unjs.io/), our server engine, when running the `nuxt build` command, it bundles your whole project and includes all dependencies into the final output. It uses [Rollup](https://rollupjs.org/) and [vercel/nft](https://github.com/vercel/nft) to trace only the code used by the `node_modules` to remove unnecessary code. **The total size of the generated output for a basic Nuxt 3 application is about 700kB gzip.**
+Чтобы добиться этого, мы создали [unjs/nitro](https://nitro.unjs.io/), наш серверный движок, при запуске команды `nuxt build` он объединяет весь ваш проект и включает все зависимости в конечный вывод. Он использует [Rollup](https://rollupjs.org/) и [vercel/nft](https://github.com/vercel/nft) для отслеживания кода, используемого `node_modules`, чтобы удалить ненужный код. **Общий размер сгенерированного вывода для базового приложения Nuxt 3 составляет около 700 КБ gzip.**
 
-Lastly, to provide the same developer experience between development (Node.js) and production on Cloudflare (Edge runtime), we created [unjs/unenv](https://github.com/unjs/unenv): a library to convert JavaScript code to run everywhere (platform agnostic) by mocking or adding polyfills for known dependencies.
+Наконец, чтобы обеспечить одинаковый опыт разработки между разработкой (Node.js) и продакшеном в Cloudflare (распределенная среда выполнения), мы создали [unjs/unenv](https://github.com/unjs/unenv): библиотеку для преобразования кода JavaScript для запуска в любом месте (независимо от платформы) путем имитации или добавления полифиллов для известных зависимостей.
 
-**At Nuxt, we believe that you should have the freedom to choose the hosting provider that fits you best.**
+**В Nuxt мы считаем, что у вас должна быть свобода выбора хостинг-провайдера, который подходит вам лучше всего.**
 
-This is why you can deploy a Nuxt application with edge-side rendering on:
+Вот почему вы можете развернуть приложение Nuxt с рендерингом на периферии на:
 - [NuxtHub](https://hub.nuxt.com)
 - [Cloudflare Page](https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages)
 - [Deno Deploy](https://nitro.unjs.io/deploy/providers/deno-deploy)
-- [Vercel Edge Functions](https://nitro.unjs.io/deploy/providers/vercel#vercel-edge-functions) (using CloudFlare Workers under the hood)
-- [Netlify Edge Functions](https://nitro.unjs.io/deploy/providers/netlify#netlify-edge-functions) (using Deno under the hood)
+- [Vercel Edge Functions](https://nitro.unjs.io/deploy/providers/vercel#vercel-edge-functions) (использует CloudFlare Workers под капотом)
+- [Netlify Edge Functions](https://nitro.unjs.io/deploy/providers/netlify#netlify-edge-functions) (использует Deno под капотом)
 
-We also support many other deployment providers, including [static hosting](/docs/getting-started/deployment#static-hosting) or [traditional Node.js serverless and server hosts](/docs/getting-started/deployment#nodejs-server).
+Мы также поддерживаем многих других поставщиков услуг развертывания, включая [статический хостинг](/docs/getting-started/deployment#static-hosting) или [традиционные бессерверные и серверные хосты Node.js](/docs/getting-started/deployment#nodejs-server).
 
-## Pushing Full-stack Capabilities
+## Расширение fullstack-возможностей
 
-Now that we have Nuxt running on edge runtime, we can do more than render a Vue application. Thanks to the [server directory](/docs/guide/directory-structure/server), creating an API route is a TypeScript file away.
+Теперь, когда у нас есть Nuxt, работающий в распределенном рантайме, мы можем сделать больше, чем просто отрисовать приложение Vue. Благодаря [директории server](/docs/guide/directory-structure/server), создание маршрута API — это файл TypeScript.
 
-To add the `/api/hello` route, create a `server/api/hello.ts` file:
+Чтобы добавить маршрут `/api/hello`, создайте файл `server/api/hello.ts`:
 
 ```ts [server/api/hello.ts]
 export default defineEventHandler((event) => {
   return {
-    hello: 'world'
+    hello: 'мир'
   }
 })
 ```
 
-You can now universally call this API in your pages and components:
+Теперь вы можете повсеместно вызывать этот API на своих страницах и в компонентах:
 
 
 ```vue [pages/index.vue]
@@ -83,16 +83,16 @@ const { data } = await useFetch('/api/hello')
 </template>
 ```
 
-One important thing to note when we created [useFetch](/docs/api/composables/use-fetch) and [$fetch](/docs/api/utils/dollarfetch) is that during server-side rendering, if you call your API routes, it will emulate the request and call the function code directly: **avoiding an HTTP request and reducing page’s rendering time**.
+Важно отметить одну вещь, которую мы учитывали при создании [useFetch](/docs/api/composables/use-fetch) и [$fetch](/docs/api/utils/dollarfetch), — это то, что во время рендеринга на стороне сервера, если вы вызываете маршруты API, он будет эмулировать запрос и вызывать код функции напрямую: **избегая HTTP-запроса и сокращая время рендеринга страницы**.
 
-In terms of developer experience, you will notice that when creating server files, the Nuxt server keeps running without rebuilding the Vue app. **This is because Nuxt 3 supports Hot Module Replacement (HMR) when creating API and server routes.**
+С точки зрения опыта разработчика, вы заметите, что при создании серверных файлов сервер Nuxt продолжает работать без пересборки приложения Vue. *** Это связано с тем, что Nuxt 3 поддерживает горячую замену модулей (HMR) при создании API и серверных маршрутов.**
 
-Furthermore, by leveraging Object Relational Mapping (ORM) like [drizzle-orm](https://orm.drizzle.team/), developers can connect Edge & Serverless databases such as [D1](https://developers.cloudflare.com/d1/), [Turso](https://turso.tech/), [Neon](https://neon.tech), [Planetscale](https://planetscale.com/) and more.
+Кроме того, используя объектно-реляционное отображение (ORM), такое как [drizzle-orm](https://orm.drizzle.team/), разработчики могут подключать периферийные и бессерверные базы данных, такие как [D1](https://developers.cloudflare.com/d1/), [Turso](https://turso.tech/), [Neon](https://neon.tech), [Planetscale](https://planetscale.com/) и другие.
 
-I created [Atidone](https://todos.nuxt.dev/), an open source demo to showcase a full-stack application with authentication and a database running on the edge. The source code is available on GitHub under the MIT license at [atinux/atidone](https://github.com/atinux/atidone).
+Я создал [Nuxt Todos Edge](https://nuxt-todos-edge.pages.dev/), демо-версию с открытым исходным кодом, чтобы продемонстрировать полнофункциональное приложение с аутентификацией и базой данных, работающей на периферийных серверах. Исходный код доступен на GitHub по лицензии MIT по адресу [atinux/atidone](https://github.com/atinux/atidone).
 
-## Conclusion
+## Заключение
 
-We are excited about edge-side rendering and what it unlocks. Our team at Nuxt can’t wait to see what you will build on top of this!
+Мы в восторге от рендеринга на распределенных серверах и от того, что он открывает. Наша команда в Nuxt с нетерпением ждет возможности увидеть, что вы построите на основе этого!
 
-Feel free to join our [Discord server](https://discord.com/invite/nuxt) or mention [@nuxt_js](https://twitter.com/nuxt_js) on Twitter to share your work.
+Не стесняйтесь присоединяться к нашему [серверу Discord](https://discord.com/invite/nuxt) или упоминать [@nuxt_js](https://twitter.com/nuxt_js) в Twitter, чтобы поделиться своей работой.