Building Better Websites with Web Fundamentals

Remix is a full-stack React framework that embraces web standards. It leverages native browser features like HTML forms and the Fetch API to deliver a resilient and fast user experience. It is designed to be deployed anywhere, including edge computing platforms.

Server-Side Rendering Always

Remix's rendering model is exclusively Server-Side Rendering (SSR). Every page is rendered on the server for each request, delivering a fully-formed HTML document. This completely eliminates crawlability issues and makes it excellent for dynamic, data-driven sites.

Eliminating Waterfalls

Remix's most unique feature is its nested routing system. It fetches data for all nested route segments in parallel on the server, eliminating "request waterfalls" and leading to faster page loads.

The meta Function

Each route file can export a meta function that returns an array of metadata objects. This elegant API allows for dynamic, data-driven management of all head tags, and intelligently merges metadata from parent routes.

• Embrace the server: all data loading and mutations are handled on the server via loader and action functions.
• Structure applications around the nested routing model to take full advantage of parallel data loading.
• Use the route-level meta function for all dynamic, data-driven metadata.
• Use the built-in <Form> component for all data mutations to benefit from resilient, progressively enhanced data handling.

International SEO Fundamentals

When targeting multiple countries or languages, proper international SEO ensures search engines serve the right content to the right audience. This involves URL structure, hreflang tags, and language detection.

• URL Structure Options: Choose between subdirectories (/en/, /fr/), subdomains (en.site.com), or parameters (?lang=en). Subdirectories are typically recommended for most sites.
• Hreflang Tags: HTML attributes that tell search engines about language and regional variations of your pages. Format: <link rel="alternate" hreflang="en-US" href="..." />
• Language vs Locale: Use language codes (en) for language targeting, or locale codes (en-US, en-GB) for region-specific content.

Implementing International SEO in Remix

Remix's server-centric architecture and flexible routing make it excellent for international SEO with full SSR support.

• Routing Strategy: Use Remix's file-based routing with language prefixes: app/routes/$lang.about.tsx or nested routes with language folders. Remix handles all routes server-side.
• Adding Hreflang: Use the links export in your route to add hreflang tags. This integrates seamlessly with Remix's nested routing and automatically renders in the document head.
• Recommended Tools: remix-i18next (integrates i18next with Remix), @remix-run/react (built-in links and meta exports), session-based language detection.
• Code Example:

  // app/routes/$lang.about.tsx
  import type { LoaderFunction, LinksFunction } from '@remix-run/node';
  import { useLoaderData } from '@remix-run/react';
  import { useTranslation } from 'react-i18next';
  
  export const loader: LoaderFunction = async ({ params }) => {
    const lang = params.lang || 'en';
    return { lang };
  };
  
  export const links: LinksFunction = () => {
    return [
      { rel: 'alternate', hreflang: 'en', href: 'https://site.com/en/about' },
      { rel: 'alternate', hreflang: 'fr', href: 'https://site.com/fr/about' },
      { rel: 'alternate', hreflang: 'x-default', href: 'https://site.com/en/about' }
    ];
  };
  
  export const meta = ({ data }) => {
    return [
      { title: 'About Us' },
      { name: 'description', content: 'About our company' }
    ];
  };
  
  export default function About() {
    const { lang } = useLoaderData();
    const { t } = useTranslation();
    
    return (
      <div lang={lang}>
        <h1>{t('about.title')}</h1>
      </div>
    );
  }