قابلیت های پنهان Remix.js که رویکرد شما را به وبلاگ های Markdown در سال 2025 تغییر می دهد

// ❌ Typical Next.js approach
export async function getStaticProps() {
  // Getting data during build time
  return { props: { data } }
}

// ✅ Remix approach
export async function loader({ request }) {
  // Data is loaded on the server for each request
  return json(data);
}

// app/routes/blog.$slug.tsx
export async function loader({ params }) {
  // Loader as a simple adapter that calls a service
  return json(await getBlogPostService(params.slug));
}

// app/services/blog.server.ts
export async function getBlogPostService(slug) {
  // Business logic separated from Remix-specific code
  const post = await blogRepository.getBySlug(slug);
  return processPostForDisplay(post);
}

// app/repositories/blog.server.ts
export async function getBySlug(slug) {
  // Data layer abstracted from business logic
  // Can work with file system, DB, CMS, etc.
  return // ...
}

app/
├── routes/
│   └── blog.$slug.tsx  # The route itself
├── features/
│   └── blog/
│       ├── components/ # Blog components
│       ├── services/   # Services
│       └── utils/      # Utilities
└── shared/             # Shared code

// Hybrid content storage architecture

// 1. Store markdown files in Git repository (for versioning)
// 2. Store metadata and indexes in PostgreSQL (for searching)
// 3. Use a headless CMS for content management (for editors)
// 4. Cache processed content at the edge (for performance)

export async function loader({ params }) {
  // First check the cache
  const cachedPost = await edge.getCache(`post:${params.slug}`);
  if (cachedPost) return json(cachedPost);

  // Get metadata from database
  const metadata = await db.getPostMetadata(params.slug);

  // Get content from Git
  const content = await git.getContent(metadata.filepath);

  // Process markdown and cache result
  const processedContent = await mdx.process(content);
  await edge.setCache(`post:${params.slug}`, { 
    metadata, 
    content: processedContent 
  });

  return json({ metadata, content: processedContent });
}

// app/components/BlogComponents.tsx
export const CodeSandbox = ({ id, height = "500px" }) => (
  <iframe
    src={`https://codesandbox.io/embed/${id}`}
    className="w-full rounded-md shadow-lg"
    style={{ height }}
    allow="accelerometer; camera; encrypted-media; geolocation; microphone"
    title="Code example"
  >iframe>
);

// app/routes/blog._index.tsx
import * as React from 'react';
import { MDXProvider } from '@mdx-js/react';
import { Outlet } from '@remix-run/react';
import { CodeSandbox } from '~/components/BlogComponents';

const components = {
  // Replace standard HTML elements
  h1: props => <h1 className="text-3xl font-bold mb-4" {...props} />,
  // Add custom components
  CodeSandbox,
};

export default function BlogLayout() {
  return (
    <MDXProvider components={components}>
      <div className="blog-container max-w-3xl mx-auto">
        <Outlet />
      div>
    MDXProvider>
  );
}

---
title: "Working with React Hooks"
date: "2025-05-10"
---

# {attributes.title}

Here's a live example of the code we're discussing:



The key advantage of this approach is...

// In your MDX file:
export const metadata = {
  datasetId: 'monthly-active-users-2025'
};

# User Growth Analysis

<DynamicChart datasetId={metadata.datasetId} />

// 1. HTTP caching via headers
export function headers() {
  return {
    "Cache-Control": "public, max-age=300, s-maxage=3600, stale-while-revalidate=86400",
  };
}

// 2. In-memory server caching
let cache = new Map();

export async function loader({ params, request }) {
  const slug = params.slug;
  const cacheKey = `post:${slug}`;

  // Check server memory cache
  if (cache.has(cacheKey)) {
    return json(cache.get(cacheKey));
  }

  // Fetch and process data
  const post = await getPost(slug);

  // Store in server memory cache
  cache.set(cacheKey, post);

  return json(post);
}

// 3. Client-side prefetching
function BlogIndex() {
  const fetcher = useFetcher();

  // Prefetch related posts on hover
  function handleMouseEnter(slug) {
    fetcher.load(`/blog/${slug}`);
  }

  return (
    <ul>
      {posts.map(post => (
        <li 
          key={post.slug}
          onMouseEnter={() => handleMouseEnter(post.slug)}
        >
          <Link to={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

export async function loader({ request }) {
  const start = Date.now();

  // Get data
  const posts = await getPosts();
  const dbTime = Date.now() - start;

  // Process markdown
  const startProcessing = Date.now();
  const processedPosts = await Promise.all(posts.map(processMarkdown));
  const processingTime = Date.now() - startProcessing;

  return json(processedPosts, {
    headers: {
      "Server-Timing": `db;dur=${dbTime}, markdown;dur=${processingTime}`
    }
  });
}

// app/routes/blog.$slug.tsx
export const meta = ({ data }) => {
  if (!data?.post) {
    return [
      { title: "Article Not Found" },
      { description: "Sorry, the article does not exist" }
    ];
  }

  const { post } = data;

  return [
    { title: `${post.title} | My Dev Blog` },
    { description: post.excerpt },

    // OpenGraph for social media
    { property: "og:title", content: post.title },
    { property: "og:description", content: post.excerpt },
    { property: "og:image", content: post.featuredImage },
    { property: "og:type", content: "article" },
    { property: "og:url", content: `https://myblog.com/blog/${post.slug}` },
    { property: "article:published_time", content: post.publishedAt },

    // Twitter card
    { name: "twitter:card", content: "summary_large_image" },
    { name: "twitter:title", content: post.title },
    { name: "twitter:description", content: post.excerpt },
    { name: "twitter:image", content: post.featuredImage },

    // Canonical URL
    { tagName: "link", rel: "canonical", href: `https://myblog.com/blog/${post.slug}` },

    // Structured data for rich results
    {
      tagName: "script",
      "type": "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "headline": post.title,
        "image": post.featuredImage,
        "datePublished": post.publishedAt,
        "dateModified": post.updatedAt,
        "author": {
          "@type": "Person",
          "name": "Your Name"
        }
      })
    }
  ];
};

// app/routes/sitemap[.]xml.tsx
export const loader = async () => {
  const posts = await getAllPosts();

  const sitemap = `
    
    
      
        https://myblog.com
        ${new Date().toISOString()}
        1.0
      

      ${posts.map(post => `
        
          https://myblog.com/blog/${post.slug}
          ${new Date(post.updatedAt).toISOString()}
          0.8
        
      `).join('')}
    
  `;

  return new Response(sitemap, {
    status: 200,
    headers: {
      "Content-Type": "application/xml",
      "Cache-Control": "public, max-age=3600"
    }
  });
};

// app/routes/api.ai-assistant.tsx
import { eventStream } from 'remix-utils';
import { OpenAI } from 'openai';

export async function loader({ request }) {
  const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
  const url = new URL(request.url);
  const prompt = url.searchParams.get("prompt");

  return eventStream(request.signal, function setup(send) {
    const stream = openai.chat.completions.create({
      model: "gpt-4-turbo",
      messages: [{ role: "user", content: prompt }],
      stream: true
    });

    (async () => {
      for await (const part of stream) {
        send({ data: part.choices[0]?.delta?.content || "" });
      }
    })();
  });
}

function AIAssistant() {
  const [prompt, setPrompt] = useState("");
  const [response, setResponse] = useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    setResponse("");

    const eventSource = new EventSource(`/api/ai-assistant?prompt=${encodeURIComponent(prompt)}`);

    eventSource.onmessage = (event) => {
      setResponse(prev => prev + event.data);
    };

    eventSource.onerror = () => {
      eventSource.close();
    };
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input 
          value={prompt} 
          onChange={e => setPrompt(e.target.value)} 
          placeholder="Ask a question..."
        />
        <button type="submit">Sendbutton>
      form>

      <div className="response">
        {response || "AI response will appear here..."}
      div>
    div>
  );
}