Why deployment target shapes architecture in Remix - See It in Action

Why Deployment Target Shapes Architecture

📖 Scenario: You are building a simple web app using Remix. The app will show a list of products. Depending on where you deploy the app (server or edge), you need to adjust how you fetch and handle data.

🎯 Goal: Learn how the deployment target (server or edge) affects the Remix app architecture by setting up data fetching and rendering accordingly.

📋 What You'll Learn

Create a data array of products with exact names and prices

Add a configuration variable to specify the deployment target

Use conditional logic to fetch data differently based on deployment target

Complete the Remix loader and component to render the product list

💡 Why This Matters

🌍 Real World

Web apps often run in different environments like servers or edge networks. Knowing how to adjust data fetching and rendering based on deployment target helps build efficient and scalable apps.

💼 Career

Understanding deployment targets and conditional data handling is important for frontend and full-stack developers working with modern frameworks like Remix.

1

Set up the product data array

Create a constant array called products with these exact objects: { name: 'Laptop', price: 1200 }, { name: 'Phone', price: 800 }, and { name: 'Tablet', price: 600 }.

Remix

// Your code here

Hint

Use export const products = [...] to create the array with exact product objects.

2

Add deployment target configuration

Create a constant called deploymentTarget and set it to the string 'server'.

Remix

export const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 600 }
];

// Your code here

Hint

Use export const deploymentTarget = 'server'; to set the deployment target.

3

Implement conditional data fetching in loader

Create an async function called loader that returns JSON data. Inside, use if (deploymentTarget === 'server') to return products directly. Otherwise, return an empty array.

Remix

export const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 600 }
];

export const deploymentTarget = 'server';

// Your code here

Hint

Use export async function loader() and return JSON data conditionally based on deploymentTarget.

4

Render product list in the component

Create a default export function component called Products. Use useLoaderData() to get the products. Render an unordered list with each product's name and price. Add an aria-label of 'Product list' to the list for accessibility.

Remix

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 600 }
];

export const deploymentTarget = 'server';

export async function loader() {
  if (deploymentTarget === 'server') {
    return json(products);
  } else {
    return json([]);
  }
}

// Your code here

Hint

Use useLoaderData() to get products and render them in a list with aria-label="Product list".