Skip to content

Bug: #36491

@chiddekel

Description

@chiddekel

Desired state of component MIX of client/server RSC.

// MAIN FILE (Runs on the server by default)
import db from '@/lib/db';
// You import a pure, old JS chart library (non-React!)
import { LegacyCanvasChart } from 'old-school-charts'; 

export default async function Dashboard() {
  // You fetch data from the database (just like in PHP)
  const dane = await db.query('SELECT * FROM sales'); 

  return (
    <div>
      <h1>Sales statistics</h1>
      
      {/* 
        MAGIC: React automatically knows that LegacyCanvasChart needs Canvas and the DOM.
        It generates an empty div on the server, and in the browser it automatically 
        triggers the chart constructor, passing the "dane" (data) into it.
      */}
      <LegacyCanvasChart data={dane} width="600" height="400" />
    </div>
  );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions