Do not understand Functions

We are reading this and trying Functions. But there is so much written and we don’t understand this. We want to know about simpler examples.
https://developers.cloudflare.com/pages/platform/functions/

├── ...
├── functions
|   └── api
│       └── test.js
└── ...

When we access it from our browser, it returns the response we expect.
https://XXXXXX.pages.dev/api/test

But we don’t know how to use that value from Pages.
We tried to get the value of functions in axios from asyncData as follows.

<template>
  <div>{{ test }}</div>
</template>

<script>
export default {
  name: 'TestFunctions',
  async asyncData({ route, params, $axios }) {
    const test = await axios.get('/api/time')
    return { test }
  },
}
</script>

We just want to get the Functions values from Pages. Can you give us a simple example? Also we were suggested to use functions in a case where a project with over 1000 Pages failed to deploy. We think that if we use this method the number of pages will not decrease. Is our response different from what you suggested?

Hey. So yeah, a couple of things.

First, it looks like you’re using asyncData on the client to fetch, which is correct. Your problem there is that axios returns the response data in test.data. In your example, you need to return {test: test.data} and then you can access using templating.

Next, Functions can be made to serve multiple pages at once. For example, if you have 1000 pages each with a slightly different response, you can have a single function that takes the URL as input, does processing (for example, using a serverless database or similar) and returns based on that. Since there’s only 1 function, it’s much easier to deploy.

If you clarify your use-case with the 1000 pages (are they different? The same page? How are you generating them?) I can give you a better example of how Functions would work for you.

3 Likes

Hello, @mcfadyeni!
Thank you for your reply.

We understand that, of course. It is our copy-and-paste error. That is not our problem.

This is a service from another company, is this similar to Netlify Functions?

Our Pages display data by city, with the URL containing either the name or code of the city.

If we understand correctly, when a user accesses Pages containing a city code, it accesses Functions containing the city code, which returns the city data to Pages and draws it. In this case, in which mode should NuxtJS operate, SPA, SSR, or SSG?

So you have two options there.

First is to run NuxtJS in SPA mode and fetch on client-side with something like axios, which you are doing.

Your second option is to run Functions and use HTMLRewriter. The documentation is available here but essentially your Function would fetch the static page, get the user’s city code, then rewrite the HTML to contain the user’s city code. The disadvantage of this approach is that it’s harder if you have more content to rewrite (more content that changes based on country).

Considering you’re already using Nuxt.JS, I’d simply run it in SPA mode and fetch the data from a Function. When Nuxt.JS is run in SPA mode you don’t have a seperate page to deploy, only 1 HTML file, which would fix some of your deployment issues.

I understand. Thanks. We don’t know about HTMLRewriter, will try to learn about it.

So if we use Nuxt.js in SPA mode we can still use Functions. That is probably what we want to do. That method is expected to take longer to render, but it would be better than not displaying the correct information.

We found the cause of our problem.
We had moved asyncData() from pages to component during our various tests. So asyncData() was not being called, a problem that had nothing to do with Cloudflare or Functions and was caused by us. Sorry about that. :sweat_smile:

2 Likes