Sauvegarder l'état React dans le cloud : la persistance simplifiée

Si vous avez recherché save React state to the cloud, vous cherchez le chemin le plus court et le plus fiable entre un code qui fonctionne et une URL publique — sans monter de serveurs, apprendre un tableau de bord cloud complexe, ni saisir une carte bancaire avant d'avoir le moindre utilisateur. Ce guide explique exactement comment y parvenir avec jsdeck, quels sont les compromis, et quand un autre outil est réellement le meilleur choix. Nous restons concrets : étapes réelles, commandes réelles et limites honnêtes.

Ce qu'est réellement le datastore jsdeck

C'est un store clé-valeur JSON par app. Chaque enregistrement a une key string, une value JSON arbitraire, trois colonnes d'index string optionnelles (idx1–idx3) pour le filtrage, et un horodatage updatedAt. Vous le lisez et l'écrivez via une petite API REST directement depuis votre frontend statique, ou via le client npm @jsdeck/toolkit. Aucun serveur à faire tourner, patcher ou scaler de votre côté.

Pourquoi c'est important pour sauvegarder l'état React dans le cloud

La plupart des prototypes n'ont pas besoin de Postgres. Ils doivent sauvegarder un objet de paramètres, persister un high score, stocker une liste de soumissions, ou se souvenir de ce qu'un utilisateur a fait la dernière fois. Un store JSON touche juste : vous gardez vos données structurées exactement comme l'état de votre app, sans la cérémonie de schéma, migration ou pool de connexions d'une base complète.

Modes et contrôle d'accès

Le datastore fonctionne dans l'un de deux modes. En public_read, tout le monde peut lire les enregistrements mais les écritures nécessitent votre clé store_. En private, lectures et écritures nécessitent la clé. Les requêtes PUT sont limitées en débit par IP. La clé est un secret partagé adapté aux données non sensibles — ne mettez jamais de vrais secrets dans du code côté client.

Exemple : sauvegarder et charger du JSON

// Save
await fetch('https://jsdeck.com/api/v1/public/data/YOUR-SLUG/records/settings', {
  method: 'PUT',
  headers: {
    'Authorization': 'Bearer store_YOUR_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ value: { theme: 'dark', lang: 'en' } }),
});

// Load
const res = await fetch('https://jsdeck.com/api/v1/public/data/YOUR-SLUG/records/settings');
const { value } = await res.json();

Données par utilisateur avec les lignes owner

Besoin que chaque visiteur ait ses propres données privées ? Combinez le datastore avec l'auth visiteur. Après connexion d'un visiteur, vous recevez un token de session ; écrivez un enregistrement avec visibility: "owner" et cette ligne devient lisible et modifiable uniquement par cet utilisateur. La clé store_ seule ne peut pas la lire. C'est ce qui rend possibles les démos protégées et les apps simples par utilisateur sans backend complet.

Quand ce n'est pas adapté

Soyez honnête avec vous-même sur le modèle de données. Le datastore n'est pas l'outil adapté pour des données relationnelles avec jointures, migrations de schéma ou transactions ; il n'offre pas d'abonnements temps réel, pas de fonctions ou triggers côté serveur, pas de recherche full-text, et pas de stockage fichier/blob. Son modèle de requête est « clé plus jusqu'à trois index string (combinés en AND) », pas du SQL arbitraire. Si vous avez besoin de tout cela, tournez-vous vers Postgres/Supabase ou un backend complet.

Pour qui c'est fait, et quand ne pas utiliser jsdeck

Bon choix : frontends statiques, single-page apps, démos, portfolios, MVPs, exports générés par IA, et apps qui ont besoin d'un peu de persistance JSON ou d'une connexion visiteur légère.

Pas adapté : apps qui nécessitent un serveur Node longue durée, du rendu côté serveur à la requête, des backends WebSocket, des secrets privés côté serveur, des tâches en arrière-plan ou une base relationnelle complète. Pour ceux-là, une plateforme comme les alternatives discutées dans notre hub comparatif vous servira mieux — et c'est une force de choisir délibérément, pas un compromis.

Questions fréquentes

Sauvegarder l'état React dans le cloud est-il vraiment gratuit ?

Oui. jsdeck propose un hébergement statique gratuit avec HTTPS pour ce type de projets, sans carte bancaire pour commencer. Des fonctionnalités optionnelles comme le datastore et l'auth visiteur sont disponibles quand vous en avez besoin.

Ai-je besoin d'un serveur pour utiliser le datastore ?

Non. Le datastore est une API REST hébergée que vous appelez directement depuis votre frontend statique. Rien à faire tourner, scaler ou patcher de votre côté.

Comment garder les données de chaque utilisateur privées ?

Utilisez l'auth visiteur et écrivez des enregistrements avec visibility: "owner". Ces lignes ne sont accessibles qu'avec le token du propriétaire, pas la clé datastore partagée.

Prochaines étapes

• Explorez d'autres guides dans le hub datastore
• Suivez le guide de démarrage pour déployer votre première app
• Consultez la documentation développeur pour le datastore, les comptes sécurisés (auth API) et les détails du déploiement CLI