React Server-Side Rendering POC

A proof-of-concept application that demonstrates server-side rendering of React components from string code input. Users can write React component code in the browser, send it to a Node.js server, and see the rendered HTML output with full TailwindCSS styling support.

Features

• 🚀 Server-Side Rendering: Render React components on the server using ReactDOMServer
• 🎨 TailwindCSS Support: Full support for TailwindCSS classes in rendered components
• ⚡ Real-time Preview: Live preview of rendered components with HTML source
• 🛠️ JSX Compilation: Automatic JSX to JavaScript transformation using Babel
• 🎯 Error Handling: Comprehensive error messages for debugging
• 📱 Responsive UI: Modern, responsive interface built with TailwindCSS

Architecture

┌─────────────────┐    HTTP POST    ┌─────────────────┐
│   React Client  │ ──────────────→ │   Express.js    │
│   (Port 3000)   │                 │   Server        │
│                 │ ←────────────── │   (Port 3001)   │
│   - Code Editor │    HTML Response│                 │
│   - Live Preview│                 │   - Babel       │
│   - TailwindCSS │                 │   - ReactDOMSvr │
└─────────────────┘                 │   - JSDOM       │
                                    └─────────────────┘

Quick Start

1. Install Dependencies:

   npm run install-all

2. Start Development Servers:

   npm run dev

   This starts both the Express server (port 3001) and React client (port 3000).

3. Open Browser: Navigate to http://localhost:3000

Usage

1. Write Component Code: Enter your React component code in the left panel
2. Render: Click "Render Component" to send code to server
3. Preview: View the live preview and generated HTML in the right panel

Example Component

function MyComponent() {
  return (
    <div className="space-y-4">
      <Card>
        <CardHeader 
          title="Welcome to SSR!" 
          subtitle="Server-side rendering with predefined components"
          actions={<Button variant="primary" size="sm">Action</Button>}
        />
        <p className="text-gray-600 mb-4">
          This example uses predefined components: Card, CardHeader, and Button.
        </p>
        <div className="flex gap-2 flex-wrap">
          <Button variant="primary" size="sm">Primary</Button>
          <Button variant="secondary" size="sm">Secondary</Button>
          <Button variant="success" size="sm">Success</Button>
        </div>
      </Card>
    </div>
  );
}

Predefined Components

The server automatically loads and makes available all components from the components/ directory:

• Card: <Card title="Title" className="custom-class">content</Card>
• CardHeader: <CardHeader title="Title" subtitle="Subtitle" actions={<Button>Action</Button>} />
• Button: <Button variant="primary|secondary|success|danger" size="sm|md|lg">Label</Button>

You can add more components by creating .tsx, .ts, .jsx, or .js files in the components/ directory.

Supported Features

• ✅ JSX syntax
• ✅ TailwindCSS classes
• ✅ Basic React hooks (useState, useEffect, etc.)
• ✅ Props passing
• ✅ Nested components
• ✅ Conditional rendering
• ✅ Event handlers (in JSX, but non-functional in SSR)
• ✅ Predefined components from components/ directory

API Endpoints

POST /render

Renders a React component from string code.

Request Body:

{
  "code": "function MyComponent() { return <div>Hello</div>; }",
  "props": {}
}

Response:

{
  "success": true,
  "html": "<div>Hello</div>",
  "message": "Component rendered successfully"
}

GET /components

Get available predefined components.

Response:

{
  "success": true,
  "components": [
    { "name": "Card" },
    { "name": "CardHeader" },
    { "name": "Button" }
  ],
  "count": 3
}

GET /health

Health check endpoint.

Development

Project Structure

react-string-renderer-poc/
├── server/
│   └── index.js              # Express.js server with SSR logic
├── client/                   # React frontend
│   ├── public/
│   ├── src/
│   │   ├── App.js           # Main application component
│   │   ├── index.js         # React entry point
│   │   └── index.css        # TailwindCSS imports
│   ├── tailwind.config.js   # Tailwind configuration
│   └── package.json         # Client dependencies
├── components/              # Example components
│   ├── Card.tsx
│   └── CardHeader.tsx
├── package.json            # Root package with scripts
└── README.md

Scripts

• npm run dev - Start both server and client in development mode
• npm run server - Start only the Express server
• npm run client - Start only the React client
• npm run build - Build the React client for production
• npm run install-all - Install dependencies for both server and client

Technical Details

Server-Side Rendering Process

1. Code Reception: Express server receives React component code as string
2. JSX Compilation: Babel transforms JSX to JavaScript
3. Safe Evaluation: Code is executed in a controlled context with React imports
4. Component Instantiation: React element is created from the component
5. HTML Generation: ReactDOMServer renders component to HTML string
6. Response: HTML is returned to client with success/error status

Security Considerations

⚠️ Important: This is a POC and should not be used in production without proper security measures:

• Code execution happens in a limited context but is still potentially unsafe
• No input validation or sanitization beyond basic checks
• No rate limiting or authentication
• Suitable for development/demo environments only

Troubleshooting

Common Issues

1. "Component evaluation failed": Check JSX syntax and component structure
2. TailwindCSS classes not working: Ensure classes are valid and properly spelled
3. Server connection error: Verify server is running on port 3001

Debugging

• Check browser console for client-side errors
• Check server console for rendering errors
• Use the health endpoint: GET http://localhost:3001/health

License

MIT License - feel free to use this POC as a starting point for your own projects!