Skip to content

Commit

Permalink
feat(docs) Добавлен перевод Nuxt on the Edge (#81)
Browse files Browse the repository at this point in the history
* feat(docs) Добавлен перевод Nuxt on the Edge

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

Co-authored-by: Alex Peshkov <[email protected]>

---------

Co-authored-by: Ivan Bochkarev <[email protected]>
Co-authored-by: Alex Peshkov <[email protected]>
  • Loading branch information
3 people authored Sep 13, 2024
1 parent 2bdd1a2 commit c40f37d
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 35 deletions.
2 changes: 1 addition & 1 deletion content/3.deploy/cloudflare.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ website: 'https://pages.cloudflare.com/'
::

::important
Checkout the [@nuxthub/core](/modules/hub) module to build full-stack Nuxt applications with Cloudflare, learn more on [hub.nuxt.com](https://hub.nuxt.com).
Ознакомьтесь с модулем [@nuxthub/core](/modules/hub) для создания полнофункциональных Nuxt-приложений с использованием Cloudflare. Узнайте больше на [hub.nuxt.com](https://hub.nuxt.com).
::

### Интеграция с Git
Expand Down
68 changes: 34 additions & 34 deletions content/7.blog/14.nuxt-on-the-edge.md
Original file line number Diff line number Diff line change
@@ -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 на Edge'
description: "Узнайте, как мы сделали Nuxt 3 способным работать на edge-рантаймах для серверного рендеринга ближе к вашим пользователям."
image: /assets/blog/nuxt-on-the-edge.png
authors:
- name: Себастьян Шопен
Expand All @@ -11,56 +11,57 @@ 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 на их [сети Edge](https://www.cloudflare.com/network/). Это означает, что ваш код будет развернут на всей сети Edge в более чем ста локациях по всему миру примерно за 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. До сих пор, что вы могли запускать на их платформе, были небольшие скрипты, выполняющиеся на Edge перед обращением к вашему серверу для повышения производительности или добавления некоторой логики на основе заголовков запроса, например.

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 в продакшене на edge-рантаймах / изоляциях 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 на Edge, на вашем аккаунте Cloudflare с нулевой конфигурацией. Он включает в себя базу данных, хранилище больших двоичных объектов, 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 на Edge: размер продакшен бандла. Это включает в себя сервер, Vue-приложение и зависимости Node.js вместе. Cloudflare workers в настоящее время имеют лимит в 1MB (бесплатный план) и 5MB ($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 составляет около 700kB 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 (Edge runtime), мы создали [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 мы верим, что вы должны иметь свободу выбора провайдера хостинга, который подходит вам лучше всего.**

Вот почему вы можете развернуть Nuxt-приложение с рендерингом на стороне Edge на:

This is why you can deploy a Nuxt application with edge-side rendering on:
- [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
## Расширение возможностей полнофункциональных приложений

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, работающий на Edge runtime, мы можем делать больше, чем просто рендерить Vue-приложение. Благодаря [директории сервера](/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) => {
Expand All @@ -70,8 +71,7 @@ export default defineEventHandler((event) => {
})
```

You can now universally call this API in your pages and components:

Теперь вы можете универсально вызывать этот API в ваших страницах и компонентах:

```vue [pages/index.vue]
<script setup>
Expand All @@ -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 поддерживает Hot Module Replacement (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.
Более того, используя Object Relational Mapping (ORM) вроде [drizzle-orm](https://orm.drizzle.team/), разработчики могут подключать Edge & Serverless базы данных, такие как [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).
Я создал [Atidone](https://todos.nuxt.dev/), открытый демонстрационный проект, чтобы продемонстрировать полнофункциональное приложение с аутентификацией и базой данных, работающее на Edge. Исходный код доступен на 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!
Мы в восторге от рендеринга на стороне Edge и того, что он открывает. Наша команда в 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, чтобы поделиться своей работой.

0 comments on commit c40f37d

Please sign in to comment.