📋 محتويات الصفحة
📖 الوصف
TanStack Start هو إطار عمل React كامل المكدس (full-stack) مبني على TanStack Router. يوفر TypeScript end-to-end type safety، server functions، وdata loading محسّن. يهدف لتوفير تجربة تطوير مشابهة لـ Next.js لكن مع TypeScript-first approach. TanStack Start يستخدم TanStack Router للتوجيه و TanStack Que...
🎯 يستخدم في
مجالات استخدام هذه الأداة
تطبيقات React كاملة مع TypeScript
تطبيقات SaaS
لوحات التحكم الإدارية
تطبيقات تتطلب type safety كامل
تطبيقات مع بيانات معقدة
✨ المميزات
أبرز مميزات هذه الأداة
Full TypeScript end-to-end
TanStack Router للتوجيه
Server functions (مثل Next.js Server Actions)
Data loading و mutations type-safe
Streaming SSR
TanStack Query integration
File-based routing
Type-safe forms و validations
⚠️ العيوب
نقاط يجب مراعاتها
جديد جداً (released 2024)
نظام بيئي صغير
موارد تعليمية محدودة
مجتمع صغير
أقل استقرار من Next.js
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// app/routes/posts.tsx
import { createFileRoute } from '@tanstack/react-router';
import { serverFn } from '@tanstack/start/server';
const getPosts = serverFn().handler(async () => {
const posts = await db.post.findMany();
return posts;
});
export const Route = createFileRoute('/posts')({
component: PostsPage,
loader: async () => {
const posts = await getPosts();
return { posts };
},
});
function PostsPage() {
const { posts } = Route.useLoaderData();
return (
<div>
<h1>المقالات</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
// app/routes/posts/$postId.tsx
import { createFileRoute } from '@tanstack/react-router';
import { serverFn } from '@tanstack/start/server';
const getPost = serverFn()
.validator((postId: string) => postId)
.handler(async ({ data: postId }) => {
return await db.post.findUnique({ where: { id: postId } });
});
export const Route = createFileRoute('/posts/$postId')({
component: PostPage,
loader: async ({ params }) => {
const post = await getPost({ data: params.postId });
return { post };
},
});
function PostPage() {
const { post } = Route.useLoaderData();
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}📚 أدوات أخرى في Meta-Frameworks
قد يعجبك أيضاً
Analog
إطار عمل Angular كامل (Full-Stack Angular Framework)
Astro
⭐إطار عمل للمحتوى (Content-Focused Framework)
Gatsby
⭐إطار عمل ثابت مع بيانات GraphQL (Static Site Generator with GraphQL)
Next.js
⭐إطار عمل React شامل (React Meta-Framework)
Nuxt
⭐إطار عمل Vue شامل (Vue Meta-Framework)
Qwik City
إطار عمل Qwik شامل (Qwik Meta-Framework)