Server-Side Rendering
Build fast, SEO-friendly applications with Baraqex's powerful server-side rendering capabilities and file-based routing system.
Why Server-Side Rendering?
SEO Optimization
Search engines can crawl and index your content, improving discoverability and rankings.
Faster Initial Load
Users see content immediately without waiting for JavaScript to download and execute.
Better Performance
Reduced time to first contentful paint and improved Core Web Vitals scores.
Client Hydration
Seamlessly transition from server-rendered HTML to interactive client-side application.
Setting Up Your Server
import { createServer } from 'baraqex';
const server = createServer({
port: 3000,
apiDir: './src/api',
pagesDir: './src/pages',
staticDir: './public',
enableCors: true,
// Database configuration
db: {
url: process.env.DATABASE_URL,
type: 'mongodb' // or 'mysql', 'postgres'
},
// Authentication configuration
auth: {
secret: process.env.JWT_SECRET,
expiresIn: '7d'
}
});
// Enable SSR with hydration
server.enableSSR({
hydratable: true,
staticGeneration: true
});
// Add custom middleware
server.use((req, res, next) => {
console.log(`${req.method} ${req.path}`);
next();
});
// Start the server
server.start().then(() => {
console.log('🚀 Server running on http://localhost:3000');
});File-Based Routing
Baraqex automatically generates routes based on your file structure. No manual route configuration needed!
File Structure → Routes
// pages/about.js - Automatic route: /about
import { jsx } from 'baraqex';
export default function AboutPage(props) {
return jsx('div', { className: 'container' },
jsx('h1', null, 'About Us'),
jsx('p', null, 'Welcome to our amazing website!'),
jsx('div', null,
jsx('h2', null, 'Server Data:'),
jsx('pre', null, JSON.stringify(props.serverData, null, 2))
)
);
}
// Optional: Server-side data fetching
AboutPage.getServerProps = async (req, res) => {
// This runs on the server
const data = await fetch('https://api.example.com/about');
const aboutData = await data.json();
return {
serverData: aboutData,
timestamp: new Date().toISOString()
};
};
// Optional: Page metadata
AboutPage.title = 'About - My App';
AboutPage.description = 'Learn more about our company';API Routes
Create powerful REST APIs using the same file-based routing system. Each file in the api/ directory becomes an endpoint.
// api/users.js - Automatic route: /api/users
export async function get(req, res) {
try {
// This runs on the server
const users = await User.find({});
res.json({
success: true,
data: users
});
} catch (error) {
res.status(500).json({
success: false,
error: error.message
});
}
}
export async function post(req, res) {
try {
const newUser = await User.create(req.body);
res.status(201).json({
success: true,
data: newUser
});
} catch (error) {
res.status(400).json({
success: false,
error: error.message
});
}
}
// api/users/[id].js - Dynamic route: /api/users/:id
export async function get(req, res) {
const { id } = req.params;
const user = await User.findById(id);
if (!user) {
return res.status(404).json({
success: false,
error: 'User not found'
});
}
res.json({ success: true, data: user });
}Advanced Features
Middleware Support
Add custom middleware for authentication, logging, CORS, and more.
Static Generation
Pre-generate static pages for maximum performance and SEO benefits.
Hot Reload
Development server with instant updates when you change your code.
Error Handling
Built-in error boundaries and graceful error handling for production apps.