Paul Melero
Web Developer
NUXT IN THE EDGE
@paul_melero
About myself
Paul Melero
Web Developer
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.
