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

Zero cold-start time

Image credit

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

link

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

link

Demo!

Demo
Source

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;
}); 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;
}); 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;
}); 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;
}); 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;
}; 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;
}; 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;
}; 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;
}; 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" 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" 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" 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

link

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);
}; 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);
}; 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);
}; 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);
}; 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);
}; 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);
}; 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

NUXT IN THE EDGE

About myself

What's the Edge

A brief story about infraestructure

The Cloud was born

Cloud Benefits

ƒ(state) + ƒ(state) + ... = app

Things that changed

Serverless

Serverless Benefits

Huge evolution milestone

Single region!

goes down

Enters the edge

ƒ()

ƒ()

ƒ()

ƒ()

ƒ()

ƒ()

Enters the edge

Edge Benefits

Zero cold-start time

Use cases

Barcelona

Speed

Comparison with Lambdas

Just as fast?

Edge providers

Nuxt default presets

Nuxt default presets

Demo!

About localization

Thank you very much!

🦜 @paul_melero

💚💚💚💚💚💚💚

	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;
	});

	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;
	};

	<script setup lang="ts">
	// Location
	const location = useLocation();

	</script>

	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"

	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);
	};