From 48775caa2db1c5adb87d69f75de6d0d7b8d7e9a9 Mon Sep 17 00:00:00 2001 From: Tristan Lee Date: Thu, 30 Nov 2023 11:09:45 -0500 Subject: [PATCH] Make page SSR and add request flow description --- .../v7-ef-cloud-fetch/edge-functions/index.js | 14 +- examples/v7-ef-cloud-fetch/package-lock.json | 120 +++++++++++++++ examples/v7-ef-cloud-fetch/routes.ts | 2 +- .../src/app/edge-override/page.tsx | 13 +- examples/v7-ef-cloud-fetch/src/app/page.tsx | 141 +++++------------- examples/v7-ef-cloud-fetch/tsconfig.json | 8 +- 6 files changed, 178 insertions(+), 120 deletions(-) diff --git a/examples/v7-ef-cloud-fetch/edge-functions/index.js b/examples/v7-ef-cloud-fetch/edge-functions/index.js index 2c99d9be1..9ea06b72a 100644 --- a/examples/v7-ef-cloud-fetch/edge-functions/index.js +++ b/examples/v7-ef-cloud-fetch/edge-functions/index.js @@ -6,13 +6,7 @@ export async function handleHttpRequest(request) { : undefined; // Perform a fetch request to the original request URL with the same method, headers, and body. - // Specify the 'edgio_serverless' as the origin to fetch the original Cloud Functions response. - console.log('fetch', { - url: request.url, - method: request.method, - headers: request.headers, - body: requestBody, - }); + // Specify 'edgio_serverless' as the origin to fetch the original Cloud Functions response. const cloudFunctionsResponse = await fetch(request.url, { edgio: { origin: 'edgio_serverless' }, method: request.method, @@ -23,9 +17,9 @@ export async function handleHttpRequest(request) { // Convert the response to text format. let responseText = await cloudFunctionsResponse.text(); - // Replace certain phrases in the response text to indicate processing by Edge Functions. - responseText = responseText.replace(/cloud functions/i, 'Edge Functions'); - responseText = responseText.replace(/rendered by/i, 'changed by'); + // // Replace certain phrases in the response text to indicate processing by Edge Functions. + responseText = responseText.replace(/cloud functions/gi, 'Edge Functions'); + responseText = responseText.replace(/rendered by/gi, 'changed by'); // Return a new response with the modified text and original response status, status text, and headers. return new Response(responseText, { diff --git a/examples/v7-ef-cloud-fetch/package-lock.json b/examples/v7-ef-cloud-fetch/package-lock.json index ded273227..5201da2b8 100644 --- a/examples/v7-ef-cloud-fetch/package-lock.json +++ b/examples/v7-ef-cloud-fetch/package-lock.json @@ -19867,6 +19867,126 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.2.tgz", + "integrity": "sha512-zRCAO0d2hW6gBEa4wJaLn+gY8qtIqD3gYd9NjruuN98OCI6YyelmhWVVLlREjS7RYrm9OUQIp/iVJFeB6kP1hg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.2.tgz", + "integrity": "sha512-tSJmiaon8YaKsVhi7GgRizZoV0N1Sx5+i+hFTrCKKQN7s3tuqW0Rov+RYdPhAv/pJl4qiG+XfSX4eJXqpNg3dA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.2.tgz", + "integrity": "sha512-dXJLMSEOwqJKcag1BeX1C+ekdPPJ9yXbWIt3nAadhbLx5CjACoB2NQj9Xcqu2tmdr5L6m34fR+fjGPs+ZVPLzA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.2.tgz", + "integrity": "sha512-WC9KAPSowj6as76P3vf1J3mf2QTm3Wv3FBzQi7UJ+dxWjK3MhHVWsWUo24AnmHx9qDcEtHM58okgZkXVqeLB+Q==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.2.tgz", + "integrity": "sha512-KSSAwvUcjtdZY4zJFa2f5VNJIwuEVnOSlqYqbQIawREJA+gUI6egeiRu290pXioQXnQHYYdXmnVNZ4M+VMB7KQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.2.tgz", + "integrity": "sha512-2/O0F1SqJ0bD3zqNuYge0ok7OEWCQwk55RPheDYD0va5ij7kYwrFkq5ycCRN0TLjLfxSF6xI5NM6nC5ux7svEQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.2.tgz", + "integrity": "sha512-vJI/x70Id0oN4Bq/R6byBqV1/NS5Dl31zC+lowO8SDu1fHmUxoAdILZR5X/sKbiJpuvKcCrwbYgJU8FF/Gh50Q==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.2.tgz", + "integrity": "sha512-Ut4LXIUvC5m8pHTe2j0vq/YDnTEyq6RSR9vHYPqnELrDapPhLNz9Od/L5Ow3J8RNDWpEnfCiQXuVdfjlNEJ7ug==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } } } } diff --git a/examples/v7-ef-cloud-fetch/routes.ts b/examples/v7-ef-cloud-fetch/routes.ts index 16c1330cd..5c8d3204f 100644 --- a/examples/v7-ef-cloud-fetch/routes.ts +++ b/examples/v7-ef-cloud-fetch/routes.ts @@ -7,5 +7,5 @@ export default new Router() // NextRoutes automatically adds routes for all Next.js pages and their assets .use(nextRoutes) .match('/edge-override', { - edge_function: 'edge-functions/index.js', + edge_function: './edge-functions/index.js', }); diff --git a/examples/v7-ef-cloud-fetch/src/app/edge-override/page.tsx b/examples/v7-ef-cloud-fetch/src/app/edge-override/page.tsx index fea031041..41b821da5 100644 --- a/examples/v7-ef-cloud-fetch/src/app/edge-override/page.tsx +++ b/examples/v7-ef-cloud-fetch/src/app/edge-override/page.tsx @@ -1,4 +1,10 @@ -const EdgioCloudFunctionsPage = () => { +import { headers } from 'next/headers'; + +export default async function EdgioCloudFunctionsPage() { + // add in reference to headers() to force this page to be server-side rendered + const headersList = headers(); + const referer = headersList.get('referer'); + return (
{

Edgio Cloud Functions

This page was rendered by Edgio Cloud Functions.

+
Referer: {referer}
); -}; - -export default EdgioCloudFunctionsPage; +} diff --git a/examples/v7-ef-cloud-fetch/src/app/page.tsx b/examples/v7-ef-cloud-fetch/src/app/page.tsx index b97326626..cd302be27 100644 --- a/examples/v7-ef-cloud-fetch/src/app/page.tsx +++ b/examples/v7-ef-cloud-fetch/src/app/page.tsx @@ -1,113 +1,46 @@ -import Image from 'next/image' - export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.tsx +

+
+

+ Welcome! This page demonstrates how Edgio Edge Functions can be used + with Next.js to modify cloud function responses at the edge. By + visiting the link below, the following request flow will occur:

- -
- -
- Next.js Logo -
- -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Explore starter templates for Next.js. -

- - +
    +
  1. + The browser will request the page{' '} + /edge-override. +
    2. +
  2. + Edgio will match this request as defined in the{' '} + routes.ts file and + process it through{' '} + + ./edge-functions/index.js + + . +
    3. +
  3. + The edge function will request the page from the Next.js server + cloud function. +
    4. +
  4. + The Next.js server will render the page and respond to the edge + function. +
    5. +
  5. + The edge function will modify the response and send it to the + browser. +
    6. +
-

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

+ Go to Edge Override
- ) + ); } diff --git a/examples/v7-ef-cloud-fetch/tsconfig.json b/examples/v7-ef-cloud-fetch/tsconfig.json index e59724b28..041b056d3 100644 --- a/examples/v7-ef-cloud-fetch/tsconfig.json +++ b/examples/v7-ef-cloud-fetch/tsconfig.json @@ -22,6 +22,12 @@ "@/*": ["./src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + "edge-functions/index.js" + ], "exclude": ["node_modules"] }