suspensive icon indicating copy to clipboard operation
suspensive copied to clipboard

docs: expand motivation page with practical examples and use cases

Open Copilot opened this issue 3 weeks ago • 2 comments

Overview

Addresses issue requesting improved documentation to make @suspensive/react easier to understand and use. The existing "Why need to use?" page had minimal content (3 bullet points). Users needed clearer guidance on when and why to choose this library.

Changes

Enhanced motivation.mdx (EN + KO)

  • Key Benefits - 4 core value propositions with visual hierarchy
  • Common Problems Solved - 5 problems with before/after code comparisons:
    • SSR hydration errors → clientOnly prop
    • Complex ErrorBoundary APIs → unified fallback interface
    • Manual ErrorBoundary resets → <ErrorBoundaryGroup/>
    • Loading spinner flashing → <Delay/> timing control
    • Repetitive fallback props → <DefaultPropsProvider/>
  • Real-World Use Cases - 3 production-ready patterns:
    • TanStack Query + Suspense integration
    • Multi-section dashboard coordination
    • Progressive SSR enhancement
  • Why Choose - Comparison matrix: 30-50% less code, full TypeScript support, zero dependencies
  • Next Steps - Quick links to installation, API docs, examples

Before:

### React Suspense need to avoid Server side rendering sometimes.
[brief explanation]

After:

### Problem 1: React Suspense in Server-Side Rendering
**The Challenge:** SSR hydration errors due to client/server behavior differences
**The Solution:** `<Suspense clientOnly/>` with automatic SSR/CSR handling

[tabs with code comparison]
[explanation of implementation]

Screenshots

English: motivation-en

Korean: motivation-ko

PR Checklist

  • [x] I did below actions if need
  1. I read the Contributing Guide
  2. I added documents and tests.

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title>[Feature]: Why we need to use @suspensive/react</issue_title> <issue_description>### Package Scope

@suspensive/react

Description

Make it easier to use @suspensive/react, so we need to improve suspensive.org.

Possible Solution

No response

etc.

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

  • Fixes toss/suspensive#1818

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot avatar Nov 12 '25 06:11 Copilot

⚠️ No Changeset found

Latest commit: c434f977f7fcfcd8ec289c99bf016f2b0da3688f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

changeset-bot[bot] avatar Nov 12 '25 06:11 changeset-bot[bot]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
suspensive-next-streaming-react-query Ready Ready Preview Comment Nov 12, 2025 6:45am
v2.suspensive.org Ready Ready Preview Comment Nov 12, 2025 6:45am
v3.suspensive.org Ready Ready Preview Comment Nov 12, 2025 6:45am
visualization.suspensive.org Ready Ready Preview Comment Nov 12, 2025 6:45am

vercel[bot] avatar Nov 12 '25 06:11 vercel[bot]