Loading Form...
Thank you
Jan 19, 2023 | 6 minute read
written by James Luterek
Edge computing takes the approach of a content delivery network (CDN) and applies it to code. Instead of taking static files and serving them from locations across the globe, edge networks take custom code through either functions or containers, deploy it across the network of edge locations, and ensures the closest copy is executed for each user.
This brings huge benefits with the most compelling being improved site speed and website performance. Bringing application logic closer to the end user allows applications to have lower latency and improved response times.Currently eCommerce implementations are deployed to one or at most a few cloud regions. This instance serves the entire region and is a large improvement from on prem implementations.
While companies may want to leverage more distinct regions the cost and complexity is prohibitive. Edge computing has redefined cloud deployments making 100’s to 1,000’s of distinct locations possible. This ensures a better experience and ultimately higher conversion rates.New Wave of Javascript FrameworksWhile JAMStack and other static-site techniques allowed Javascript frameworks to deploy content to a CDN, they were never a good fit for eCommerce. The need to create static files for each page meant product and inventory updates were delayed until the next build. In addition, dynamic content including carts and account sections were needed to be handled with an entirely different approach.
A new wave of Javascript frameworks instead leverage edge computing to bring the same benefit of moving content closer to the end-user, but instead of relying on prebuilding content, it can handle server-side rendering on the fly. They can also determine which code should be considered server-side and which should be executed directly in the browser.
This transitional approach allows for great performance on both content heavy pages and highly dynamic sections. With the addition of edge computing and these new transitional techniques, we get all of the benefits of JAMStack without the downside of having to rebuild static assets on a schedule.While frameworks including Svelte-Kit, Remix, Astro, and Solid provide significant buzz the existing and established players of Nuxt.js and Next.js have adopted these features. Any applications leveraging Next.js 12 and above, including the D2C Starter-Kit, can take advantage of the Next.js Edge runtime.More than ServerlessEdge computing shares a lot of similarities with Serverless computing. In fact AWS re-used the lambda branding, the pioneer of serverless computing, for their edge computing offering calling it lambda@edge.
While the major difference is how many locations your code is deployed to, with serverless defaulting to a single region and edge computing scaling to thousands of nodes, there are few other differences to take into consideration.
Start building the commerce experience your unique business needs with Elastic Path.
Common Use-CasesExpect to see edge computing as part of modern composable commerce implementation, especially in these specific areas.Server-Side RenderingWith SEO being a major source of traffic online, server-side rendering is a must for any eCommerce application. SEO is improved because search engines are better able to index the content of a server-rendered website instead of downloading large amounts of Javascript and executing the code to understand the content of that page. Server-side rendering ensures that content is present in the HTML and can be properly indexed.Server-side rendering also improves a webpage’s first paint time where content is visible and useful to the end-user. This makes the website feel faster, even if additional Javascript files are still being downloaded to hydrate the rest of the experience.Back-end For Front-end ArchitectureA back-end for front-end or BFF is a layer that sits between the front-end application and any SaaS APIs being used. This allows for a place to add server-side code which may handle API aggregation, custom business logic, or abstract the API for unique security requirements.In the past this BFF layer was a cumbersome process requiring an entirely new application to be built and managed, often by an experienced back-end development team. Modern transitional Javascript frameworks allow this layer to be built directly with the front-end code by front-end developers and then deployed directly to the edge.This simplifies coding, lowers costs, and improves overall performance ensuring that the BFF layer can keep up with the SaaS APIs being called.Potential HurdlesThere are some potential hurdles to existing eCommerce stacks. Edge computing is only supported in the newest Javascript frameworks. If you are on an older version, it will require an upgrade. WYSIWYG tools (back-end as a service) and prebuilt solutions will need to catch up to this transitional approach.Finally, if you are using a server-side website language you will need an entirely new application to leverage edge computing or move to a modern Javascript framework.Even with these hurdles in place, most new composable commerce implementations will be able to take advantage of this new cloud architecture and enjoy the benefits of edge computing. As companies continue to move away from existing monoliths and towards Elastic Path Commerce Cloud, they will be able to adopt these modern techniques, improving performance, lowering costs, and growing revenue.Get StartedTo best way start utilizing edge computing is to leverage a modern Javascript framework. The Elastic Path D2C Starter Kit is built on Next.js 12 and can be an excellent starting point for eCommerce.Start by cloning the repository from Elastic Path's D2C Starter Kit.
$ git clone git@github.com:elasticpath/d2c-starter-kit.git
Then open the application in the editor of your choice. My preference is VSCode:
$ cd d2c-starter-kit/ $ code .
From here we can make a server-side API that will be deployed to the edge. For Next.js all APIs live in a specific folder src/pages/api. You can see that the starter-kit already includes some APIs, you can view those or create a new hello world. Create the file src/pages/api/hello.ts and page in the following code.
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction import type { NextApiRequest, NextApiResponse } from 'next' type Data = { name: string } export default function handler( req: NextApiRequest, res: NextApiResponse<Data> ) { res.status(200).json({ name: 'John Doe' }) }
Now you will have a new endpoint at /api/hello that should return ‘John Doe’. If you want to run the full starter-kit you will need a ClientID and Secret for your Elastic Path Commerce Cloud store. If you don’t have a store, you can start exploring Elastic Path Commerce Cloud here.