dev-resources.site

for different kinds of informations.

# Key New Features in React Router 7: Embracing the Remix Future

Published at

12/22/2024

Enhanced Data Loading with Deferred Components

React Router 7 brings a more advanced and efficient method for data loading with deferred components, allowing applications to stream data progressively:

import { defer, useLoaderData, Await } from 'react-router';
import { Suspense } from 'react';

interface ProductData {
  id: string;
  name: string;
  details: {
    description: string;
    price: number;
  };
}

async function loader({ params }: { params: { id: string } }) {
  return defer({
    product: fetchProduct(params.id),
    recommendations: fetchRecommendations(params.id)
  });
}

function ProductPage() {
  const { product, recommendations } = useLoaderData<typeof loader>();

  return (
    <div>
      <Suspense fallback={<ProductSkeleton />}>
        <Await resolve={product}>
          {(resolvedProduct: ProductData) => (
            <ProductDetails product={resolvedProduct} />
          )}
        </Await>
      </Suspense>

      <Suspense fallback={<RecommendationsSkeleton />}>
        <Await resolve={recommendations}>
          {(resolvedRecommendations) => (
            <RecommendationsList items={resolvedRecommendations} />
          )}
        </Await>
      </Suspense>
    </div>
  );
}

Server-Side Rendering Optimizations

The framework now includes built-in server-side rendering optimizations, particularly beneficial for large applications:

import { createStaticHandler, createStaticRouter } from '@react-router/core';
import type { ServerResponse } from 'http';

interface AppContext {
  req: Request;
  res: ServerResponse;
}

async function handleRequest(context: AppContext) {
  const handler = createStaticHandler(routes);
  const response = await handler.query(
    new Request(context.req.url, {
      method: context.req.method,
      headers: context.req.headers,
    })
  );

  return response;
}

const router = createStaticRouter(routes, {
  basename: '/app',
  hydrationData: {
    loaderData: initialData,
  },
});

Enhanced Type Safety with TypeScript

React Router 7 emphasizes improved TypeScript integration:

import { type LoaderFunctionArgs, json } from '@remix-run/router';

interface UserData {
  id: string;
  name: string;
  email: string;
}

interface LoaderError {
  message: string;
  code: number;
}

async function loader({ 
  params,
  request 
}: LoaderFunctionArgs): Promise<Response> {
  try {
    const userData: UserData = await fetchUser(params.userId);
    return json(userData);
  } catch (error) {
    const errorData: LoaderError = {
      message: 'Failed to fetch user',
      code: 404
    };
    return json(errorData, { status: 404 });
  }
}

Client-Side Data Mutations

The framework introduces a more streamlined approach to handling client-side mutations, it is just like a loader but this time you will be able to submit a form or do any actions:

import { useFetcher } from 'react-router';

interface CommentData {
  id: string;
  content: string;
  userId: string;
}

function CommentForm() {
  const fetcher = useFetcher();

  const isSubmitting = fetcher.state === 'submitting';

  return (
    <fetcher.Form method="post" action="/comments">
      <textarea name="content" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Posting...' : 'Post Comment'}
      </button>
    </fetcher.Form>
  );
}

async function action({ request }: { request: Request }) {
  const formData = await request.formData();
  const comment: Partial<CommentData> = {
    content: formData.get('content') as string,
    userId: getCurrentUserId()
  };

  const newComment = await saveComment(comment);
  return json(newComment);
}

Performance Improvements

React Router 7 introduces significant performance optimizations through enhanced route prefetching:

function Navigation() {
  return (
    <nav>
      <PrefetchPageLinks page="/dashboard" />
      <Link 
        to="/dashboard" 
        prefetch="intent"
        unstable_viewTransition
      >
        Dashboard
      </Link>
    </nav>
  );
}

SPA mode

you will be able to turn on or off the SPA mode

//react-router.config.ts
import { type Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

Here is how to bring All Remix feature to your React

To get these features working with Vite, you'll need this configuration:

// vite.config.ts
-import { vitePlugin as remix } from "@remix-run/dev";
+import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

 export default defineConfig({
      plugins: [
       - remix(), // remove remix
       + reactRouter(), // add reactRouter instead
       tsconfigPaths(), 
       ],
});

Note: For those upgrades from react-router v.6 you will use react-router instead of react in vite.

This setup gives you access to Remix-like features such as:

Data loading and mutations
Nested layouts
Error boundaries
Progressive enhancement
Form handling
Type safety
Server-side rendering capabilities
Optimistic UI updates

The combination of React Router 7 and Vite provides a powerful development environment that brings many of Remix's innovative features to any React application, while maintaining the flexibility to choose your preferred tooling and deployment strategy, This convergence promises:

Improved developer experience through consolidated APIs
Enhanced performance optimizations
Better integration with modern React features
Streamlined migration paths between platforms
For developers interested in diving deeper into these changes, consider exploring:

remix Article's

30 articles in total