Back to integrations

Integrate Remix with Strapi

Learn how to successfully integrate Remix with Strapi.

tweet selection

    These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

    Introduction to Remix and Strapi

    Remix is a full-stack web framework that emphasizes server-side rendering and efficient data handling. It uses web standards to provide fast applications.

    By integrating Remix with Strapi, you combine the capabilities of both frameworks. Remix handles frontend rendering and user interactions, while Strapi manages backend content and data. This separation allows you to manage content independently from the frontend application.

    Why Use Strapi with Remix

    Integrating Strapi with Remix brings together a headless CMS and a web framework. Strapi provides a backend for managing content types and APIs, offering the benefits of headless CMS, while Remix offers server-side rendering and efficient data loading, resulting in fast user experiences.

    By using Remix's loader functions, you can fetch data directly from Strapi's APIs, integrating the backend and frontend smoothly. You can build content-rich applications where Strapi handles content management, and Remix focuses on user interactions.

    This combination also simplifies authentication. You can implement authentication flows using Strapi's authentication endpoints within Remix, managing user sessions securely.

    Using Strapi with Remix creates a decoupled architecture which separates content management from frontend development.

    Key Features of Remix

    Using Remix with Strapi allows you to build content-rich web applications by utilizing these key features:

    Server-Side Rendering

    Remix uses server-side rendering (SSR), which improves performance and SEO. By rendering HTML on the server, your app loads faster and is more accessible to search engines.

    Loader Functions

    Remix uses loader functions to fetch data before rendering a page. When working with Strapi, you can use loaders to get content from Strapi's API—either RESTful or GraphQL—making data available to your components with the useLoaderData hook.

    Action Functions

    Action functions handle form submissions and data changes in Remix. They let you send data to Strapi's API, enabling content creation or updates directly from your Remix application.

    Nested Routing

    Remix supports nested routing for complex UI layouts and better code organization. When building content from Strapi, nested routing helps create clear and maintainable routes.

    Sessions and Authentication

    Remix makes session management straightforward, which is important for authentication. You can manage authentication state with Remix sessions and integrate with Strapi's authentication to protect routes and handle user sessions, utilizing various authentication methods. You can explore managing authentication state with Remix sessions and consider integrating with Strapi's authentication mechanisms to enhance route protection and user session handling, as discussed in Strapi v4 Authentication.

    Error Boundaries

    Remix includes error handling through error boundaries. They allow you to catch errors gracefully and provide feedback to users, especially when working with API requests to Strapi.

    Environment Variables

    Remix supports environment variables for configuration, such as storing the Strapi URL and API tokens securely. Using environment variables helps when moving between development and production environments.

    Best Practices for Integrating Remix With Strapi

    When integrating Remix with Strapi, following best practices can improve your development process.

    Use Environment Variables

    Store sensitive information like the Strapi API URL and API tokens in environment variables. This approach keeps your configuration flexible and secure, allowing for multi-environment support in development and production. In Remix, you can access these variables using process.env, facilitating environment variables and API integration.

    Create a Utility for API Requests

    Create a utility function or API client to handle interactions with the Strapi API. By centralizing your API calls, you can manage headers, authentication, and error handling more easily, especially as you consider the API evolution.

    Implement Error Handling

    Include error handling in your API requests to manage potential issues gracefully. Proper error handling improves the user experience and helps with debugging, contributing to overall performance optimization.

    Utilize Remix Loaders and Actions

    Use Remix's loader functions to fetch data from Strapi and actions to handle form submissions or mutations. This approach aligns with Remix's data-fetching patterns and keeps your code organized.

    Leverage TypeScript

    Using TypeScript enhances type safety and the developer experience. It helps catch errors early and makes your codebase more maintainable.

    Handle Authentication Securely

    When implementing authentication, use Strapi's auth endpoints. Manage authentication state using Remix sessions or cookies, and ensure tokens are stored securely.

    Use Dynamic Routes

    Implement dynamic routing in Remix to handle content that varies by parameters, such as fetching individual posts based on a slug.

    Consider Caching Strategies

    Implement caching strategies with the REST Cache plugin in Strapi to reduce redundant API calls. Caching improves performance by speeding up data retrieval and decreasing the load on the backend, optimizing overall application performance.

    Deploy Thoughtfully

    During deployment, ensure environment variables are correctly set in your hosting environment. Test both the Strapi backend and Remix frontend to confirm they work together seamlessly.

    Getting Started With Remix

    To integrate Remix with Strapi, set up both the Strapi backend and the Remix frontend.

    Installing Strapi

    Start by installing Strapi, which will serve as your backend. Open your terminal and run the following command to create a new Strapi project:

    npx create-strapi-app@latest my-project --quickstart

    This command initializes a new Strapi application named my-project with a default SQLite database using the quickstart flag.

    Configuring Strapi

    Once Strapi is running:

    • Navigate to the admin panel at http://localhost:1337/admin and create an admin user.
    • Define your content types. For example, to create a blog, add a "Post" content type with fields like title, content, and author.

    After setting up your content types, generate an API token to authenticate requests from your Remix application:

    • In the Strapi admin panel, go to Settings > Global settings > API Tokens.
    • Create a new token with the necessary permissions.

    Installing Remix

    With Strapi configured, set up the Remix frontend. Run the following command to create a new Remix application:

    npx create-remix@latest

    Follow the prompts to set up your project. Once the setup is complete, navigate into your project directory.

    Connecting Remix to Strapi

    In your Remix application, you can use loader functions to fetch data from a Strapi backend. For instance, to get posts, you can create a loader in your routes/index.jsx file like this:

    1// app/routes/index.jsx
2
3import { json } from '@remix-run/node';
4
5import { useLoaderData } from '@remix-run/react';
6
7export const loader = async () => {
8
9  const response = await fetch('<http://localhost:1337/api/posts>');
10
11  const posts = await response.json();
12
13  return json(posts);
14
15};
16
17export default function Index() {
18
19  const posts = useLoaderData();
20
21  return (
22
23    <div>
24
25      {[posts.data.map](http://posts.data.map)(post => (
26
27        <div key={[post.id](http://post.id)}>
28
29          <h2>{post.attributes.title}</h2>
30
31          <p>{post.attributes.content}</p>
32
33        </div>
34
35      ))}
36
37    </div>
38
39  );
40
41}

    Make sure you replace 'http://localhost:1337/api/posts' with your Strapi API endpoint. If necessary, include your API token in the request headers for authentication.

    Displaying Data in Remix Components

    The useLoaderData hook allows you to access the data fetched in the loader. In the example above, it renders a list of posts retrieved from Strapi, displaying each post's title and content.

    Setting Up Environment Variables

    To avoid hardcoding URLs and tokens, use environment variables. Create a .env file in your Remix project directory with the following variables:

    STRAPI_API_URL=http://localhost:1337

    STRAPI_API_TOKEN=your_api_token_here

    Ensure your loader function is set up to access these environment variables when fetching data:

    1export const loader = async () => {
2
3  const response = await fetch(\`${process.env.STRAPI_API_URL}/api/posts\`, {
4
5    headers: {
6
7      Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`,
8
9    },
10
11  });
12
13  // rest of the code...
14
15};

    Running Your Applications

    Start both the Strapi and Remix servers. In separate terminal windows, run:

    # For Strapi

    1cd my-project
2
3npm run develop

    # For Remix

    npm run dev

    Your Remix application should now be running and connected to the Strapi backend, allowing you to fetch and display content from your CMS. With both systems in place, you're ready to start building full-stack applications.

    tweet selection