January 19th, 2023 | 6 MIN READ

Edge Computing’s Impact on eCommerce

Written by author_profile_images James Luterek

James is the Head of Developer Advocacy at Elastic Path.

edge-computing-Impact-on-ecommerce

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 Frameworks

While 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 Serverless

Edge 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.

  • Pay as you go - Both allow for a pay-for-use model rather than monthly base infrastructure costs.
  • Scaling – Both allow for autoscaling on demand. Running no instances up to 100s based on demand.
  • Zero management – No need to worry about server management, just provide the code and it will run.
  • Less complexity – Building and deploying a function is quick, easy, and doesn’t require ops experience.

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.

  • Cold Starts – Edge computing does not suffer from cold starts. There is no need to keep them warm or plan for higher latency on the first run.
  • Code Options – Edge computing allows for fewer language options and has strict memory and processor limitations.
  • Ecosystem – While serverless has great tools including SAM and Serverless Framework, edge computing is being built into most modern Javascript frameworks. Adding serverless to your tech stack requires another code repository with additional tools, edge computing can be leveraged with the same tools used for front-end development.

Want to dive into Elastic Path Commerce Cloud? Try out our free trial and let us know what you think.

Start Free Trial

Common Use-Cases

Expect to see edge computing as part of modern composable commerce implementation, especially in these specific areas.

Server-Side Rendering

With 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 Architecture

A 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 Hurdles

There 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 Started

To 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.

 

Share on

evaluation tool

Thanks for signing up!

You'll receive a welcome email shortly.

By submitting this you agree with our privacy policy.