NUXT IN THE EDGE

@paul_melero

About myself

Paul Melero

Web Developer 
Github gangsthub
Twitter @paul_melero
Web graficos.net
Vue Dose vuedose.tips

Agriculture Eng. ๐ŸŒต

What's the Edge

A brief story about infraestructure

F5

F5

F5

F5

Managed by 3rd parties

VPS, Containers...

The Cloud was born

Cloud Benefits

  • Better security
  • Recoverability
  • Lower costs
  • Less responsibility

ฦ’(state) + ฦ’(state) + ... = app

Things that changed

  • How we organize the code
  • How teams organize
  • How we deploy the code
  • How the code runs

Serverless

Serverless Benefits

  • Lower costsย 
  • Simplified scalabilityย 
  • Simplified backend code
  • Quicker deployments

Huge evolution milestone

Single region!

us-east1-b

ย goes down

us-east1-b

Enters the edge

ฦ’()

ฦ’()

ฦ’()

ฦ’()

ฦ’()

ฦ’()

Enters the edge

Edge Benefits

  • Lower costsย 
  • Also automatically scalable
  • Deploys globally, low latency
  • Zero cold-start time, better performance (??)
  • Distributed storage

Zero cold-start time

V8 isolates (secure)

Use cases

  • Low latency is important: self-driving cars, games, highly competitive markets
  • Personalization, regional targeting for e-commerce
  • A/B testing
  • Access prevention by location
  • Google Maps example, would show initially the country you visit from

Barcelona

Speed

Comparison with Lambdas

Just as fast?

Edge providers

  • Netlify Edge Functions

  • Akamai Workers

  • Cloudflare Workers

  • Layer0

  • Lambda@edge
  • other CDN companies...?

Nuxt default presets

Nuxt default presets

Demo!

Closest Point of Presence (POP)ย 

import { IpApiResponse } from '~~/types';

export default defineEventHandler(async () => {
  const key = useRuntimeConfig().API_TOKEN;
  const data: IpApiResponse = await $fetch(
    `https://pro.ip-api.com/json/?key=${key}`
  );
  return data;
});
/server/api/location.ts
import type { Ref } from 'vue';
import type { IpApiResponse } from '@/types';

export const useLocation = () => {
  const location: Ref<IpApiResponse> = ref();
  watchEffect(async () => {
    location.value = await $fetch(`/api/location`);
  });
  return location;
};
/composables/location.ts
<script setup lang="ts">
// Location
const location = useLocation();

</script>
/app.vue
name = "nuxt-edge-test"
type = "javascript"
account_id = "81bb9e915adce027f7f72b700da03532"
workers_dev = true
route = ""
zone_id = ""
compatibility_date = "2022-04-07"

[site]
bucket = ".output/public"
entry-point = ".output"

[build]
command = ""

[build.upload]
format = "service-worker"
/wrangler.toml

About localization

import type { Ref } from 'vue';

export const useLang: () => Ref<string> = () => {
  if (process.client) {
    return ref(navigator.language);
  }

  const parseLangString: (languages: string) => string = (languages) => {
    return languages.split(',')[0];
  };
  const nuxt = useNuxtApp();
  const lang: string = parseLangString(
    nuxt.ssrContext.event.req.headers['accept-language']
  );
  return ref(lang);
};
/composables/lang.ts

Thank you very much!

๐Ÿ’š๐Ÿ’š๐Ÿ’š๐Ÿ’š๐Ÿ’š๐Ÿ’š๐Ÿ’š

Nuxt on the edge

By Paul Melero

Nuxt on the edge

Making your application be served from the edge of the cloud is easier thanks to Nuxt DX.

  • 644